@charset "UTF-8";

//-----------------------------------------------------
// picker.scss
//-----------------------------------------------------

$pickerHeight:             180px !default;

.panel--picker{
    display: none;
    .active &{
        display: block;
    }
    .panel-hd{
        @extend %justify;
        background: $colorF;
        line-height: 44px;
        color: $primary;
        .hd-btn{
            padding: 0 15px;
        }
    }
}

.picker-list,
.picker-item{
    overflow: hidden;
    position: relative;   
}
// .picker {
//     background-color: #fff;
//     font-size: 16px;
//     .select-list {
//         text-align: center;
//         line-height: 24px;
//         li {
//             @extend %ellipsis;
//         }
//         .xl {
//             font-size: 24px;
//             color: $blue;
//             line-height: $barHeight;
//         }
//         .l {
//             font-size: 20px;
//             line-height: 34px;
//         }
//     }
// }
.picker-item {
    background-color: #fff;
    height: $pickerHeight;
    box-sizing: border-box;
    .select-list {
        text-align: center;
        line-height: 36px;
        color: $colorC;
        li {
            @extend %ellipsis;

            &.active{
                color: $color3;
            }
        }

    }
    &::before, &::after {
        content: "";
        height: 1px;
        background-color: $blue;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        margin-top: -18px;
    }
    &::after {
        margin-top: 18px;
    }
}
.picker-mask {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events:none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 1) 100%);
}
.picker-list{
    position: relative;
    @include equal-flex('.picker-item');
}

.picker-tips{
    text-align: center;
}