/**
 * Fluid Framework - Button Component
 * @layer components
 *
 * Buttons should invite interaction, not demand it.
 * Clear affordance, gentle feedback, natural transitions.
 *
 * Usage:
 *   <button>Default</button>
 *   <button data-variant="secondary">Secondary</button>
 *   <button data-variant="ghost">Ghost</button>
 *   <button data-variant="danger">Danger</button>
 *   <button data-size="sm">Small</button>
 *   <button data-size="lg">Large</button>
 */

@layer components {
  /* Base button: sans 600, square, no shadow, no transform. Colour comes
     through the --_btn-* hooks, so a band (data-bg="inverse|accent-strong",
     a themed hero) re-points <button> and .button alike. */
  button,
  [role="button"],
  .button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding-block: var(--_btn-padding-block, 0.9em);
    padding-inline: var(--_btn-padding-inline, 1.6em);
    min-block-size: var(--_btn-min-height, 3rem);
    font-family: var(--font-body);
    font-size: var(--_btn-font-size, var(--step-0));
    font-weight: calc(var(--weight-semibold) + var(--_dark-weight));
    letter-spacing: 0.01em;
    line-height: var(--leading-none);
    text-decoration: none;
    white-space: nowrap;
    color: var(--_btn-color, var(--on-accent-fill));
    background-color: var(--_btn-bg, var(--accent-fill));
    border: var(--border-width) solid var(--_btn-border, transparent);
    border-radius: var(--radius-control);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-fluid),
      border-color var(--duration-fast) var(--ease-fluid),
      color var(--duration-fast) var(--ease-fluid),
      text-decoration-color var(--duration-fast) var(--ease-fluid);
  }

  :is(button, [role="button"], .button):hover:not(:disabled) {
    color: var(--_btn-color-hover, var(--_btn-color, var(--on-accent-fill)));
    background-color: var(--_btn-bg-hover, var(--accent-fill-hover));
  }

  /* Focus: a real outline, so no shadow a site adds can hide it (#50),
     and it survives forced-colors mode. */
  :is(button, [role="button"], .button):focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: 2px;
  }

  button:disabled,
  [role="button"][aria-disabled="true"],
  .button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }


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

  :is(button, .button)[data-variant="secondary"] {
    --_btn-color: var(--color-text);
    --_btn-bg: var(--color-surface);
    --_btn-bg-hover: var(--color-surface-raised);
    --_btn-border: var(--color-border);
  }

  /* Outline: an ink edge; hover inverts to an ink fill. */
  :is(button, .button)[data-variant="outline"] {
    --_btn-color: var(--color-text);
    --_btn-bg: transparent;
    --_btn-border: var(--color-border-strong);
    --_btn-bg-hover: var(--color-text);
    --_btn-color-hover: var(--color-background);
  }

  /* Ghost: underlined text and an arrow that steps forward on hover.
     data-arrow="none" drops the arrow. */
  :is(button, .button)[data-variant="ghost"] {
    --_btn-color: var(--color-text);
    --_btn-bg: transparent;
    --_btn-bg-hover: transparent;
    --_btn-padding-inline: 0;
    text-decoration-line: underline;
    text-decoration-color: color-mix(in oklch, var(--accent-ink) 55%, transparent);
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.22em;
  }

  :is(button, .button)[data-variant="ghost"]:hover {
    text-decoration-color: var(--accent-ink);
  }

  :is(button, .button)[data-variant="ghost"]:not([data-icon], [data-arrow="none"], [aria-current], [aria-disabled="true"])::after {
    content: "→";
    transition: translate var(--duration-fast) var(--ease-settle);
  }

  :is(button, .button)[data-variant="ghost"]:dir(rtl)::after { content: "←"; }

  @media (prefers-reduced-motion: no-preference) {
    :is(button, .button)[data-variant="ghost"]:hover::after { translate: 0.2em; }
    :is(button, .button)[data-variant="ghost"]:dir(rtl):hover::after { translate: -0.2em; }
  }

  :is(button, .button)[data-variant="danger"] {
    --_btn-color: var(--color-error-on);
    --_btn-bg: var(--color-error-fill);
    --_btn-bg-hover: color-mix(in oklch, var(--color-error-fill) 85%, var(--black));
  }

  :is(button, .button)[data-variant="danger-subtle"] {
    --_btn-color: var(--color-error);
    --_btn-bg: var(--color-error-subtle);
    --_btn-bg-hover: color-mix(in oklch, var(--color-error-subtle) 80%, var(--color-error));
  }


  /* ========================================
     SIZES
     Small for tight spaces, large for emphasis
     ======================================== */

  /* Extra small */
  button[data-size="xs"],
  .button[data-size="xs"] {
    --_btn-padding-block: var(--space-1);
    --_btn-padding-inline: var(--space-2);
    --_btn-font-size: var(--font-size-xs);
    --_btn-min-height: 1.75rem;
  }

  /* Small */
  button[data-size="sm"],
  .button[data-size="sm"] {
    --_btn-padding-block: var(--space-2);
    --_btn-padding-inline: var(--space-4);
    --_btn-font-size: var(--font-size-sm);
    --_btn-min-height: 2.25rem;
  }

  /* Large */
  button[data-size="lg"],
  .button[data-size="lg"] {
    --_btn-padding-block: var(--space-4);
    --_btn-padding-inline: var(--space-6);
    --_btn-font-size: var(--font-size-lg);
    --_btn-min-height: 3.25rem;
  }

  /* Extra large */
  button[data-size="xl"],
  .button[data-size="xl"] {
    --_btn-padding-block: var(--space-5);
    --_btn-padding-inline: var(--space-8);
    --_btn-font-size: var(--font-size-xl);
    --_btn-min-height: 4rem;
  }


  /* ========================================
     MODIFIERS
     Additional behavioral variations
     ======================================== */

  /* Full width */
  button[data-full],
  .button[data-full] {
    inline-size: 100%;
  }

  /* Icon only - square aspect */
  button[data-icon],
  .button[data-icon] {
    --_btn-padding-inline: var(--_btn-padding-block);
    aspect-ratio: 1;
  }

  /* Pill shape */
  button[data-pill],
  .button[data-pill] {
    border-radius: var(--radius-pill);
  }

  /* Loading state */
  button[data-loading],
  .button[data-loading] {
    position: relative;
    color: transparent;
    pointer-events: none;
  }

  button[data-loading]::after,
  .button[data-loading]::after {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    inline-size: 1.25em;
    block-size: 1.25em;
    margin-inline-start: -0.625em;
    margin-block-start: -0.625em;
    border: var(--border-width-thick) solid currentColor;
    border-inline-end-color: transparent;
    border-radius: var(--radius-full);
    animation: button-spin 0.6s linear infinite;
    color: var(--_btn-color, var(--on-accent));
    opacity: 0.8;
  }

  @keyframes button-spin {
    to {
      transform: rotate(360deg);
    }
  }


  /* ========================================
     BUTTON GROUPS
     Multiple buttons together
     ======================================== */

  .button-group {
    display: inline-flex;
    isolation: isolate;
  }

  .button-group > button,
  .button-group > .button {
    border-radius: 0;
    position: relative;
  }

  .button-group > button:first-child,
  .button-group > .button:first-child {
    border-start-start-radius: var(--radius-control);
    border-end-start-radius: var(--radius-control);
  }

  .button-group > button:last-child,
  .button-group > .button:last-child {
    border-start-end-radius: var(--radius-control);
    border-end-end-radius: var(--radius-control);
  }

  .button-group > button:not(:first-child),
  .button-group > .button:not(:first-child) {
    margin-inline-start: -1px;
  }

  .button-group > button:hover,
  .button-group > button:focus-visible,
  .button-group > .button:hover,
  .button-group > .button:focus-visible {
    z-index: 1;
  }


  /* ========================================
     REDUCED MOTION
     ======================================== */

  @media (prefers-reduced-motion: reduce) {
    :is(button, .button)[data-loading]::after { animation: none; opacity: 0.6; }
  }
}