@use 'sass:map';
@use 'sass:color';
@use '../index' as *;

$range: (
  bar-color: var(--cm-border-neutral),
  disabled-color: var(--cm-surface-neutral-low),
  hover-color: var(--cm-surface-primary),
  active-color: var(--cm-surface-primary-highest),
  invalid-color: var(--cm-surface-status-error),
  invalid-hover-color: var(--cm-surface-status-error),
  invalid-active-color: color-mix(
      in srgb,
      var(--cm-surface-status-error),
      var(--cm-on-surface-neutral-highest) 30%
    ),
  value-color: var(--cm-on-surface-brand),
  value-font: 'microcopy-s',
  value-font-weight: map.get($font-weight, 'semi-bold'),
  bubble-font: 'microcopy-xs',
  bubble-color: var(--cm-on-surface-inverted),
  range-margin-top: var(--s-xs),
  range-size: 0.25rem,
  slider-size: 1rem,
  slider-color: var(--cm-surface-primary),
  touch-area: 1.25rem,
  outline: 2px,
  outline-color: var(--cm-border-primary),
  outline-offset: 2px,
);