$gray: #eee;
$dark-gray: #a2a2a2;
$light-gray: #868686;
$shadow-gray: #ccc;

$blue: #4990e2;
$white: #fff;
$yellow: #ffab20;

.sc-comment-pane-list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-left: 7%;
  margin-top: 0;
  width: 100%;

  li {
    background-color: transparent;
    border-bottom: 0;
    border-radius: 3px;
    cursor: pointer;
    height: auto;
    list-style-type: none;
    max-width: 50%;
    min-height: 20px;
    min-width: 50%;
    position: absolute;
    word-wrap: break-word;
    z-index: 0;

    .sc-new-comment {
      bottom: 10px;
      margin: 0 10px 5px 5px;
      position: relative;
      .comment-user-name {
        color: $yellow;
        font-size: 14px;
        font-weight: bold;
        margin-left: 8px;
      }
    }

    textarea {
      background-color: $white;
      border-bottom: 1px dashed $yellow;
      border-left: 1px dashed $yellow;
      border-right: 0;
      border-top: 0;
      bottom: 5px;
      display: block;
      font-family: 'Fira Sans';
      font-size: 14px;
      margin: 0 0 5px 12px;
      outline: none;
      overflow: hidden;
      position: relative;
      resize: none;
      width: 100%;
     }

    .comment-reply {
      background-color: $yellow;
      border: 0;
      border-radius: 50%;
      color: $white;
      float: right;
      height: 25px;
      margin-bottom: 5px;
      position: relative;
      right: -4px;
      text-align: center;
      transition: .2s;
      width: 25px;

      &:disabled {
        background-color: $shadow-gray;
      }
    }

    .comment-resolve {
      background-color: $blue;
      border: 0;
      border-radius: 50%;
      color: $white;
      float: right;
      height: 25px;
      margin-bottom: 5px;
      margin-right: 5px;
      text-align: center;
      width: 25px;
    }

    .comment-list {
      font-size: 14px;

      .single-comment-row {
        line-height: 15px;
        padding: 3px 12px;

        .sc-comment-entry {
          width: 100%;
        }
      }

      .comment-user-name {
        color: $yellow;
        font-weight: bold;

        i {
          font-weight: 100;
        }
      }

      .comment-text {
        border-left: 1px solid $dark-gray;
        margin-left: 5px;
        padding-left: 5px;
      }
    }
  }

  .sc-comment-active {
    left: -30px;

    .sc-comment-entry {
      width: 100% !important;
    }
  }

  .sc-comment-resolve-icon {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    width: 15%;
    z-index: 300;

    .sc-comment-resolve-icon-circle {
      align-items: center;
      border: 1px solid $light-gray;
      border-radius: 50%;
      display: flex;
      height: 25px;
      justify-content: center;
      transition: .3s;
      width: 25px;

      &:hover {
        border-color: $blue;

        i {
          color: $blue;
        }
      }

      i {
        color: $light-gray;
        transition: .3s;
      }
    }
  }
}