@charset "UTF-8";
@import "../core/index-noreset.scss";
@import "./scss/mixin";
@import "./scss/variable";

.#{$css-prefix} {
    &range {
        @include box-sizing;
        @include range-bounding();

        & {
            @include range-state(
                $range-normal-unselected-color,
                $range-normal-unselected-color-disabled,
                $range-normal-unselected-color-hover,
                $range-normal-selected-color,
                $range-normal-selected-color-disabled,
                $range-normal-selected-color-hover,
                $range-normal-slider-bg-color,
                $range-normal-slider-bg-color-disabled,
                $range-normal-slider-bg-color-hover,
                $range-normal-slider-border-color,
                $range-normal-slider-border-color-disabled,
                $range-normal-slider-border-color-hover,
                $range-normal-mark-color,
                $range-normal-mark-color-disabled,
                $range-normal-mark-color-hover,
                $range-normal-mark-selected-color,
                $range-normal-mark-selected-color-disabled,
                $range-normal-mark-selected-color-hover
            );

            @include range-size(
                $range-size-m-track-height,
                $range-size-m-scale-height,
                $range-size-m-slider-hw,
                $range-size-m-slider-shadow,
                $range-size-m-mark-font-size,
                $range-size-m-mark-font-weight,
                $range-size-m-mark-font-lineheight
            );

            @include range-hover(
                $range-normal-slider-bg-color-hover,
                $range-normal-selected-color-hover,
                $range-normal-unselected-color-hover
            );

            @include range-click();
        }
    }

    &range[dir=rtl] {
        .#{$css-prefix}range-mark {
            position: relative;
            cursor: auto;
            .#{$css-prefix}range-mark-text {
                position: absolute;
                right: 0;
                transform: translateX(50%);
                padding-right: 2px;
                text-align: center;
            }
        }
    }
}