@import '../default/var';

.#{$prefix}-slider {
    position: relative;
    &-tracker {
        height: 16px;
        padding: 6px 0;
        &-bar {
            height: 4px;
            border-radius: 2px;
            background: $slider-color-back;
            box-shadow: 0 0 10px 1px $slider-color-bar-shadow;
            &__inner {
                height: 100%;
                border-radius: 5px;
                background: $slider-color-fill;
            }
        }
    }
    &-thumb {
        position: absolute;
        top: 0;
        border-radius: 50%;
        background: $slider-color-thumb;
        box-shadow: 0 0 10px 1px $slider-color-shadow;
        cursor: pointer;
        transition: transform .3s;
        &.is-hover,
        &.is-dragging {
            transform: scale(1.5);
        }
    }
    &-label {
        height: 30px;
        line-height: 30px;
        position: relative;
        padding-top: 5px;
        .label-item {
            position: absolute;
            color: $slider-color-label;
            text-align: center;
            transform: translateX(-50%);
            .value {
                cursor: default;
                &:before {
                    content: "";
                    display: block;
                    height: 4px;
                    width: 1px;
                    margin: 0 auto;
                    background: $slider-color-label;
                }
            }
        }
    }
}