.slider{position:relative;display:flex;align-items:center;width:100%;height:20px;touch-action:none;-webkit-user-select:none;user-select:none}.slider-track{position:relative;flex-grow:1;height:4px;background:var(--slider-track-bg, var(--button-bg));border-radius:500px;overflow:hidden}.slider-range{position:absolute;height:100%;background:var(--slider-range-bg, var(--accent-blue));border-radius:500px}.slider-thumb{display:block;width:22px;height:22px;background:var(--slider-thumb-bg, white);border:none;border-radius:500px;box-shadow:0 0 4px #00000040;cursor:grab;transition:.15s transform ease-out,.15s box-shadow ease-out}.slider-thumb:hover{transform:scale(1.1)}.slider-thumb:active{cursor:grabbing}.slider-thumb:focus-visible{outline:none;box-shadow:0 0 0 3px var(--slider-focus-ring, rgba(59, 130, 246, .3))}.slider.wind{--slider-range-bg: var(--wind-button-bg);--slider-focus-ring: var(--wind-nav-selected-bg)}.slider.fire{--slider-range-bg: var(--fire-button-bg);--slider-focus-ring: var(--fire-nav-selected-bg)}.slider.water{--slider-range-bg: var(--water-button-bg);--slider-focus-ring: var(--water-nav-selected-bg)}.slider.earth{--slider-range-bg: var(--earth-button-bg);--slider-focus-ring: var(--earth-nav-selected-bg)}.slider.dark{--slider-range-bg: var(--dark-button-bg);--slider-focus-ring: var(--dark-nav-selected-bg)}.slider.light{--slider-range-bg: var(--light-button-bg);--slider-focus-ring: var(--light-nav-selected-bg)}