/* button — .btn, .icon-btn */
@layer components {
  .btn {
    --btn-primary: var(--accent-fill);
    --btn-primary-hover: oklch(from var(--accent-fill) calc(l - 0.05) c h);
    --btn-bg: var(--surface-2);
    --btn-ink: var(--ink);
    --btn-border: var(--border-strong);
    --btn-h: var(--control-md);
    --btn-px: var(--space-3);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    block-size: var(--btn-h);
    padding-inline: var(--btn-px);
    border: var(--border-width) solid var(--btn-border);
    border-radius: var(--radius-full);
    background: var(--btn-bg);
    color: var(--btn-ink);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    user-select: none;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur) var(--ease-out),
      scale var(--dur-fast) var(--ease-out);

    &:hover { --btn-bg: color-mix(in oklab, var(--surface-2), var(--ink) 6%); }
    &:active { scale: 0.98; }
    &:focus-visible { outline: none; box-shadow: var(--ring); }
    &:disabled, &[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

    &.btn--primary {
      --btn-bg: var(--btn-primary);
      --btn-ink: var(--accent-ink);
      --btn-border: transparent;
      box-shadow: var(--shadow-xs);
      &:hover { --btn-bg: var(--btn-primary-hover); }
    }
    &.btn--soft {
      --btn-bg: var(--accent-soft);
      --btn-ink: var(--accent-text);
      --btn-border: var(--accent-line);
      &:hover { --btn-bg: color-mix(in oklab, var(--accent-soft), var(--accent) 12%); }
    }
    &.btn--dark {
      --btn-bg: var(--inverse);
      --btn-ink: var(--inverse-ink);
      --btn-border: transparent;
      &:hover { --btn-bg: color-mix(in oklab, var(--inverse), var(--accent) 18%); }
    }
    &.btn--ghost {
      --btn-bg: transparent;
      --btn-border: transparent;
      &:hover { --btn-bg: var(--surface-sunken); }
    }
    &.btn--danger {
      --btn-bg: var(--danger-soft);
      --btn-ink: var(--danger-text);
      --btn-border: transparent;
      &:hover { --btn-bg: color-mix(in oklab, var(--danger-soft), var(--danger) 15%); }
    }

    &.btn--sm { --btn-h: var(--control-sm); --btn-px: var(--space-2); font-size: var(--text-xs); }
    &.btn--lg { --btn-h: var(--control-lg); --btn-px: var(--space-4); font-size: var(--text-md); }
    &.btn--block { inline-size: 100%; align-self: stretch; }
    &.btn--icon { padding: 0; aspect-ratio: 1; }

    /* htmx: hx-indicator / in-flight request */
    .btn__spinner {
      display: none;
      inline-size: 1em;
      block-size: 1em;
      border: var(--border-width-strong) solid currentColor;
      border-inline-end-color: transparent;
      border-radius: 50%;
      animation: btn-spin var(--dur-long) linear infinite;
    }
    &.htmx-request {
      pointer-events: none;
      .btn__spinner { display: inline-block; }
      .btn__lead { display: none; }
    }
  }

  /* round corner action, e.g. the ↗ on stat cards */
  .icon-btn {
    display: inline-grid;
    place-items: center;
    inline-size: var(--size, var(--control-md));
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--surface-2);
    border: var(--border-width) solid var(--border);
    color: var(--ink-2);
    transition:
      background-color var(--dur-fast),
      color var(--dur-fast),
      rotate var(--dur-slow) var(--ease-out);

    &:hover { background: var(--surface-sunken); color: var(--ink); }
    &:focus-visible { outline: none; box-shadow: var(--ring); }
    &.icon-btn--sm { --size: var(--control-sm); font-size: var(--text-sm); }
    &.icon-btn--plain { background: transparent; border-color: transparent; }
  }

  .btn__spinner--standalone { display: inline-block; }

  @keyframes btn-spin { to { rotate: 1turn; } }

  /* in a vertical stack (forms) a button keeps its own width */
  .stack > .btn:not(.btn--block) { align-self: flex-start; }
}