.slider-container {
    display: inline-block;
    position: relative;
    z-index: 0;
    cursor: pointer;

    .track {
        position: absolute;
        z-index: 1;
        background-color: var(--track-color);
    }

    .track-before {
        position: absolute;
        z-index: 2;
        background-color: var(--track-before-color);
    }

    .thumb {
        position: absolute;
        z-index: 3;
        width: var(--thumb-size);
        height: var(--thumb-size);
        border-radius: 50%;
        background-color: var(--thumb-color);
    }

    &.horizontal {
        .track {
            top: calc(50% - var(--track-size) * 0.5);
            right: 0;
            left: 0;
            height: var(--track-size);
        }

        .track-before {
            top: calc(50% - var(--track-size) * 0.5);
            left: 0;
            height: var(--track-size);
        }

        .thumb {
            top: calc(50% - var(--thumb-size) * 0.5);
            transform: translateX(-50%);
        }
    }

    &.vertical {
        .track {
            top: 0;
            bottom: 0;
            left: calc(50% - var(--track-size) * 0.1);
            width: var(--track-size);
        }

        .track-before {
            bottom: 0;
            left: calc(50% - var(--track-size) * 0.1);
            width: var(--track-size);
        }

        .thumb {
            left: calc(50% - var(--thumb-size) * 0.5);
            transform: translateY(50%);
        }
    }
}