@use 'sass:map';
@use 'flexy-sys-color' as *;
@use 'flexy-sys-palette' as *;
@use 'flexy-sys-ref' as *;
@use 'flexy-sys-shape' as *;

$_flexy-comp-slider: (
  focus-ring-color: $flexy-sys-color-primary,
  thumb-outline-width: 0px,
  thumb-outline-color: $flexy-sys-color-primary,
  thumb-color: $flexy-sys-color-primary,
  thumb-height: 16px,
  thumb-shape: map.get($flexy-sys-shape, 'full'),
  thumb-width: 16px,
  thumb-icon-color: $flexy-sys-color-on-primary,
  thumb-shadow: none,
  track-active-color: $flexy-sys-color-primary,
  track-active-gradient: none,
  track-height: 4px,
  track-inactive-color: $flexy-sys-color-primary,
  track-inactive-gradient: none,
  track-inactive-opacity: 0.2,
  track-shape: map.get($flexy-sys-shape, 'full'),
  ticks-active-color: $flexy-sys-color-on-primary,
  ticks-inactive-color: $flexy-sys-palette-grey-80,
  ticks-size: 2px,
  ripple-size: 40px,
  ripple-color: $flexy-sys-color-primary,
  value-indicator-arrow-size: 6px,
  value-indicator-height: 28px,
  value-indicator-width: 36px,
  value-indicator-shape: map.get($flexy-sys-shape, 'small'),
  value-indicator-fill-color: $flexy-sys-color-primary,
  value-indicator-text-color: $flexy-sys-color-on-primary,
  value-indicator-text-size: 13px,
  value-indicator-m3-size: 28px,
  value-indicator-bottom-spacing: 4px,
  animation-jumping-duration: 0ms,
  animation-jumping-easing: ease-out,
  animation-sliding-duration: 0ms,
  animation-sliding-easing: ease,
);

$flexy-comp-slider: ();

@each $name, $value in $_flexy-comp-slider {
  @if not $flexy-sys-ref-hardcode-values {
    $value: var(--flexy-comp-slider-#{$name}, #{$value});
  }
  $flexy-comp-slider: map.set($flexy-comp-slider, $name, $value);
}