/**
 * button.css — Button (.ui-button)
 *
 * @layer      variables, components
 * @requires   layers.css, _variables.css, _reset.css, fields.css (--ui-field-* metrics), kbd.css (--ui-kbd-*)
 * @uses       color-mix(), oklch(from …) — variant hover/active tints
 * @uses       text-box — vertical trim (patchy browser support)
 * @tokens     --ui-button-* (@layer variables; metrics default to the --ui-field-* family)
 * @consumedby toggle.css (reads the --ui-button-* token family)
 */

@layer variables {
  :root {
    /* Metrics default to the shared --ui-field-* family (owned in fields.css) so a
       button sitting beside an input, select, or textarea reads as one family:
       retune a --ui-field-* token and buttons follow; remap a --ui-button-* token
       to diverge just the buttons. Colors stay independent — a button surface is
       not a field surface, and button borders don't go primary on hover. */
    --ui-button-ring-color: var(--ui-field-ring-color);

    --ui-button-font-family: var(--font-family-body);
    --ui-button-font-size: var(--ui-field-font-size);
    --ui-button-font-weight: var(--font-weight-strong);
    --ui-button-line-height: var(--ui-field-line-height);

    --ui-button-background: var(--card);
    --ui-button-background--hover: var(--muted);
    --ui-button-background--active: oklch(from var(--muted) l c h / calc(alpha - 0.02));

    --ui-button-foreground: var(--foreground);
    --ui-button-foreground--hover: var(--foreground);
    --ui-button-foreground--active: var(--foreground);

    --ui-button-border-width: var(--ui-field-border-width);
    --ui-button-border-style: var(--ui-field-border-style);
    --ui-button-border-color: var(--border);
    --ui-button-border-color--hover: var(--border);
    --ui-button-border-color--active: var(--border);

    --ui-button-gap: var(--step-1);
    --ui-button-padding: var(--ui-field-padding);
    --ui-button-block-size: var(--ui-field-block-size);
    --ui-button-radius: var(--ui-field-radius);

    --ui-button-icon-size: var(--ui-field-icon-size);

    /* composes into the button's box-shadow list — use a transparent shadow,
       never `none`, so the focus ring layers stay valid */
    --ui-button-shadow: 0 0 transparent;
  }
}

