@use '../utils/constants.scss';
@use '../utils/tokens.scss' as tokens;

$buttonBaseClass: '#{constants.$prefix}button';
$buttonLoadingSpinner: '#{$buttonBaseClass}__loading-spinner';

$buttonIconSizeVarName: '--#{constants.$prefix}-comp-btn-size-icon';
$buttonPaddingYVarName: '--#{constants.$prefix}-comp-btn-space-padding-y';
$buttonPaddingXVarName: '--#{constants.$prefix}-comp-btn-space-padding-x';

$btn-appearance-kind-var-prefix: '-#{constants.$prefix}-comp-btn-color-';

$appearancesAndKinds: (
  'accent': (
    'filled': (
      'background': tokens.$bm-comp-btn-color-accent-filled-bg,
      'color': tokens.$bm-comp-btn-color-accent-filled-fg,
      'border-color': tokens.$bm-comp-btn-color-accent-filled-border,
    ),
    'outline': (
      'background': tokens.$bm-comp-btn-color-accent-outline-bg,
      'color': tokens.$bm-comp-btn-color-accent-outline-fg,
      'border-color': tokens.$bm-comp-btn-color-accent-outline-border,
    ),
    'ghost': (
      'background': tokens.$bm-comp-btn-color-accent-ghost-bg,
      'color': tokens.$bm-comp-btn-color-accent-ghost-fg,
      'border-color': tokens.$bm-comp-btn-color-accent-ghost-border,
    ),
    'bare': (
      'background': tokens.$bm-comp-btn-color-accent-bare-bg,
      'color': tokens.$bm-comp-btn-color-accent-bare-fg,
      'border-color': tokens.$bm-comp-btn-color-accent-bare-border,
    ),
  ),
  'neutral': (
    'filled': (
      'background': tokens.$bm-comp-btn-color-neutral-filled-bg,
      'color': tokens.$bm-comp-btn-color-neutral-filled-fg,
      'border-color': tokens.$bm-comp-btn-color-neutral-filled-border,
    ),
    'outline': (
      'background': tokens.$bm-comp-btn-color-neutral-outline-bg,
      'color': tokens.$bm-comp-btn-color-neutral-outline-fg,
      'border-color': tokens.$bm-comp-btn-color-neutral-outline-border,
    ),
    'ghost': (
      'background': tokens.$bm-comp-btn-color-neutral-ghost-bg,
      'color': tokens.$bm-comp-btn-color-neutral-ghost-fg,
      'border-color': tokens.$bm-comp-btn-color-neutral-ghost-border,
    ),
    'bare': (
      'background': tokens.$bm-comp-btn-color-neutral-bare-bg,
      'color': tokens.$bm-comp-btn-color-neutral-bare-fg,
      'border-color': tokens.$bm-comp-btn-color-neutral-bare-border,
    ),
  ),
  'neutral-subtle': (
    'filled': (
      'background': tokens.$bm-comp-btn-color-neutral-subtle-filled-bg,
      'color': tokens.$bm-comp-btn-color-neutral-subtle-filled-fg,
      'border-color': tokens.$bm-comp-btn-color-neutral-subtle-filled-border,
    ),
    'outline': (
      'background': tokens.$bm-comp-btn-color-neutral-subtle-outline-bg,
      'color': tokens.$bm-comp-btn-color-neutral-subtle-outline-fg,
      'border-color': tokens.$bm-comp-btn-color-neutral-subtle-outline-border,
    ),
    'ghost': (
      'background': tokens.$bm-comp-btn-color-neutral-subtle-ghost-bg,
      'color': tokens.$bm-comp-btn-color-neutral-subtle-ghost-fg,
      'border-color': tokens.$bm-comp-btn-color-neutral-subtle-ghost-border,
    ),
    'bare': (
      'background': tokens.$bm-comp-btn-color-neutral-subtle-bare-bg,
      'color': tokens.$bm-comp-btn-color-neutral-subtle-bare-fg,
      'border-color': tokens.$bm-comp-btn-color-neutral-subtle-bare-border,
    ),
  ),
  'destructive': (
    'filled': (
      'background': tokens.$bm-comp-btn-color-destructive-filled-bg,
      'color': tokens.$bm-comp-btn-color-destructive-filled-fg,
      'border-color': tokens.$bm-comp-btn-color-destructive-filled-border,
    ),
    'outline': (
      'background': tokens.$bm-comp-btn-color-destructive-outline-bg,
      'color': tokens.$bm-comp-btn-color-destructive-outline-fg,
      'border-color': tokens.$bm-comp-btn-color-destructive-outline-border,
    ),
    'ghost': (
      'background': tokens.$bm-comp-btn-color-destructive-ghost-bg,
      'color': tokens.$bm-comp-btn-color-destructive-ghost-fg,
      'border-color': tokens.$bm-comp-btn-color-destructive-ghost-border,
    ),
    'bare': (
      'background': tokens.$bm-comp-btn-color-destructive-bare-bg,
      'color': tokens.$bm-comp-btn-color-destructive-bare-fg,
      'border-color': tokens.$bm-comp-btn-color-destructive-bare-border,
    ),
  ),
);

$sizes: (
  'sm': (
    'min-width': tokens.$bm-comp-btn-size-sm-width,
    'min-height': tokens.$bm-comp-btn-size-sm-height,
    'icon': tokens.$bm-comp-btn-size-sm-icon,
    'padding-y': tokens.$bm-comp-btn-space-sm-y,
    'padding-x': tokens.$bm-comp-btn-space-sm-x,
    'font': tokens.$bm-comp-btn-typo-sm,
  ),
  'md': (
    'min-width': tokens.$bm-comp-btn-size-md-width,
    'min-height': tokens.$bm-comp-btn-size-md-height,
    'icon': tokens.$bm-comp-btn-size-md-icon,
    'padding-y': tokens.$bm-comp-btn-space-md-y,
    'padding-x': tokens.$bm-comp-btn-space-md-x,
    'font': tokens.$bm-comp-btn-typo-md,
  ),
  'lg': (
    'min-width': tokens.$bm-comp-btn-size-lg-width,
    'min-height': tokens.$bm-comp-btn-size-lg-height,
    'icon': tokens.$bm-comp-btn-size-lg-icon,
    'padding-y': tokens.$bm-comp-btn-space-lg-y,
    'padding-x': tokens.$bm-comp-btn-space-lg-x,
    'font': tokens.$bm-comp-btn-typo-lg,
  ),
);