/* button.css: Button (component 1). Owner: group A (P2.T4). Tokens only (L-01), logical properties only (L-04), no shadow (L-03). */

[data-component="button"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  box-sizing: border-box;
  min-block-size: var(--size-control);
  min-inline-size: calc(var(--size-control) * 2); /* 72 at 36 (02: no token, derived from the control height) */
  padding-block: 0;
  padding-inline: var(--space-5);
  border: 0;
  border-radius: var(--radius-control);
  font: var(--type-button);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
[data-component="button"][data-size="sm"] {
  min-block-size: var(--size-control-sm);
  min-inline-size: calc(var(--size-control-sm) * 2); /* 64 at 32 */
  padding-inline: var(--space-4);
}
[data-component="button"]:hover { text-decoration: none; }
[data-component="button"] .button__label { white-space: nowrap; }

/* Variants. */
[data-component="button"][data-variant="primary"] { background: var(--brand); color: var(--brand-contrast); }
[data-component="button"][data-variant="secondary"] { background: var(--surface); color: var(--text); border: var(--border-width) solid var(--border-control); }
[data-component="button"][data-variant="ghost"] { background: transparent; color: var(--text); }
[data-component="button"][data-variant="danger"] { background: var(--critical); color: var(--critical-contrast); }

/* Hover (and the forced state for the kitchen sink grid). */
[data-component="button"][data-variant="primary"]:hover:not(:disabled, [aria-disabled="true"]),
[data-component="button"][data-variant="primary"][data-force="hover"]:not(:disabled, [aria-disabled="true"]) { background: var(--brand-hover); }
[data-component="button"][data-variant="secondary"]:hover:not(:disabled, [aria-disabled="true"]),
[data-component="button"][data-variant="secondary"][data-force="hover"]:not(:disabled, [aria-disabled="true"]),
[data-component="button"][data-variant="ghost"]:hover:not(:disabled, [aria-disabled="true"]),
[data-component="button"][data-variant="ghost"][data-force="hover"]:not(:disabled, [aria-disabled="true"]) { background: var(--surface-hover); }
[data-component="button"][data-variant="danger"]:hover:not(:disabled, [aria-disabled="true"]),
[data-component="button"][data-variant="danger"][data-force="hover"]:not(:disabled, [aria-disabled="true"]) { background: var(--critical-hover); }

/* Active (pressed): no transform, no shadow. */
[data-component="button"][data-variant="primary"]:active:not(:disabled, [aria-disabled="true"]),
[data-component="button"][data-variant="primary"][data-force="active"]:not(:disabled, [aria-disabled="true"]) { background: var(--brand-hover); }
[data-component="button"][data-variant="secondary"]:active:not(:disabled, [aria-disabled="true"]),
[data-component="button"][data-variant="secondary"][data-force="active"]:not(:disabled, [aria-disabled="true"]),
[data-component="button"][data-variant="ghost"]:active:not(:disabled, [aria-disabled="true"]),
[data-component="button"][data-variant="ghost"][data-force="active"]:not(:disabled, [aria-disabled="true"]) { background: var(--border); }
[data-component="button"][data-variant="danger"]:active:not(:disabled, [aria-disabled="true"]),
[data-component="button"][data-variant="danger"][data-force="active"]:not(:disabled, [aria-disabled="true"]) { background: var(--critical-hover); }

/* Focus-visible: the global ring (base.css), drawn without a keyboard for the states grid. */
[data-component="button"][data-force="focus-visible"] {
  outline: var(--border-width-thick) solid var(--focus-ring);
  outline-offset: var(--space-2);
}

/* Disabled, and disabled by permission (aria-disabled, still focusable). */
[data-component="button"]:disabled,
[data-component="button"][aria-disabled="true"] {
  background: var(--surface-sunken);
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* Loading: a 16 px spinner, a static partial ring under reduced motion (base.css stops the animation, the ring stays partial). */
[data-component="button"][aria-busy="true"] { cursor: progress; }
/* The ring is the Spinner primitive (spinner.css); this class only positions it. */
/* No icon: the spinner replaces the label visually (the label stays in the markup, keeping the width and the accessible name). */
[data-component="button"][aria-busy="true"]:not([data-had-icon]) .button__label { opacity: 0; }
[data-component="button"][aria-busy="true"]:not([data-had-icon]) .button__spinner {
  position: absolute;
  inset: 0;
  margin: auto;
}

/* Groups: secondary then primary, the primary at the inline-end, --space-3 between. */
[data-component="button-group"] {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Small width on a coarse pointer: 44 tall, full width inside dialogs and drawers. */
@media (width < 768px) and (pointer: coarse) {
  [data-component="button"],
  [data-component="button"][data-size="sm"] { min-block-size: var(--size-control-touch); }
  [data-overlay="dialog"] [data-component="button"],
  [data-overlay="drawer"] [data-component="button"] { inline-size: 100%; }
}