@use '../../libs/css/theme' as *;
@use '../../libs/css/mixin' as *;

@include b(slider) {
    position: relative;
    @include flex;
    align-items: center;

    @include e(native) {
        flex: 1;
    }

    @include e(inner) {
        flex: 1;
        @include flex(column);
        position: relative;
        border-radius: $hy-radius-semicircle;
        padding: $hy-border-margin-padding-base $hy-border-margin-padding-lg;
        justify-content: center;
    }

    @include e(show-value) {
        margin: $hy-border-margin-padding-base $hy-border-margin-padding-lg
            $hy-border-margin-padding-base 0;
    }

    @include e(show-range-value) {
        padding-top: 2px;
        font-size: 12px;
        line-height: 12px;
        position: absolute;
        bottom: 0;
    }

    @include e(base) {
        background-color: $hy-background--empty;
        border-radius: $hy-radius-semicircle;
    }

    /* #ifndef APP-NVUE */
    &-inner::before {
        position: absolute;
        right: 0;
        left: 0;
        content: '';
        top: -8px;
        bottom: -8px;
        z-index: -1;
    }
    /* #endif */

    @include e(gap) {
        position: relative;
        border-radius: $hy-radius-semicircle;
        transition: width 0.2s;
        background-color: $hy-primary;
        &-0 {
            background-color: $hy-background--empty;
        }
    }

    @include e(button) {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        background-color: $hy-background--3;
        transform: scale(0.9);
        /* #ifdef H5 */
        cursor: pointer;
        /* #endif */

        @include m(wrap) {
            position: absolute;
            // transform: translate3d(50%, -50%, 0);
        }
    }

    @include e(disabled) {
        opacity: 0.5;
    }
}