@layer zazz.components {
  /* ===========================================================================
  BUTTON
  =========================================================================== */

  .ui-button {
    font-family: var(--ui-button-font-family);
    font-size: var(--ui-button-font-size);
    font-weight: var(--ui-button-font-weight);
    line-height: var(--ui-button-line-height);

    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: var(--ui-button-gap);
    flex-shrink: 0;

    min-block-size: var(--ui-button-block-size);
    min-inline-size: max-content;
    padding-inline: var(--ui-button-padding);

    border: var(--ui-button-border-width) var(--ui-button-border-style)
      var(--ui-button-border-color);
    border-radius: var(--ui-button-radius);

    color: var(--ui-button-foreground);
    background-color: var(--ui-button-background);
    background-clip: padding-box;

    /* ring renders as box-shadow so it composes with --ui-button-shadow; the
       ring widths animate from 0 so the ring grows in smoothly on focus */
    --_ring-offset-width: 0px;
    --_ring-width: 0px;
    --_ring: color-mix(in oklch, var(--ui-button-ring-color) var(--ring-opacity), transparent);
    box-shadow:
      0 0 0 var(--_ring-offset-width) var(--ring-offset-color),
      0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--_ring, var(--ring)),
      var(--ui-button-shadow);

    cursor: default;
    text-decoration: none;

    /* transparent twin of the ring for forced-colors / high-contrast modes */
    outline: var(--outline-width) var(--outline-style) transparent;
    outline-offset: var(--outline-offset);

    transition: var(--default-transition);

    user-select: none;
    text-box: trim-both ex alphabetic;
  }

  a[href] .ui-button:not(:disabled, [aria-disabled="true"]),
  a[href].ui-button:not(:disabled, [aria-disabled="true"]) {
    cursor: pointer;
  }

  /* ===========================================================================
  BUTTON STATES
  =========================================================================== */

  .ui-button:hover:not(:disabled, [aria-disabled="true"]) {
    color: var(--ui-button-foreground--hover);
    background-color: var(--ui-button-background--hover);
    border-color: var(--ui-button-border-color--hover);
  }

  .ui-button:active:not(:disabled, [aria-disabled="true"]) {
    color: var(--ui-button-foreground--active);
    background-color: var(--ui-button-background--active);
    border-color: var(--ui-button-border-color--active);
  }

  .ui-button:focus-visible:not(:disabled, [aria-disabled="true"]) {
    --_ring-offset-width: var(--ring-offset-width);
    --_ring-width: var(--ring-width);

    outline-color: transparent;
  }

  :is(.ui-button:disabled, .ui-button[aria-disabled="true"]) {
    --ui-button-foreground: var(--muted-foreground);
    --ui-button-background: var(--muted);
    --ui-button-shadow: 0 0 transparent;
    --decoration-line: none;

    cursor: default;
    opacity: 0.5;
    outline: none;
  }

  .ui-button[aria-busy="true"] {
    cursor: progress;
  }

  /* ===========================================================================
  BUTTON ICONS
  =========================================================================== */

  .ui-button > svg {
    inline-size: var(--ui-button-icon-size);
    block-size: var(--ui-button-icon-size);
    pointer-events: none;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 0;
  }

  /* ===========================================================================
  BUTTON VARIANTS
  =========================================================================== */

  .ui-button[data-variant="primary"] {
    --ui-button-background: var(--primary);
    --ui-button-background--hover: oklch(from var(--primary) l c h / 0.9);
    --ui-button-background--active: oklch(from var(--primary) l c h / 0.8);

    --ui-button-foreground: var(--primary-foreground);
    --ui-button-foreground--hover: var(--primary-foreground);
    --ui-button-foreground--active: var(--primary-foreground);

    --ui-button-border-color: var(--ui-button-background);
    --ui-button-border-color--hover: var(--ui-button-background--hover);
    --ui-button-border-color--active: var(--ui-button-background--active);

    --ui-button-shadow: 0 0 transparent;
  }

  .ui-button[data-variant="muted"] {
    --ui-button-background: var(--muted);
    --ui-button-background--hover: oklch(from var(--muted) l c h / calc(alpha - 0.02));
    --ui-button-background--active: var(--muted);

    --ui-button-foreground: var(--foreground);
    --ui-button-foreground--hover: var(--foreground);
    --ui-button-foreground--active: var(--foreground);

    --ui-button-border-color: var(--ui-button-background);
    --ui-button-border-color--hover: var(--ui-button-background--hover);
    --ui-button-border-color--active: var(--ui-button-background--active);

    --ui-button-shadow: 0 0 transparent;
  }

  .ui-button[data-variant="ghost"] {
    --ui-button-background: transparent;
    --ui-button-background--hover: var(--muted);
    --ui-button-background--active: oklch(from var(--muted) l c h / calc(alpha - 0.02));

    --ui-button-foreground: var(--foreground);
    --ui-button-foreground--hover: var(--foreground);
    --ui-button-foreground--active: var(--foreground);

    --ui-button-border-color: var(--ui-button-background);
    --ui-button-border-color--hover: var(--ui-button-background--hover);
    --ui-button-border-color--active: var(--ui-button-background--active);

    --ui-button-shadow: 0 0 transparent;
  }

  .ui-button[data-variant="destructive"] {
    --ui-button-ring-color: var(--destructive);

    --ui-button-background: var(--destructive);
    --ui-button-background--hover: oklch(from var(--destructive) l c h / 0.9);
    --ui-button-background--active: oklch(from var(--destructive) l c h / 0.8);

    --ui-button-foreground: var(--destructive-foreground);
    --ui-button-foreground--hover: var(--destructive-foreground);
    --ui-button-foreground--active: var(--destructive-foreground);

    --ui-button-border-color: var(--ui-button-background);
    --ui-button-border-color--hover: var(--ui-button-background--hover);
    --ui-button-border-color--active: var(--ui-button-background--active);

    --ui-button-shadow: 0 0 transparent;
  }

  .ui-button[data-variant="link"] {
    --ui-button-background: transparent;
    --ui-button-background--hover: transparent;
    --ui-button-background--active: transparent;

    --ui-button-foreground: var(--foreground);
    --ui-button-foreground--hover: var(--primary);
    --ui-button-foreground--active: oklch(from var(--primary) l c h / 0.8);

    --ui-button-border-style: none;

    --ui-button-block-size: fit-content;
    --ui-button-padding: 0;
    --ui-button-radius: 0;

    --ui-button-shadow: 0 0 transparent;

    text-decoration-line: var(--decoration-line);
    text-decoration-style: var(--decoration-style);
    text-decoration-color: var(--decoration-color);
    text-underline-offset: var(--decoration-offset);
    text-decoration-thickness: var(--decoration-thickness);
  }

  .ui-button[data-variant="link"]:hover:not(:disabled, [aria-disabled="true"]) {
    text-decoration-color: var(--decoration-color--hover);
    text-underline-offset: var(--decoration-offset--hover);
  }

  .ui-button[data-variant="link"]:active:not(:disabled, [aria-disabled="true"]) {
    text-decoration-color: var(--decoration-color--active);
    text-underline-offset: var(--decoration-offset--active);
  }

  /* ===========================================================================
  BUTTON SIZES
  =========================================================================== */

  .ui-button[data-size="sm"] {
    --ui-button-block-size: var(--step-6);
    --ui-button-padding: var(--step-2);
    --ui-button-radius: var(--radius-sm);
  }

  .ui-button[data-size="icon"] {
    block-size: var(--ui-button-block-size);
    inline-size: var(--ui-button-block-size);
    padding: 0;
    aspect-ratio: 1 / 1;
  }

  .ui-button[data-size="icon-sm"] {
    --ui-button-block-size: var(--step-6);
    --ui-button-padding: var(--step-2);
    --ui-button-radius: var(--radius-sm);
    --ui-button-icon-size: var(--step-3_5);

    block-size: var(--ui-button-block-size);
    inline-size: var(--ui-button-block-size);
    padding: 0;
    aspect-ratio: 1 / 1;
  }

  /* ===========================================================================
  BUTTON KBD
  =========================================================================== */

  /* Descendant (not child) so keys wrapped in a ui-kbd-group still resize */
  .ui-button :where(kbd) {
    --ui-kbd-min-inline-size: var(--step-4_5);
    --ui-kbd-min-block-size: var(--step-4_5);
    --ui-kbd-icon-size: var(--step-3);
  }

  .ui-button:has(> :where(kbd, ui-kbd-group, .ui-kbd-group):last-child:not(:only-child)) {
    padding-inline-end: var(--step-1_5);
  }

  .ui-button:has(> :where(kbd, ui-kbd-group, .ui-kbd-group):first-child:not(:only-child)) {
    padding-inline-start: var(--step-1_5);
  }

  .ui-button[data-size="sm"]:has(
    > :where(kbd, ui-kbd-group, .ui-kbd-group):last-child:not(:only-child)
  ) {
    padding-inline-end: var(--step-0_5);
  }

  .ui-button[data-size="sm"]:has(
    > :where(kbd, ui-kbd-group, .ui-kbd-group):first-child:not(:only-child)
  ) {
    padding-inline-start: var(--step-0_5);
  }
}