// variables
$gt-color-main := #6190e8
$gt-color-sub := #a1a1a1
$gt-color-loader := #999999
$gt-color-error := #ff3860
$gt-color-hr :=  #e9e9e9
$gt-color-comment-txt := #333333
$gt-color-link-active := #333333
$gt-color-btn := #ffffff
$gt-size-base := 16px // default font-size
$gt-size-border-radius := 5px
$gt-breakpoint-mobile := 479px
$gt-mask-z-index := 9999

// functions & mixins
clearfix() {
  &:before
  &:after {
    display table
    clear both
    content ""
  }
}
em($px, $base-size = $gt-size-base) {
  u = unit($px)
  if (u is 'px') {
    unit($px / $base-size, 'em')
  }
  else {
    unit($px, u)
  }
}

mobile() {
  @media (max-width $gt-breakpoint-mobile) {
    {block}
  }
}

// variables - calculated
$gt-size-loader-dot := em(6px)
$gt-size-loader := em(28px)
$gt-size-avatar := em(50px)
$gt-size-avatar-mobi := em(32px)

// styles
// Put everything under container to avoid style conflicts
.comments-container {
  .gt-container {
    box-sizing border-box
    * {
      box-sizing border-box
    }
    font-size $gt-size-base
    // common
    a {
      color $gt-color-main
      &:hover {
        color lighten($gt-color-main, 20%)
        border-color lighten($gt-color-main, 20%)
      }
      &.is--active {
        color $gt-color-link-active
        cursor default !important
        &:hover {
          color $gt-color-link-active
        }
      }
    }
    .hide {
      display none !important
    }
    // icons
    .gt-svg {
      display inline-block
      width em(16px)
      height em(16px)
      vertical-align sub
      svg {
        width 100%
        height 100%
        fill $gt-color-main
      }
    }
    .gt-ico {
      display inline-block
      &-text {
        margin-left em(5px)
      }
      &-github {
        width 100%
        height 100%
        .gt-svg {
          width 100%
          height 100%
        }
        svg {
          fill inherit
        }
      }
    }
    // loader
    .gt-spinner {
      position relative
      &::before {
        position absolute
        top 3px
        box-sizing border-box
        width em(12px)
        height em(12px)
        margin-top em(-3px)
        margin-left em(-6px)
        border 1px solid $gt-color-btn
        border-top-color $gt-color-main
        border-radius 50%
        animation gt-kf-rotate 0.6s linear infinite
        content ''
      }
    }

    .gt-loader {
      position relative
      display inline-block
      width $gt-size-loader
      height $gt-size-loader
      font-style normal
      // font-size: $gt-size-loader
      line-height $gt-size-loader
      border 1px solid $gt-color-loader
      border-radius 50%
      animation ease gt-kf-rotate 1.5s infinite
      &:before {
        position absolute
        top 0
        left 50%
        display block
        width $gt-size-loader-dot
        height $gt-size-loader-dot
        margin-top -($gt-size-loader-dot / 2)
        margin-left -($gt-size-loader-dot / 2)
        background-color $gt-color-loader
        border-radius 50%
        content ''
      }
    }
    // avatar
    .gt-avatar {
      display inline-block
      width $gt-size-avatar
      height $gt-size-avatar
      +mobile() {
        width $gt-size-avatar-mobi
        height $gt-size-avatar-mobi
      }
      img {
        width 100%
        height auto
        border-radius 3px
      }
      &-github {
        width $gt-size-avatar - em(2px)
        height $gt-size-avatar - em(2px)
        cursor pointer
        +mobile() {
          width $gt-size-avatar-mobi - em(2px)
          height $gt-size-avatar-mobi - em(2px)
        }
      }
    }
    // button
    .gt-btn {
      display inline-block
      padding em(12px) em(20px)
      color $gt-color-btn
      font-size em(12px)
      line-height 1
      white-space nowrap
      text-decoration none
      background-color $gt-color-main
      border 1px solid $gt-color-main
      border-radius $gt-size-border-radius
      outline none
      cursor pointer
      &-text {
        font-weight 400
      }
      &-loading {
        position relative
        display inline-block
        width em(12px)
        height em(16px)
        margin-left em(8px)
        vertical-align top
      }
      &.is--disable {
        cursor not-allowed
        opacity 0.5
      }
      &-login {
        margin-right 0
      }
      &-preview {
        color $gt-color-main
        background-color var(--background-color-1)
        &:hover {
          background-color var(--background-color-2)
        }
      }
      &-public {
        &:hover {
          background-color lighten($gt-color-main, 20%)
          border-color lighten($gt-color-main, 20%)
        }
      }
    }
  }
  &-loadmore
  // loadmore

  /* error */
  .gt-error {
    margin em(10px)
    color $gt-color-error
    text-align center
  }

  // initing
  .gt-initing {
    padding em(20px) 0
    text-align center
    &-text {
      margin em(10px) auto
      font-size 92%
    }
  }

  // no int
  .gt-no-init {
    padding em(20px) 0
    text-align center
  }

  // link
  .gt-link {
    border-bottom 1px dotted $gt-color-main
    &-counts
    &-project {
      text-decoration none
    }
  }

  // meta
  .gt-meta {
    position relative
    z-index 10
    margin em(20px) 0
    padding em(16px) 0
    font-size em(16px)
    border-bottom 1px solid $gt-color-hr
    clearfix()
  }

  .gt-counts {
    margin 0 em(10px) 0 0
    color var(--text-color-3)
  }

  .gt-user {
    float right
    margin 0
    font-size 92%
    &-pic {
      width 16px
      height 16px
      margin-right em(8px)
      vertical-align top
    }
    &-inner {
      display inline-block
      cursor pointer
      .gt-user-name {
        color var(--text-color-3)
      }
    }

    .gt-ico {
      margin 0 0 0 em(5px)
      svg {
        fill var(--text-color-3)
      }
    }
    .is--poping {
      .gt-ico {
        svg {
          fill $gt-color-main
        }
      }
    }
  }

  .gt-version {
    margin-left em(6px)
    color $gt-color-sub
  }

  .gt-copyright {
    margin 0 em(15px) em(8px)
    padding-top em(8px)
    border-top 1px solid var(--border-color)
  }

  // popup
  .gt-popup {
    position absolute
    top em(38px)
    right 0
    display inline-block
    padding em(10px) 0
    font-size em(14px)
    letter-spacing 0.5px
    background var(--background-color-1)
    border 1px solid var(--border-color)
    .gt-action {
      position relative
      display block
      margin em(8px) 0
      padding 0 em(18px)
      text-decoration none
      cursor pointer
      &.is--active {
        &:before {
          position absolute
          top em(7px)
          left em(8px)
          width em(4px)
          height em(4px)
          background $gt-color-main
          content ''
        }
      }
    }
  }
  // header
  .gt-header {
    position relative
    display flex
    &-comment {
      flex 1
      margin-left em(20px)
      +mobile() {
        margin-left em(14px)
      }
    }
    &-textarea {
      display block
      box-sizing border-box
      width 100%
      min-height em(82px)
      max-height em(240px)
      padding em(12px)
      color var(--text-color-3)
      font-size em(14px)
      word-wrap break-word
      background-color var(--text-color-6)
      border 1px solid var(--border-color)
      border-radius $gt-size-border-radius
      outline none
      transition all 0.25s ease
      resize vertical
      &:hover {
        background-color var(--background-color-1)
      }
    }
    &-preview {
      padding em(12px)
      background-color var(--background-color-1)
      border 1px solid var(--border-color)
      border-radius $gt-size-border-radius
    }
    &-controls {
      position relative
      margin em(12px) 0 0
      clearfix()
      +mobile() {
        margin 0
      }
      &-tip {
        color $gt-color-main
        font-size em(14px)
        text-decoration none
        vertical-align sub
        +mobile() {
          display none
        }
      }
      .gt-btn {
        float right
        margin-left em(20px)
        +mobile() {
          float none
          width 100%
          margin em(12px) 0 0
        }
      }
    }
  }

  &:after {
    position fixed
    top 0
    right 0
    bottom 100%
    left 0
    opacity 0
    content ''
  }
  &.gt-input-focused {
    position relative
    &:after {
      position fixed
      top 0
      right 0
      bottom 0
      left 0
      z-index $gt-mask-z-index
      background #000
      opacity 0.6
      transition opacity 0.3s, bottom 0s
      content ''
    }
    .gt-header-comment {
      z-index $gt-mask-z-index + 1
    }
  }

  // comments
  .gt-comments {
    padding-top em(20px)
    &-null {
      text-align center
    }
    &-controls {
      margin em(20px) 0
      text-align center
    }
  }

  // comment
  .gt-comment {
    position relative
    display flex
    padding em(10px) 0
    &-content {
      flex 1
      margin-left em(20px)
      padding em(12px) em(16px)
      overflow auto
      background-color var(--background-color-2)
      transition all ease 0.25s
      +mobile() {
        margin-left em(14px)
        padding em(10px) em(12px)
      }
    }
    &-header {
      position relative
      margin-bottom em(8px)
      font-size em(14px)
    }
    &-block-1 {
      float right
      width em(32px)
      height em(22px)
    }
    &-block-2 {
      float right
      width em(64px)
      height em(22px)
    }
    &-username {
      color $gt-color-main
      font-weight 500
      text-decoration none
      &:hover {
        text-decoration underline
      }
    }
    &-text {
      margin-left em(8px)
      color $gt-color-sub
    }
    &-date {
      margin-left em(8px)
      color $gt-color-sub
    }
    &-like
    &-edit
    &-reply {
      position absolute
      height em(22px)
      &:hover {
        cursor pointer
      }
    }
    &-like {
      top 0
      right em(32px)
    }
    &-edit
    &-reply {
      top 0
      right 0
    }
    &-body {
      // color: $gt-color-comment-txt !important
      color var(--text-color-2) !important
      .email-hidden-toggle a {
        display inline-block
        height 12px
        padding 0 9px
        color #444d56
        font-weight 600
        font-size 12px
        line-height 6px
        text-decoration none
        vertical-align middle
        background #dfe2e5
        border-radius 1px
        &:hover {
          background-color #c6cbd1
        }
      }
      .email-hidden-reply {
        display none
        white-space pre-wrap
        .email-signature-reply {
          margin 15px 0
          padding 0 15px
          color #586069
          border-left 4px solid #dfe2e5
        }
      }
      .email-hidden-reply.expanded {
        display block
      }
    }
    &-admin {
      .gt-comment-content {
        background-color var(--text-color-6)
      }
    }
  }

  @keyframes gt-kf-rotate {
    0% {
      transform rotate(0)
    }
    100% {
      transform rotate(360deg)
    }
  }
}