.slider {
    position: relative;
    height: @slider-height-ie;
    height: @slider-height;

    &.single-slider {
        padding-top: 7px;
        margin: 0 (@slider-thumb-size-ie / 2);
        margin-inline: calc(@slider-thumb-size / 2);

        .track {
            position: relative;
            height: @slider-track-height-ie;
            height: @slider-track-height;
            background-color: @slider-track-background-normal-ie;
            background-color: @slider-track-background-normal;
            border-radius: @slider-border-radius-ie;
            border-radius: @slider-border-radius;
            width: 100%;
            width: calc(100% + @slider-thumb-size);
            margin: 0 (@slider-thumb-size-ie / -2);
            margin-inline: calc(@slider-thumb-size / -2);

            //&:before {
            //    content: '';
            //    position: absolute;
            //    inset: 0;
            //    transform: translateY(-50%);
            //    width: 100%;
            //    height: @slider-height;
            //}

            &:after {
                content: '';
                position: absolute;
                inset: 0;
                height: 100%;
                width: 100%;
                background-color: @slider-track-background-filled-ie;
                background-color: @slider-track-background-filled;
                border-radius: inherit;
                clip-path: inset(0px var(--slider-unfill-percent, 0%) 0px 0px);
            }
        }

        .thumb {
            top: calc((@slider-height-ie - @slider-thumb-size-ie) / 2);
            top: calc((@slider-height - @slider-thumb-size) / 2);
            bottom: 0;
            transform: translateX(-50%);
            margin-left: 0;
            height: @slider-thumb-size-ie;
            height: @slider-thumb-size;
            width: @slider-thumb-size-ie;
            width: @slider-thumb-size;
            border: @slider-thumb-border-size-ie solid @slider-thumb-border-normal-ie;
            border: @slider-thumb-border-size solid @slider-thumb-border-normal;
            background-color: @slider-thumb-background-normal-ie;
            background-color: @slider-thumb-background-normal;
            border-radius: @slider-thumb-border-radius-ie;
            border-radius: @slider-thumb-border-radius;
            box-shadow: @slider-thumb-shadow-ie;
            box-shadow: @slider-thumb-shadow;
            will-change: left;

            &:hover {
                background-color: @slider-thumb-background-hover-ie;
                background-color: @slider-thumb-background-hover;
            }

            &.active {
                background-color: @slider-thumb-background-active-ie;
                background-color: @slider-thumb-background-active;
            }
        }

        &.vertical {
            margin: (@slider-thumb-size-ie / 2) 0;
            margin-block: calc(@slider-thumb-size / 2);
            width: @slider-height-ie;
            width: @slider-height;
            padding-top: 0;
            .padding-left(7px);

            .track {
                position: absolute;
                height: 100%;
                height: calc(100% + @slider-thumb-size);
                width: @slider-track-height-ie;
                width: @slider-track-height;
                margin-inline: 0;
                margin: (@slider-thumb-size-ie / -2) 0;
                margin-block: calc(@slider-thumb-size / -2);

                //&:before {
                //    transform: translateX(-50%);
                //    width: @slider-height;
                //    height: 100%;
                //}

                &:after {
                    clip-path: inset(0px 0px var(--slider-unfill-percent, 0%) 0px);
                }
            }

            .thumb {
                top: auto;
                left: calc((@slider-height-ie - @slider-thumb-size-ie) / 2);
                left: calc((@slider-height - @slider-thumb-size) / 2);
                transform: translateY(-50%);
                will-change: top;
            }
        }
    }

    .thumb {
        position: absolute;
        left: 0;
        margin-left: -7px;
        cursor: default;

        &.active {
        }
    }

    .track {
        height: 18px;
        background-color: transparent;

        div {
            width: 7px;
            height: 18px;
            display: inline-block;
        }

    }

    &.disabled {
        opacity: @component-disabled-opacity-ie;
        opacity: @component-disabled-opacity;
    }
}