/* Button (shadcn/ui button): ui-button, with a variant and a size.
/*
/*   <button class="ui-button">Save</button>                         default (primary)
/*   ui-button--secondary | --outline | --ghost | --link | --destructive
/*   ui-button--sm | --lg | --icon | --icon-sm | --icon-lg
/*
/* Works on <button>, <a>, <summary> and <label>; an .icon or <svg> inside sits at 1rem. Use
/* ui_button / ui_button_classes (UiHelper) to build one. */
@layer ui {
  .ui-button {
    --ui-button-bg: var(--primary);
    --ui-button-fg: var(--primary-foreground);
    --ui-button-border: transparent;
    --ui-button-hover-bg: color-mix(in oklch, var(--primary) 90%, transparent);
    --ui-button-shadow: var(--shadow-xs);
    --icon-size: 1rem;

    align-items: center;
    background-color: var(--ui-button-bg);
    block-size: 2.25rem;
    border: 1px solid var(--ui-button-border);
    border-radius: var(--radius-md);
    box-shadow: var(--ui-button-shadow);
    color: var(--ui-button-fg);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font: inherit;
    font-size: var(--text-normal);
    font-weight: 500;
    gap: 0.5rem;
    justify-content: center;
    line-height: 1.25rem;
    list-style: none;
    outline: none;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: background-color 150ms, border-color 150ms, box-shadow 150ms, color 150ms, opacity 150ms;
    user-select: none;
    white-space: nowrap;

    &:has(:is(svg, .icon)) {
      padding-inline: 0.75rem;
    }

    :is(svg, .icon) {
      block-size: 1rem;
      flex-shrink: 0;
      inline-size: 1rem;
      pointer-events: none;
    }

    &::-webkit-details-marker {
      display: none;
    }

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--ui-button-hover-bg);
        color: var(--ui-button-hover-fg, var(--ui-button-fg));
      }
    }

    &:focus-visible {
      border-color: var(--ring);
      box-shadow: var(--ring-focus);
    }

    &[aria-invalid="true"] {
      border-color: var(--destructive);
      box-shadow: var(--ring-invalid);
    }

    &:disabled,
    &[aria-disabled="true"] {
      opacity: 0.5;
      pointer-events: none;
    }

    /* A form mid-submit (Turbo sets aria-busy) dims its submit button. */
    form[aria-busy] &[type="submit"] {
      cursor: progress;
      opacity: 0.5;
    }

    /* A key hint inside a button (ui-kbd) takes the button's colour. */
    .ui-kbd {
      background-color: color-mix(in oklch, currentColor 12%, transparent);
      color: inherit;
    }
  }

  /* Variants */

  .ui-button--destructive {
    --ui-button-bg: var(--destructive);
    --ui-button-fg: var(--destructive-foreground);
    --ui-button-hover-bg: color-mix(in oklch, var(--destructive) 90%, transparent);

    &:focus-visible {
      box-shadow: var(--ring-invalid);
    }
  }

  .ui-button--outline {
    --ui-button-bg: var(--background);
    --ui-button-fg: var(--foreground);
    --ui-button-border: var(--border);
    --ui-button-hover-bg: var(--accent);
    --ui-button-hover-fg: var(--accent-foreground);
  }

  .ui-button--secondary {
    --ui-button-bg: var(--secondary);
    --ui-button-fg: var(--secondary-foreground);
    --ui-button-hover-bg: color-mix(in oklch, var(--secondary) 80%, var(--foreground) 6%);
  }

  .ui-button--ghost {
    --ui-button-bg: transparent;
    --ui-button-fg: var(--foreground);
    --ui-button-hover-bg: var(--accent);
    --ui-button-hover-fg: var(--accent-foreground);
    --ui-button-shadow: none;
  }

  .ui-button--link {
    --ui-button-bg: transparent;
    --ui-button-fg: var(--primary);
    --ui-button-hover-bg: transparent;
    --ui-button-shadow: none;

    text-underline-offset: 4px;

    &:hover {
      text-decoration: underline;
    }
  }

  /* Dark: outline buttons sit on the input tint, as shadcn's do. */
  html[data-theme="dark"] .ui-button--outline {
    --ui-button-bg: color-mix(in oklch, var(--input) 30%, transparent);
    --ui-button-border: var(--input);
    --ui-button-hover-bg: color-mix(in oklch, var(--input) 50%, transparent);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .ui-button--outline {
      --ui-button-bg: color-mix(in oklch, var(--input) 30%, transparent);
      --ui-button-border: var(--input);
      --ui-button-hover-bg: color-mix(in oklch, var(--input) 50%, transparent);
    }
  }

  /* A pressed toggle (aria-pressed, aria-current, a checked input inside) shows as selected. */
  .ui-button:is([aria-pressed="true"], [aria-current="page"], :has(input:checked)):not(.ui-button--link) {
    --ui-button-bg: var(--accent);
    --ui-button-fg: var(--accent-foreground);
  }

  /* A choice drawn as a button: the radio or checkbox covers it, invisibly. */
  .ui-button:has(input:is([type="radio"], [type="checkbox"])) {
    position: relative;

    input:is([type="radio"], [type="checkbox"]) {
      appearance: none;
      cursor: pointer;
      inset: 0;
      margin: 0;
      position: absolute;
    }

    &:has(input:focus-visible) {
      border-color: var(--ring);
      box-shadow: var(--ring-focus);
    }
  }

  /* Sizes */

  .ui-button--sm {
    block-size: 2rem;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;

    &:has(:is(svg, .icon)) {
      padding-inline: 0.625rem;
    }
  }

  .ui-button--lg {
    block-size: 2.5rem;
    padding: 0.5rem 1.5rem;

    &:has(:is(svg, .icon)) {
      padding-inline: 1rem;
    }
  }

  .ui-button:is(.ui-button--icon, .ui-button--icon-sm, .ui-button--icon-lg) {
    aspect-ratio: 1;
    inline-size: auto;
    padding: 0;
  }

  .ui-button--icon { block-size: 2.25rem; }
  .ui-button--icon-sm { block-size: 2rem; }
  .ui-button--icon-lg { block-size: 2.5rem; }

  /* Full width, in a stacked form or a dialog on a phone. */
  .ui-button--block {
    inline-size: 100%;
  }

  /* Button group: buttons joined edge to edge (shadcn's ButtonGroup). */
  /* Descendant selectors throughout the kit, not child ones: in development ReActionView wraps
  /* every ERB output in a display: contents span, so a helper's button is a grandchild. */
  .ui-button-group {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    display: inline-flex;
    isolation: isolate;
    padding-inline-start: 1px;

    .ui-button {
      border-radius: 0;
      box-shadow: none;
      margin-inline-start: -1px;

      &:focus-visible {
        z-index: 1;
      }
    }

    .ui-button:first-of-type {
      border-end-start-radius: var(--radius-md);
      border-start-start-radius: var(--radius-md);
    }

    .ui-button:last-of-type {
      border-end-end-radius: var(--radius-md);
      border-start-end-radius: var(--radius-md);
    }
  }
}