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

$theme: 'standard' !default;

@mixin base {
  --sbb-tag-animation-easing: var(--sbb-animation-easing);
  --sbb-tag-background-color: var(--sbb-background-color-1);
  --sbb-tag-border-color: var(--sbb-border-color-4-inverted);
  --sbb-tag-border-style: solid;
  --sbb-tag-border-width: var(--sbb-border-width-1x);
  --sbb-tag-border-radius: var(--sbb-border-radius-infinity);
  --sbb-tag-gap: var(--sbb-spacing-fixed-2x);
  --sbb-tag-text-color: var(--sbb-color-2);
  --sbb-tag-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
  --sbb-tag-height-s: var(--sbb-size-element-xxxs);
  --sbb-tag-height-m: var(--sbb-size-element-xs);
  --sbb-tag-height: #{sbb.theme-pattern-select(
      (
        'standard': var(--sbb-tag-height-m),
        'lean': var(--sbb-tag-height-s),
      ),
      $theme
    )};
  --sbb-tag-padding-inline-s: var(--sbb-spacing-fixed-3x);
  --sbb-tag-padding-inline-m: var(--sbb-spacing-fixed-5x);
  --sbb-tag-padding-inline: #{sbb.theme-pattern-select(
      (
        'standard': var(--sbb-tag-padding-inline-m),
        'lean': var(--sbb-tag-padding-inline-s),
      ),
      $theme
    )};
}

@mixin forced-colors {
  --sbb-tag-amount-color: ButtonText;
  --sbb-tag-background-color: Canvas !important;
  --sbb-tag-text-color: ButtonText;
  --sbb-tag-border-color: CanvasText;
  --sbb-tag-border-width: var(--sbb-border-width-2x);
}