: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;border-radius:9999px;box-shadow:none}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;border-radius:9999px;box-shadow:none}input[type=range][data-variant=violet]{-webkit-appearance:none;-moz-appearance:none;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%));border:none;border-radius:60px;box-shadow:none}input[type=range][data-variant=violet]::-webkit-slider-thumb{-webkit-appearance:none;border:none;height:var(--thumb-size);width:var(--thumb-size);border-radius:50%;background:rgb(var(--color-violet-900));cursor:pointer;transform:translateY(calc(var(--thumb-size) - 150% + (var(--slider-height) / 2)));box-shadow:none}