/* variables */
$gt-color-main := $color-theme
$gt-color-sub := #a1a1a1
$gt-color-loader := #999999
$gt-color-error := $color-md-red
$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
.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
      &: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: $gt-color-btn
      color: $gt-color-main
      &:hover
        background-color: darken($gt-color-btn, 5%)
        border-color: lighten($gt-color-main, 20%)
    &-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)
    position: relative
    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 $gt-color-input-border
      font-size: em(14px)
      word-wrap: break-word
      resize: vertical
      background-color: $gt-color-input-bg
      outline: none
      transition: all 0.25s ease
      &:hover
        background-color: lighten($gt-color-input-bg, 50%)
        // box-shadow: 0 em(10px) em(60px) 0 $gt-color-input-bg
    &-preview
      padding: em(12px)
      border-radius: $gt-size-border-radius
      border: 1px solid $gt-color-input-border
      background-color: $gt-color-input-bg
    &-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
      .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: $gt-color-comment-adminbg

@keyframes gt-kf-rotate
  0%
    transform: rotate(0)
  100%
    transform: rotate(360deg)
.gt-initing-text
	color: $gt-color-main !important
	text-align: center !important
.markdown-body blockquote
    border-left: .25em solid $gt-color-main !important
    padding: 16.1px 16px 16px  !important
    transition: all .28s ease  !important
    -moz-transition: all .28s ease  !important
    -webkit-transition: all .28s ease  !important
    -o-transition: all .28s ease  !important