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

$theme: 'standard' !default;

@mixin base {
  --sbb-toggle-check-font-size: #{sbb.theme-pattern-select(
      (
        'standard': var(--sbb-text-font-size-s),
        'lean': var(--sbb-text-font-size-xs),
      ),
      $theme
    )};
  --sbb-toggle-check-color: var(--sbb-color-2);
  --sbb-toggle-check-checked-color: var(--sbb-color-primary);
  --sbb-toggle-check-background-color: var(--sbb-background-color-4);
  --sbb-toggle-check-icon-color: var(--sbb-toggle-check-checked-color);
  --sbb-toggle-check-circle-background-color: var(--sbb-background-color-1);
  --sbb-toggle-check-circle-border-color: var(--sbb-border-color-5);
  --sbb-toggle-check-circle-border-style: solid;
  --sbb-toggle-check-circle-diameter: #{sbb.px-to-rem-build(28)};
  --sbb-toggle-check-height: var(--sbb-size-icon-ui-small);
  --sbb-toggle-check-cursor: var(--sbb-cursor-pointer);
  --sbb-toggle-check-gap: var(--sbb-spacing-fixed-3x);
  --sbb-toggle-check-border-width: var(--sbb-border-width-1x);
  --sbb-toggle-check-border-radius: var(--sbb-border-radius-4x);
  --sbb-toggle-check-shadow: var(--sbb-box-shadow-level-5-hard);
}

@mixin forced-colors {
  --sbb-toggle-check-background-color: CanvasText;
  --sbb-toggle-check-circle-background-color: Canvas;
}