.atm-range-slider {
    @apply relative mb-8 text-white font-display;

    .slider-wrapper {
        @apply flex items-center gap-8;
    }

    label {
        @apply text-lg whitespace-nowrap min-w-[100px];
    }

    .slider-value {
        @apply absolute bg-links text-black rounded-md flex items-center justify-center h-7 w-8 cursor-pointer text-md;
        transform: translate(-50%, -50%);
        top: 50%;
        z-index: 3;
        user-select: none;
    }

    .slider-track {
        @apply relative h-2 flex-1;
    }

    input[type='range'] {
        @apply absolute w-full h-4 appearance-none cursor-pointer;
        background: transparent;
        z-index: 2;
    }

    /* White background track */
    .slider-track::before {
        content: '';
        @apply absolute top-1/2 -translate-y-1/2 w-full h-1 bg-white rounded-full;
        z-index: 1;
    }

    /* Orange filled track */
    .slider-track::after {
        content: '';
        @apply absolute top-1/2 -translate-y-1/2 h-1 bg-links rounded-full;
        left: 0;
        width: var(--fill-width, 0%);
        z-index: 2;
    }

    /* Hide default thumb */
    input[type='range']::-webkit-slider-thumb {
        @apply appearance-none;
        width: 0;
        height: 0;
        background: transparent;
    }

    input[type='range']::-moz-range-thumb {
        width: 0;
        height: 0;
        border: 0;
        background: transparent;
    }

    input[type='range']::-ms-thumb {
        width: 0;
        height: 0;
        background: transparent;
    }
}