/*
* created by zhongzheng at 2019.11.12
*/
@import "../style/themes/default.less";
@import "../style/mixins/index.less";

@picker-view-prefix-cls: ~"@{sino-prefix}-picker-view";

.@{picker-view-prefix-cls} {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    user-select: none;
    -webkit-text-size-adjust: 100%;
    /* avoid iOS text size adjust */

    &-toolbar {
        .bb1px(@left: .3rem, @right: .3rem);
        display: flex;
        justify-content: space-between;
        height: @picker-view-toolbar-height;
        line-height: @picker-view-toolbar-height;
    }

    &-cancel,
    &-confirm {
        padding: @picker-view-action-padding;
        font-size: @picker-view-action-font-size;
        background-color: transparent;
        border: none;

        &:active {
            background-color: mix(#ffffff, @btn-active-mixin-color, 100% - @btn-active-mixin-percent);
        }
    }

    &-cancel {
        color: @picker-view-cancel-text-color;
    }

    &-confirm {
        color: @picker-view-action-text-color;
    }

    &-title {
        max-width: 50%;
        font-weight: 500;
        font-size: @picker-view-title-font-size;
        text-align: center;
    }

    &-columns {
        position: relative;
        display: flex;
    }

    &-frame {
        position: absolute;
        top: 50%;
        left: .3rem;
        right: .3rem;
        z-index: 3;
        transform: translateY(-50%);
        pointer-events: none;

        &:after {
            position: absolute;
            box-sizing: border-box;
            content: ' ';
            pointer-events: none;
            top: -50%;
            right: -50%;
            bottom: -50%;
            left: -50%;
            border: 0 solid #ebedf0;
            border-width: 1px 0;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
        }
    }

    &-mask {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .9), hsla(0, 0%, 100%, .4)),
            linear-gradient(0deg, hsla(0, 0%, 100%, .9), hsla(0, 0%, 100%, .4));
        background-repeat: no-repeat;
        background-position: top, bottom;
        backface-visibility: hidden;
        pointer-events: none;
    }

    &-column {
        flex: 1;
        overflow: hidden;
        font-size: @picker-view-option-font-size;
        text-align: center;

        &-wrapper {
            transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
        }

        &-item {
            padding: 0 5px;
            color: @picker-view-option-text-color;

            &-disabled {
                opacity: @picker-view-option-disabled-opacity;
            }
        }
    }
}
