@use "../../../../styles/tools/convert";
@use "../../../../styles/tokens/color";

$base: (
  padding-top: convert.to-rem(8px),
);

$widths: (
  default: (
    max-width: convert.to-rem(350px),
  ),
  fullwidth: (
    max-width: none,
  ),
);

$slider-size: convert.to-rem(6px);

$slider: (
  height: $slider-size,
);

$handle-size: convert.to-rem(20px);

$handle: (
  width: $handle-size,
  height: $handle-size,
  top: calc(-#{$handle-size} / 2 + #{$slider-size} / 2),
  border: 2px solid var(--color-border-contrast),
  background: var(--color-background-primary),
  border-radius: 100%,
);