@import './_var.styl'
@import './_mixin.styl'

.tn-selectPicker
  &__content
    z-index 99
    position relative
    width 100%
    height $selectpicker-content-height
    overflow hidden
    display flex
    color: #333
  &__item
    height 100%
    position relative
    flex 1
    font-size $selectpicker-item-font
    &-box
      height: 100%
    &-content
      & > span
        width 100%
        display block
        text-align center
        transition font-size 0.1s ease-in-out
        height $selectpicker-item-height
        line-height $selectpicker-item-height
    &-span--active
      overflow hidden
      font-size $selectpicker-item-font-active
  &__shade, &__indicator
    pointer-events none // 去除所有事件，只有浮层效果
    position absolute
    left 0
    top 0
    height 100%
    width 100%
  &__shade
    z-index 3
    transform translateZ(0px)
    background-image linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6))
    background-position top, bottom
    background-size 100% $selectpicker-item-height * 2
    background-repeat no-repeat
  &__indicator
    z-index 4
    display flex
    justify-content center
    flex-direction column
    & > span {
      display block
      width 100%
      height $selectpicker-item-height
      position relative
      &::before {
        line-1px(top)
      }
      &::after {
        line-1px(bottom)
      }
    }