/* variables */
$gt-color-main := #6190e8
$gt-color-sub := #a1a1a1
$gt-color-loader := #999999
$gt-color-error := #ff3860
$gt-color-hr :=  #E9E9E9
$gt-color-input-border := rgba(0,0,0,0.1)
$gt-color-input-bg := #f6f6f6
$gt-color-comment-bg := #f9f9f9
$gt-color-comment-adminbg := #f6f9fe
$gt-color-comment-txt := #333333
$gt-color-link-active := #333333
$gt-color-btn := #ffffff
$gt-color-popbg := #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 {
    content: " ";
    display: table;
  }
  &:after { clear: both; }
}
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
        content: ''
        box-sizing: border-box
        position: absolute
        top: 3px
        width: em(12px)
        height: em(12px)
        margin-top: em(-3px)
        margin-left: em(-6px)
        border-radius: 50%
        border: 1px solid $gt-color-btn
        border-top-color: $gt-color-main
        animation: gt-kf-rotate .6s linear infinite

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

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

  /* 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
    margin: em(20px) 0
    padding: em(16px) 0
    position: relative
    border-bottom: 1px solid $gt-color-hr
    font-size: em(16px)
    z-index: 10
    clearfix()

  .gt-counts
    margin: 0 em(10px) 0 0

  .gt-user
    float: right
    margin: 0
    font-size: 92%
    &-pic
      width: 16px
      height: 16px
      vertical-align: top
      margin-right: em(8px)
    &-inner
      display: inline-block
      cursor: pointer
    .gt-ico
      margin: 0 0 0 em(5px)
      svg
        fill: inherit
    .is--poping
      .gt-ico
        svg
          fill: $gt-color-main

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

  .gt-copyright
    margin: 0 em(15px) em(8px)
    border-top: 1px solid $gt-color-hr
    padding-top: em(8px)

  /* popup */
  .gt-popup
    position: absolute
    right: 0
    top: em(38px)
    background: $gt-color-popbg
    display: inline-block
    border: 1px solid $gt-color-hr
    padding: em(10px) 0
    font-size: em(14px)
    letter-spacing: .5px
    .gt-action
      cursor: pointer
      display: block
      margin: em(8px) 0
      padding: 0 em(18px)
      position: relative
      text-decoration: none
      &.is--active
        &:before
          content: ''
          width: em(4px)
          height: em(4px)
          background: $gt-color-main
          position: absolute
          left: em(8px)
          top: em(7px)
  /* header */
  .gt-header
    position: relative
    display: flex
    &-comment
      flex: 1
      margin-left: em(20px)
      +mobile()
        margin-left: em(14px)
    &-textarea
      padding: em(12px)
      display: block
      box-sizing: border-box
      width: 100%
      min-height: em(82px)
      max-height: em(240px)
      border-radius: $gt-size-border-radius
      border: 1px solid var(--border-color)
      font-size: em(14px)
      word-wrap: break-word
      resize: vertical
      color: var(--normal-text-color)
      background-color: var(--fourth-text-color)
      outline: none
      transition: all 0.25s ease
      &:hover
        background-color: var(--background-color)
    &-preview
      padding: em(12px)
      border-radius: $gt-size-border-radius
      border: 1px solid var(--border-color)
      background-color: var(--background-color)
    &-controls
      position: relative
      margin: em(12px) 0 0
      clearfix()
      +mobile()
        margin: 0
      &-tip
        font-size: em(14px)
        color: $gt-color-main
        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
    content: ''
    position: fixed
    bottom: 100%
    left: 0
    right: 0
    top: 0
    opacity: 0
  &.gt-input-focused
    position: relative
    &:after
      content: ''
      position: fixed
      bottom: 0
      left: 0
      right: 0
      top: 0
      background: #000
      opacity: 0.6
      transition: opacity .3s, bottom 0s
      z-index: $gt-mask-z-index
    .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
    padding: em(10px) 0
    display: flex
    &-content
      flex: 1
      margin-left: em(20px)
      padding: em(12px) em(16px)
      background-color: $gt-color-comment-bg
      overflow: auto
      transition: all ease 0.25s
      //&:hover
      //  box-shadow: 0 em(10px) em(60px) 0 darken($gt-color-comment-bg, 2%)
      +mobile()
        margin-left: em(14px)
        padding: em(10px) em(12px)
    &-header
      margin-bottom: em(8px)
      font-size: em(14px)
      position: relative
    &-block-1
      float: right
      height: em(22px)
      width: em(32px)
    &-block-2
      float: right
      height: em(22px)
      width: em(64px)
    &-username
      font-weight: 500
      color: $gt-color-main
      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(--second-text-color) !important
      .email-hidden-toggle a
        display: inline-block;
        height: 12px;
        padding: 0 9px;
        font-size: 12px;
        font-weight: 600;
        line-height: 6px;
        color: #444d56;
        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
          padding: 0 15px;
          margin: 15px 0;
          color: #586069;
          border-left: 4px solid #dfe2e5;
      .email-hidden-reply.expanded
        display: block
    &-admin
      .gt-comment-content
        background-color: var(--fourth-text-color)

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