/* Button: filled, soft, outline, text and link variants in primary, neutral and status colours,
   three sizes, icon-only, loading, toggle, attached groups and the segmented control.
   Contract: docs/ui/CONVENTIONS.md. */
@layer components {
  .btn {
    /* Colour set: each data-color fills these; the variants below pick from them. */
    --c-fill: var(--color-primary);
    --c-fill-hover: var(--color-primary-hover);
    --c-on: var(--color-on-primary);
    --c-soft: var(--color-accent-soft);
    --c-soft-hover: var(--color-accent-soft-hover);
    --c-text: var(--color-accent-text);
    --c-line: color-mix(in srgb, var(--color-accent) 48%, transparent);
    --c-tint: var(--color-accent-soft);

    --btn-h: var(--control-md);
    --btn-px: var(--control-px-md);
    --btn-font: var(--text-md);
    --btn-bg: var(--c-fill);
    --btn-bg-hover: var(--c-fill-hover);
    --btn-fg: var(--c-on);
    --btn-border: transparent;
    --btn-border-hover: var(--btn-border);
    --icon-size: var(--icon-sm);

    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--btn-h);
    min-width: var(--btn-h);
    padding-inline: var(--btn-px);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-control);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-sans);
    font-size: var(--btn-font);
    font-weight: var(--weight-semibold);
    line-height: var(--line-md);
    white-space: nowrap;
    text-decoration: none;
    vertical-align: middle;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--t-fast) var(--ease-std),
      color var(--t-fast) var(--ease-std),
      border-color var(--t-fast) var(--ease-std),
      transform var(--t-fast) var(--ease-std);

    &:hover:not(:disabled, [aria-disabled="true"]) {
      background: var(--btn-bg-hover);
      border-color: var(--btn-border-hover);
      text-decoration: none;
    }
    &:active:not(:disabled, [aria-disabled="true"]) { transform: scale(0.97); }
    &:focus-visible { z-index: 1; }

    /* Sizes */
    &[data-size="sm"] { --btn-h: var(--control-sm); --btn-px: var(--control-px-sm); --btn-font: var(--text-sm); gap: var(--space-1); }
    &[data-size="lg"] { --btn-h: var(--control-lg); --btn-px: var(--control-px-lg); --icon-size: var(--icon-md); }

    /* Colours */
    &[data-color="neutral"] {
      --c-fill: var(--color-neutral-filled); --c-fill-hover: var(--color-neutral-filled-hover); --c-on: var(--color-on-neutral-filled);
      --c-soft: var(--color-neutral-soft); --c-soft-hover: var(--color-neutral-soft-hover); --c-text: var(--color-text);
      --c-line: var(--color-border-strong); --c-tint: var(--color-overlay-hover);
    }
    &[data-color="success"] {
      --c-fill: var(--color-success-filled); --c-fill-hover: var(--color-success-filled-hover); --c-on: var(--color-on-success);
      --c-soft: var(--color-success-soft); --c-soft-hover: var(--color-success-soft-hover); --c-text: var(--color-success-text);
      --c-line: var(--color-success-border); --c-tint: var(--color-success-soft);
    }
    &[data-color="warning"] {
      --c-fill: var(--color-warning-filled); --c-fill-hover: var(--color-warning-filled-hover); --c-on: var(--color-on-warning);
      --c-soft: var(--color-warning-soft); --c-soft-hover: var(--color-warning-soft-hover); --c-text: var(--color-warning-text);
      --c-line: var(--color-warning-border); --c-tint: var(--color-warning-soft);
    }
    &[data-color="danger"] {
      --c-fill: var(--color-danger-filled); --c-fill-hover: var(--color-danger-filled-hover); --c-on: var(--color-on-danger);
      --c-soft: var(--color-danger-soft); --c-soft-hover: var(--color-danger-soft-hover); --c-text: var(--color-danger-text);
      --c-line: var(--color-danger-border); --c-tint: var(--color-danger-soft);
    }
    &[data-color="info"] {
      --c-fill: var(--color-info-filled); --c-fill-hover: var(--color-info-filled-hover); --c-on: var(--color-on-info);
      --c-soft: var(--color-info-soft); --c-soft-hover: var(--color-info-soft-hover); --c-text: var(--color-info-text);
      --c-line: var(--color-info-border); --c-tint: var(--color-info-soft);
    }

    /* Variants */
    &[data-variant="soft"] { --btn-bg: var(--c-soft); --btn-bg-hover: var(--c-soft-hover); --btn-fg: var(--c-text); }
    &[data-variant="outline"] {
      --btn-bg: transparent; --btn-bg-hover: var(--c-tint); --btn-fg: var(--c-text);
      --btn-border: var(--c-line); --btn-border-hover: currentColor;
    }
    &[data-variant="text"] {
      --btn-bg: transparent; --btn-bg-hover: var(--c-tint); --btn-fg: var(--c-text);
      --btn-px: var(--space-2);
    }
    &[data-variant="link"] {
      --btn-bg: transparent; --btn-bg-hover: transparent; --btn-fg: var(--color-accent);
      height: auto; min-width: 0; padding: 0; border: 0; overflow: visible;
      font-weight: var(--weight-medium); text-underline-offset: 0.18em;
      &:hover:not(:disabled, [aria-disabled="true"]) { text-decoration: underline; color: var(--color-accent-hover); }
      &:active:not(:disabled, [aria-disabled="true"]) { transform: none; }
    }

    /* Icon-only: a square. The partial puts the label in aria-label. */
    &[data-icon-only] { width: var(--btn-h); padding-inline: 0; --icon-size: var(--icon-md); }
    &[data-icon-only][data-size="sm"] { --icon-size: var(--icon-sm); }
    &[data-icon-only][data-variant="text"] { --btn-fg: var(--color-text-muted); --btn-bg-hover: var(--color-overlay-hover); }
    &[data-icon-only][data-variant="text"]:hover:not(:disabled, [aria-disabled="true"]) { color: var(--color-text); }

    &[data-full-width] { display: flex; width: 100%; }

    /* Toggle buttons (aria-pressed): the pressed state uses the accent. */
    &[aria-pressed="true"] {
      --btn-bg: var(--color-accent-soft); --btn-bg-hover: var(--color-accent-soft-hover);
      --btn-fg: var(--color-accent-text); --btn-border: var(--color-accent); --btn-border-hover: var(--color-accent);
    }

    /* Disabled. aria-disabled keeps the button focusable (button.js blocks its activation). */
    &:disabled, &[aria-disabled="true"]:not([aria-busy="true"]) {
      --btn-bg: var(--color-overlay-border); --btn-fg: var(--color-text-disabled); --btn-border: transparent;
      &:is([data-variant="outline"]) { --btn-bg: transparent; --btn-border: var(--color-border); }
      &:is([data-variant="text"], [data-variant="link"]) { --btn-bg: transparent; }
    }

    /* Loading: the label stays in the accessibility tree and keeps the width; a spinner covers it. */
    &[aria-busy="true"] {
      color: transparent;
      cursor: progress;
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: var(--icon-sm);
        height: var(--icon-sm);
        border: 2px solid var(--btn-fg);
        border-inline-end-color: transparent;
        border-radius: var(--radius-full);
        animation: btn-spin calc(var(--t) * 2) linear infinite;
      }
    }
  }

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

  /* Attached group: buttons share edges. role="group" and an aria-label come from the partial. */
  .btn-group {
    display: inline-flex;
    vertical-align: middle;
    isolation: isolate;
    > .btn { border-radius: 0; }
    > .btn:first-child { border-start-start-radius: var(--radius-control); border-end-start-radius: var(--radius-control); }
    > .btn:last-child { border-start-end-radius: var(--radius-control); border-end-end-radius: var(--radius-control); }
    > .btn + .btn { margin-inline-start: -1px; }
    > .btn:hover { z-index: 1; }
    /* Filled and soft buttons have no border, so separate them with a hairline in their own colour. */
    > .btn:is(:not([data-variant]), [data-variant="soft"]) + .btn { margin-inline-start: 0; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--btn-fg) 24%, transparent); }

    &[data-orientation="vertical"] {
      flex-direction: column;
      > .btn { border-radius: 0; }
      > .btn:first-child { border-start-start-radius: var(--radius-control); border-start-end-radius: var(--radius-control); }
      > .btn:last-child { border-end-start-radius: var(--radius-control); border-end-end-radius: var(--radius-control); }
      > .btn + .btn { margin-inline-start: 0; margin-block-start: -1px; }
      > .btn:is(:not([data-variant]), [data-variant="soft"]) + .btn { margin-block-start: 0; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--btn-fg) 24%, transparent); }
    }
    &[data-full-width] { display: flex; width: 100%; > .btn { flex: 1; } }
  }

  /* Segmented control: one choice from a few, built on native radios (arrow keys move and select). */
  .btn-segmented {
    --seg-h: var(--control-md);
    --seg-font: var(--text-md);
    --icon-size: var(--icon-sm);
    /* Items inside the track: one inset, as for actions inside a field (CONVENTIONS spacing rule 2). */
    --seg-gap: var(--space-1);
    display: inline-flex;
    gap: var(--seg-gap);
    padding: var(--seg-gap);
    border-radius: var(--radius-control);
    background: var(--color-surface-muted);
    vertical-align: middle;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;

    &[data-size="sm"] { --seg-h: var(--control-sm); --seg-font: var(--text-sm); }
    &[data-size="lg"] { --seg-h: var(--control-lg); }
    &[data-full-width] { display: flex; width: 100%; > .btn-segmented-item { flex: 1; } }
  }
  .btn-segmented-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: calc(var(--seg-h) - 2 * var(--seg-gap));
    padding-inline: var(--space-3);
    border-radius: calc(var(--radius-control) - var(--space-05));
    color: var(--color-text-muted);
    font-size: var(--seg-font);
    font-weight: var(--weight-semibold);
    line-height: var(--line-md);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--t-fast) var(--ease-std), color var(--t-fast) var(--ease-std), box-shadow var(--t-fast) var(--ease-std);

    &:hover { color: var(--color-text); }
    /* A hairline ring keeps the raised item visible in dark mode, where surface-raised equals surface-muted. */
    &:has(:checked) { background: var(--color-surface-raised); color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-border), var(--shadow-1); }
    &:has(:focus-visible) { outline: var(--focus-ring); outline-offset: 0; z-index: 1; }
    &:has(:disabled) { color: var(--color-text-disabled); cursor: not-allowed; }
  }
  .btn-segmented-input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }
}