:root{--thumb-size:24px;--slider-height:4px;--slider-active-color:var(--color-violet-900);--slider-inactive-color:var(--color-warm-200)}input[type=range][data-variant=violet][data-variant=violet]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--thumb-size);height:var(--thumb-size);background:var(--color-violet-900);border:1px solid var(--color-violet-900);cursor:pointer;box-shadow:none;border-radius:9999px}input[type=range][data-variant=violet]::-moz-range-thumb{width:var(--thumb-size);height:var(--thumb-size);background:var(--color-violet-900);border:1px solid var(--color-violet-900);cursor:pointer;box-shadow:none;border-radius:9999px}input[type=range][data-variant=violet]{appearance:none;background:linear-gradient(to right,var(--color-violet-900)var(--slider-progress,10%),var(--color-warm-200)var(--slider-progress,10%));box-shadow:none}input[type=range][data-variant=violet]::-webkit-slider-runnable-track{height:var(--slider-height);background:linear-gradient(to right,var(--color-violet-900)var(--slider-progress,10%),var(--color-warm-200)var(--slider-progress,10%));box-shadow:none;border:none;border-radius:60px}input[type=range][data-variant=violet]::-webkit-slider-thumb{-webkit-appearance:none;height:var(--thumb-size);width:var(--thumb-size);background:var(--color-violet-900);cursor:pointer;transform:translateY(calc(var(--thumb-size) - 150% + (var(--slider-height)/2)));box-shadow:none;border:none;border-radius:50%}