@import 'css-variables.styl'
@import 'stylus-variables.styl'
@import 'animated.styl'
@import 'keep-style.styl'

// ======================================================================
// all
// ======================================================================
* {
  // ====================================
  //  transition
  // ====================================
  transition-g()


  // ====================================
  // scrollbar
  // ====================================

  &::-webkit-scrollbar {
    width 0.4rem
    height 0.32rem
    transition all 0.2s ease
  }

  &::-webkit-scrollbar-thumb {
    background var(--scrollbar-color)
    border-radius 0.2rem
  }

  &::-webkit-scrollbar-track {
    background var(--scrollbar-background-color)
  }
}


// ======================================================================
// html, body
// ======================================================================
html
body {
  position relative
  width 100%
  height 100%
  margin 0
  padding 0
  color var(--text-color-3)
  font-weight var(--base-font-weight)
  font-size var(--base-font-size)
  font-family var(--base-font-family)
  line-height var(--base-line-height)
  letter-spacing 0.2px
  background var(--background-color-1)

  &::-webkit-scrollbar {
    width 0.56rem
    height 0.56rem
  }

  +keep-tablet() {
    font-size calc(var(--base-font-size) * 0.95) !important
    line-height calc(var(--base-line-height) * 0.95) !important

    &::-webkit-scrollbar {
      width 0.42rem
      height 0.42rem
    }
  }

  +keep-mobile() {
    font-size calc(var(--base-font-size) * 0.9) !important
    line-height calc(var(--base-line-height) * 0.9) !important
  }
}


// ======================================================================
// selection
// ======================================================================
::selection {
  color #fff
  background var(--selection-color)
}


// ======================================================================
// ul, ol, li
// ======================================================================
ul
ol
li {
  margin 0
  padding 0
  list-style none
}


// ======================================================================
// a
// ======================================================================
a {
  color var(--text-color-3)
  text-decoration none

  i
  span {
    color var(--text-color-3)
  }

  &:hover
  &:active {
    color var(--primary-color)
    text-decoration none !important

    i
    span {
      color var(--primary-color)
    }
  }
}


// ======================================================================
// img
// ======================================================================
img {

  .dark-mode & {
    filter brightness(0.9)

    &:hover {
      filter brightness(1)
    }
  }

  &[lazyload] {
    position relative
    box-sizing border-box
    width 8rem
    height 8rem
    box-shadow none !important
    cursor not-allowed
    pointer-events none

    &::before {
      position absolute
      top 0
      left 0
      display block
      width 100%
      height 100%
      background var(--background-color-1)
      content ''
      transition-t("background", "0", "0.2", "ease")
    }


    &::after {
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      display block
      width 2rem
      height 2rem
      margin auto
      border 2px solid var(--text-color-6)
      border-top-color var(--selection-color)
      border-left-color var(--selection-color)
      border-radius 50%
      animation img-loading-animation 750ms infinite linear
      content ''
      transition-t("border", "0", "0.2", "ease")
    }
  }
}


// ======================================================================
// flex center
// ======================================================================
.flex-center {
  display flex
  align-items center
  justify-content center
}


// ======================================================================
// flex start
// ======================================================================
.flex-start {
  display flex
  align-items center
  justify-content flex-start
}


// ======================================================================
// flex end
// ======================================================================
.flex-end {
  display flex
  align-items center
  justify-content flex-end
}


// ======================================================================
// border box
// ======================================================================
.border-box {
  position relative
  box-sizing border-box
}


// ======================================================================
// text ellipsis
// ======================================================================
.text-ellipsis {
  overflow hidden
  white-space nowrap
  text-overflow ellipsis
}


// ======================================================================
// text color 2
// ======================================================================
.text-color-2 {
  color var(--text-color-2)
}


// ======================================================================
// text color 3
// ======================================================================
.text-color-3 {
  color var(--text-color-3)
}


// ======================================================================
// text color 4
// ======================================================================
.text-color-4 {
  color var(--text-color-4)
}


// ======================================================================
// clear float
// ======================================================================
.clear {
  &::after {
    display block
    clear both
    height 0
    overflow hidden
    visibility hidden
    content ''
  }
}


// ======================================================================
// tooltip
// ======================================================================
.tooltip {
  position relative
  box-sizing border-box

  &:hover {
    .tooltip-content {
      display inline-block
    }
  }

  &.show-img {
    .tooltip-content {
      display none !important
    }
  }

  .tooltip-content {
    position absolute
    top -0.4rem
    left 50%
    z-index $z-index-10
    display none
    box-sizing border-box
    padding 0.2rem 0.6rem
    color var(--text-color-6)
    font-size 0.8rem
    letter-spacing 0.8px
    white-space nowrap
    background var(--text-color-1)
    border-radius 0.3rem
    transform translateX(-50%) translateY(-100%)
    transition-t("display", "0", "0.2", "ease")
    disable-user-select()
  }
}

// ======================================================================
// tooltip image
// ======================================================================
.tooltip-img {
  position relative
  box-sizing border-box

  &.show-img {
    .tooltip-img-box {
      display flex
    }
  }


  .tooltip-img-box {
    position absolute
    top -0.4rem
    left 50%
    z-index $z-index-11
    display none
    align-items center
    justify-content center
    box-sizing border-box
    min-height 6rem
    overflow hidden
    background var(--background-color-3)
    border 0.2rem solid var(--text-color-4)
    border-radius 0.3rem
    transform translateX(-50%) translateY(-100%)
    transition-t("display", "0", "0.2", "ease")
    disable-user-select()

    &.has-tip {
      flex-direction column
      justify-content space-between
    }

    img {
      display block
      max-height 10rem
    }

    .tip {
      position relative
      box-sizing border-box
      width 100%
      padding 0.3rem 0
      color #555
      font-size 0.9rem
      text-align center
    }
  }
}