/* Button: .ui-button [--primary | --secondary (default) | --ghost | --danger | --danger-quiet]
   [--sm | --lg] [--block]. Parts: __icon, __label, __spinner.
   States: :hover (pointer devices only), :active, :focus-visible, :disabled / [aria-disabled="true"],
   .is-loading (label kept for width, spinner shown, clicks ignored), .is-hovered / .is-pressed /
   .is-focus-visible force a state for the UI kit and screenshots. */

@layer reset, tokens, base, layout, components, apps, utilities;

@layer components {
  .ui-button {
    --_bg: transparent;
    --_bg-hover: var(--color-bg-hover);
    --_bg-active: var(--color-bg-active);
    --_fg: var(--color-text);
    --_border: var(--color-border-strong);
    --_border-hover: var(--color-border-hover);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 0;
    min-height: var(--control-h-md);
    padding: 0 var(--space-4);
    border: var(--border-width) solid var(--_border);
    border-radius: var(--radius-xl);
    background: var(--_bg);
    color: var(--_fg);
    font-family: inherit;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition: background-color var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      color var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .ui-button--primary {
    --_bg: var(--color-accent);
    --_bg-hover: var(--color-accent-hover);
    --_bg-active: var(--color-accent-active);
    --_fg: var(--color-on-accent);
    --_border: transparent;
    --_border-hover: transparent;
  }

  .ui-button--ghost {
    --_border: transparent;
    --_border-hover: transparent;
    --_fg: var(--color-text-secondary);
  }

  .ui-button--danger {
    --_bg: var(--color-danger);
    --_bg-hover: var(--color-danger-hover);
    --_bg-active: var(--color-danger-hover);
    --_fg: var(--color-on-status);
    --_border: transparent;
    --_border-hover: transparent;
  }

  .ui-button--danger-quiet {
    --_bg-hover: var(--color-danger-soft);
    --_bg-active: var(--color-danger-soft);
    --_fg: var(--color-danger-text);
    --_border: var(--color-danger-border);
    --_border-hover: var(--color-danger-text);
  }

  .ui-button--sm {
    min-height: var(--control-h-sm);
    padding-inline: var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
  }

  .ui-button--lg {
    min-height: var(--control-h-lg);
    padding-inline: var(--space-6);
    border-radius: var(--radius-2xl);
    font-size: var(--font-size-base);
  }

  .ui-button--block {
    display: flex;
    width: 100%;
  }

  .ui-button__icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex: none;
  }

  .ui-button--lg .ui-button__icon {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .ui-button__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media (hover: hover) {
    .ui-button:hover:not(:disabled, [aria-disabled="true"], .is-loading) {
      background: var(--_bg-hover);
      border-color: var(--_border-hover);
      color: var(--_fg);
    }
  }

  .ui-button.is-hovered {
    background: var(--_bg-hover);
    border-color: var(--_border-hover);
  }

  .ui-button:active:not(:disabled, [aria-disabled="true"], .is-loading),
  .ui-button.is-pressed {
    background: var(--_bg-active);
    transform: scale(0.98);
  }

  .ui-button.is-focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .ui-button:disabled,
  .ui-button[aria-disabled="true"] {
    --_bg: var(--color-bg-disabled);
    --_border: transparent;
    --_fg: var(--color-text-disabled);
    cursor: not-allowed;
  }

  .ui-button--ghost:disabled,
  .ui-button--ghost[aria-disabled="true"] {
    --_bg: transparent;
  }

  /* Loading keeps the width: the label turns transparent (opacity, not visibility, so the
     accessible name survives) and the spinner sits on top. */
  .ui-button.is-loading {
    cursor: progress;
  }

  .ui-button.is-loading > :not(.ui-button__spinner) {
    opacity: 0;
  }

  .ui-button__spinner {
    display: none;
  }

  .ui-button.is-loading > .ui-button__spinner {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
  }

  .ui-button.is-loading > .ui-button__spinner::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-round);
    animation: ui-spin var(--duration-spin) linear infinite;
  }
}