@use '../core/styles' as sbb;

$theme: 'standard' !default;

@mixin base {
  --sbb-slider-line-height: #{sbb.px-to-rem-build(4)};
  --sbb-slider-knob-size: #{sbb.px-to-rem-build(28)};
  --sbb-slider-knob-size-active: #{sbb.px-to-rem-build(31)};
  --sbb-slider-knob-border-size: #{sbb.px-to-rem-build(3)};
  --sbb-slider-knob-border-style: solid;
  --sbb-slider-knob-color: var(--sbb-background-color-1);
  --sbb-slider-knob-border-color: var(--sbb-color-primary);
  --sbb-slider-icon-color: var(--sbb-color-1);
  --sbb-slider-selected-line-disabled-color: light-dark(
    var(--sbb-color-smoke),
    var(--sbb-color-cement)
  );
  --sbb-slider-line-color: var(--sbb-border-color-5);
  --sbb-slider-selected-line-color: var(--sbb-color-primary);
  --sbb-slider-line-disabled-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite));
  --sbb-slider-width: #{sbb.px-to-rem-build(400)};
  --sbb-slider-min-width: #{sbb.px-to-rem-build(150)};
  --sbb-slider-gap: var(--sbb-spacing-fixed-2x);
  --sbb-slider-padding-block: #{sbb.px-to-rem-build(2)};
}

@mixin forced-colors {
  --sbb-slider-selected-line-color: Highlight;
  --sbb-slider-line-color: CanvasText;
}