:root{--thumb-size:24px;--slider-height:4px;--slider-active-color:rgb(var(--color-violet-900));--slider-inactive-color:rgb(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:rgb(var(--color-violet-900));border:1px solid rgb(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:rgb(var(--color-violet-900));border:1px solid rgb(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,rgb(var(--color-violet-900))var(--slider-progress,10%),rgb(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,rgb(var(--color-violet-900))var(--slider-progress,10%),rgb(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:rgb(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%}