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

.tn-select-list
    display flex
    overflow hidden
    position relative
    width 100%
    // height 400px
    justify-content: space-around
    align-items: center;

    &-item
        position relative
        width 100%
        height 300px
        // background-color #eee
        font-size 14px
        box-sizing border-box
        transform translate3d(0px, 10px, 0px)
        ul 
            margin 0
            padding 0
        li
            display flex
            position relative
            width 100%
            height 40px
            color #000
            // box-sizing border-box
            line-height 40px
            align-items center
            justify-content center
            white-space: nowrap;
        &-active
            // color red
            font-size 18px

    &__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% $datetime-item-height * 3
        // background-size 100% 129px
        background-repeat no-repeat

    &__indicator
        z-index 4
        display flex
        justify-content center
        flex-direction column
        & > span {
            display block
            width 100%
            height $datetime-item-height
            position relative
            &::before {
                line-1px(top)
            }
            &::after {
                line-1px(bottom)
            }
        }