@require 'variables.styl'
@require 'animated.styl'
@require 'keep-theme.styl'

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


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

  &::-webkit-scrollbar {
    width 6px
    height 6px
    transition all 0.2s ease
  }

  &::-webkit-scrollbar-thumb {
    background var(--scrollbar-color)
    border-radius 1px
  }

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


// ======================================================================
// html, body
// ======================================================================
html, body {
  position relative
  width 100%
  height 100%
  margin 0
  padding 0
  color var(--default-text-color)
  background var(--background-color)
  font-family $default-font-family
  font-weight $default-font-weight
  font-size $default-font-size
  line-height $default-font-line-height

  &::-webkit-scrollbar {
    width 8px
    height 8px
  }

  +keep-tablet() {
    font-size $default-font-size * 0.96
    line-height $default-font-line-height * 0.96
  }


  +keep-mobile() {
    font-size $default-font-size * 0.9
    line-height $default-font-line-height * 0.9
  }

}


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


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


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

  i, span {
    color var(--default-text-color)
  }

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

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

}


// ======================================================================
// img
// ======================================================================
img {
  &[lazyload] {
    padding 10px
    margin 20px auto !important
    cursor not-allowed
    pointer-events none
  }
}


// ======================================================================
// button
// ======================================================================
button {
  padding 0
  margin 0
  border 0
  outline none
  cursor pointer
  background transparent
}

.btn {
  display inline-block
  position relative
  text-align center
  cursor pointer
  white-space nowrap
  border-radius 5px
  padding 8px 16px
  background var(--background-color)

  hover-style(true, 1.06, 1.06)

  &:hover {
    color var(--background-color)
    background var(--primary-color)
  }
}


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


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


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

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

  .tooltip-content {
    position absolute
    top 0
    left 50%
    transform translateX(-50%) translateY(-108%)
    font-size 0.8rem
    padding 0.2rem 0.6rem
    background var(--first-text-color)
    color var(--fourth-text-color)
    border-radius 0.3rem
    display none
    z-index $z-index-9
    white-space nowrap
    transition-t("display", "0", "0.2", "ease")
  }
}