@supports (--css: variables) {
    .input-range-container {
        position: relative;
    }

    input[type="range"].multirange {
        padding: 0;
        margin: 0;
        display: inline-block;
        vertical-align: top;
        opacity: 1 !important;

        &.original {
            position: absolute;

            &::-webkit-slider-thumb {
                position: relative;
                z-index: 2;
            }

            &::-moz-range-thumb {
                transform: scale(1); /* FF doesn't apply position it seems */
                z-index: 1;
            }
        }

        &::-moz-range-track {
            border-color: transparent; /* needed to switch FF to "styleable" control */
        }

        &.ghost {
            position: relative;
            background: var(--track-background);
            --track-background: linear-gradient(to right,
                    transparent var(--low), var(--range-color) 0,
                    var(--range-color) var(--high), transparent 0
                ) no-repeat 0 45% / 100% 40%;
            --range-color: $slider-thumb-bg;

            &::-webkit-slider-runnable-track {
                background: var(--track-background);
            }

            &::-moz-range-track {
                background: var(--track-background);
            }
        }

        &[disabled]::-webkit-slider-thumb {
            display: none;
        }
    }
}