@import url(../../common/styles/theme.less);
@className: sp-slider;

.@{className} {
    display: block;
    box-sizing: border-box;
    color: #000000d9;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    height: 12px;
    margin: 10px 6px;
    padding: 4px 0;
    cursor: pointer;
    touch-action: none;

    &:hover {
        .sp-slider-rail {
            background-color: #e1e1e1;
        }

        .sp-slider-track {
            background-color: var(--color-primary-4);
        }

        .sp-slider-handle {
            border: solid 2px var(--color-primary-4);

            &:hover {
                border: solid 2px var(--color-primary-6);
            }
        }
    }

    &.--vertical {
        width: 12px;
        height: 100%;
        margin: 6px 10px;
        padding: 0 4px;
        display: inline-block;

        .@{className}-rail,
        .@{className}-track,
        .@{className}-marks {
            height: 100%;
            width: 4px;
        }

        .@{className}-marks {
            width: 0px;

            &-item {
                em {
                    top: 0;
                    left: 2px;
                }
            }
        }

        .@{className}-handle,
        .@{className}-handle-t,
        sp-tooltip[name='slider-handle'],
        sp-tooltip[name='slider-handle-t'] {
            left: -1px;
        }
    }


    &-marks {
        width: 100%;
        position: absolute;

        &-item {
            position: absolute;

            em {
                position: absolute;
                top: -2px;
                left: 0;
                width: 8px;
                height: 8px;
                margin-left: -4px;
                background-color: #fff;
                border: 2px solid var(--color-primary-3);
                border-radius: 50%;
                cursor: pointer;
            }
        }
    }

    &-rail {
        position: absolute;
        width: 100%;
        height: 4px;
        background-color: #f5f5f5;
        border-radius: 2px;
        transition: background-color .3s;
    }

    &-track {
        position: absolute;
        height: 4px;
        background-color: var(--color-primary-3);
        border-radius: 2px;
        transition: background-color .3s;
    }


    &-handle,
    &-handle-t,
    sp-tooltip[name='slider-handle'],
    sp-tooltip[name='slider-handle-t'] {
        position: absolute;
        width: 14px;
        height: 14px;
        margin-top: -5px;
        background-color: #fff;
        border: solid 2px var(--color-primary-3);
        border-radius: 50%;
        box-shadow: 0;
        cursor: pointer;
        transition: border-color .3s, box-shadow .6s, transform .3s cubic-bezier(.18, .89, .32, 1.28);

        &:hover {
            border: solid 2px var(--color-primary-6);
        }

        &:focus {
            border-color: var(--sp-primary-color-deprecated-t-20);
            outline: none;
            box-shadow: 0 0 0 5px var(--sp-primary-color-deprecated-f-12);
        }
    }

    &.--disabled {
        .@{className}-track {
            background-color: rgba(0, 0, 0, 0.25);
            cursor: default;
        }
        .@{className}-rail {
            cursor: default;

        }
        .@{className}-handle,
        .@{className}-handle-t,
        sp-tooltip[name='slider-handle'],
        sp-tooltip[name='slider-handle-t'] {
            background-color: #fff;
            border-color: rgba(0, 0, 0, 0.25) !important;
            box-shadow: none;
            cursor: not-allowed;
        }
    }
}