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

$theme: 'standard' !default;

@mixin base {
  --sbb-toggle-height-s: var(--sbb-size-element-xxs);
  --sbb-toggle-height-m: var(--sbb-size-element-m);
  --sbb-toggle-height: #{sbb.theme-pattern-select(
      (
        'standard': var(--sbb-toggle-height-m),
        'lean': var(--sbb-toggle-height-s),
      ),
      $theme
    )};
  --sbb-toggle-padding-inline-s: var(--sbb-spacing-responsive-xxxs);
  --sbb-toggle-padding-inline-m: var(--sbb-spacing-responsive-xs);
  --sbb-toggle-padding-inline: #{sbb.theme-pattern-select(
      (
        'standard': var(--sbb-toggle-padding-inline-m),
        'lean': var(--sbb-toggle-padding-inline-s),
      ),
      $theme
    )};
  --sbb-toggle-background-color: var(--sbb-background-color-4);
  --sbb-toggle-background-inset: #{sbb.px-to-rem-build(2)};
  --sbb-toggle-border-radius: var(--sbb-border-radius-infinity);
  --sbb-toggle-font-size: var(--sbb-text-font-size-m);
  --sbb-toggle-grid-template-columns: auto auto;
  --sbb-toggle-selected-option-border-width: var(--sbb-border-width-1x);
  --sbb-toggle-selected-option-border-style: solid;
  --sbb-toggle-selected-option-border-color: var(--sbb-border-color-5);
  --sbb-toggle-selected-option-background-color: var(--sbb-background-color-1);
  --sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
  --sbb-toggle-option-gap: var(--sbb-spacing-fixed-1x);
  --sbb-toggle-option-font-size: var(--sbb-text-font-size-xs);
  --sbb-toggle-option-icon-min-size: var(--sbb-size-icon-ui-small);
}

@mixin forced-colors {
  --sbb-toggle-selected-option-border-width: var(--sbb-border-width-2x);
  --sbb-toggle-selected-option-border-color: Highlight;
}

@mixin rules {
  sbb-toggle:has(:focus-visible) {
    @include sbb.focus-outline;
  }
}