.itv-picker{
    background-color: #FFF;
    width: 100%;
}
.itv-picker-ui {
    width: 100%;
    .title-bar {
        height: 44ipx;
        text-align: center;
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        font-size: @itv-font-size-large;
        position: relative;
        background-color: #fff;
        &::after{
            content: '';
            left: 0;
            bottom: 0;
            right: 0;
            border-bottom: @itv-border-color-base solid 1px;
            transform: scaleY(0.5);
            position: absolute;
        }
        .left-btn, .right-btn {
            height: 44pt;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: @itv-font-size-base;
           

        }
        .left-btn {
            left: 0;
            color: @itv-color-text-sub;
            padding-left: 16pt;
        }
        .right-btn{
            right: 0;
            color: @itv-primary-color;
            padding-right: 16pt;
            &.forbid{
                color: #aaa;
            }
        }
        

    }
}
.itv-picker-control{
    display: flex;
    height: 44ipx;
    border-bottom: 1px solid @itv-border-color-white;
    text-align: center;
    line-height: 44ipx;
    font-size: 14ipx;
    .itv-picker-cancel-btn,
    .itv-picker-confirm-btn{
        width: 60ipx;
        color: @itv-primary-color;
    }
    .itv-picker-title{
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.itv-picker-panel{
    height: 220ipx;
    display: flex;
    width: 100%;
    background-color: #fff;
}

.itv-picker-list{
    flex: 1;
    position: relative;
    height: 100%;
    overflow: hidden;
    text-align: center;
    .itv-picker-list-panel{
        transform-style: preserve-3d;
     
    }
    .itv-picker-mask{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,.3)),linear-gradient(0deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,.3));
        background-position: top, bottom;
       
        background-repeat: no-repeat;
        z-index: 3;
        &.itv-picker-row5{
            background-size: 100% 88ipx;
        }
        &.itv-picker-row7{
            background-size: 100% 132ipx;
        }
        &.clear-mask {
            background-image: none;
        }
    }
    .itv-picker-indicator{
        position: absolute;
        top: 88ipx;
        width: 100%;
        height: 44ipx;
        border-top: 1px solid @itv-border-color-base;
        border-bottom: 1px solid @itv-border-color-base;
        z-index: 3; 
        box-sizing: border-box;
        background: rgba(0, 0, 0, 0.04);
        display: none;
        &.itv-picker-row5{
            top: 88ipx;
        }
        &.itv-picker-row7{
            top: 132ipx;
        }
    }

    .itv-picker-content, .itv-picker-roller{
        position: absolute;
        top: 88ipx;
        width: 100%;
        height: 44ipx;
        background: rgba(0, 0, 0, 0.04);
        &.itv-picker-row5{
            top: 88ipx;
        }
        &.itv-picker-row7{
            top: 132ipx;
        }
    }
    .itv-picker-content{
        z-index: 2;
        // overflow: hidden;
    }
    .itv-picker-item, .itv-picker-roller-item{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 44ipx;
        color: #333;
        font-size: @itv-font-size-base;
        height: 44ipx;
        text-align: center;
    }
    .itv-picker-item{
        font-size:  @itv-font-size-base;
       
        &.hide-opacity {
            opacity: 0;
        }
        &.picker-forbid{
            color: #aaa;
        }
    }
    .itv-picker-roller{
        z-index: 1;
        transform-style: preserve-3d;
        display: none;
        .itv-picker-roller-item{
            backface-visibility: hidden;
            position: absolute;
            top: 0;
            width: 100%;
            color: #333;
            height: 44ipx;
        }
        .itv-picker-roller-item-hidden {
            visibility: hidden;
            opacity: 0;
        }
    }
}