/* Button — context-free interactive control (v2 design system).
 *
 * Extracted from components.css in U7 (issue #495) when ButtonComponent
 * landed. Variants: primary, ghost, danger (outline), danger-solid (fill),
 * icon. Sizes: sm, lg.
 * `.lc-btn--secondary` is preserved as a raw class-only utility — not
 * exposed by ButtonComponent variants but shipped today and out of scope
 * to remove.
 *
 * R16 interaction states declared inline: :focus-visible, :hover (per
 * variant), :disabled / [aria-disabled="true"].
 *
 * Source token (Pico bridge): see app/assets/stylesheets/tokens.css and
 * zz-pico-bridge.css.
 */

.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--control-h);
  padding: 0 var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1;
  border-radius: var(--r-2);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out);
  text-decoration: none;
}
.lc-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.lc-btn:disabled, .lc-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Pico styles <button>/[type=submit]/[type=button] at (0,1,0) and loads after
 * atoms/ (lexicographic 'a' < 'v'), so a single-class .lc-btn TIES Pico and
 * loses every geometry property it does not re-assert — Pico forces its own
 * padding, border, border-radius, font-size, line-height, and a phantom
 * margin-bottom. `.lc-btn` on <a> is unaffected (Pico does not style bare
 * anchors), which is why this atom shipped correctly while it lived only on
 * links. When .lc-btn lands on a <button> or submit/button input, re-assert
 * the DS geometry at a winning specificity and reset Pico's defaults.
 * Color is handled per-variant below (compound .lc-btn.lc-btn--* selectors).
 * docs/solutions/design-patterns/lc-classes-on-button-form-input-need-specificity-bump-pico-loads-later.md */
button.lc-btn,
.lc-btn[type="submit"],
.lc-btn[type="button"] {
  appearance: none;
  -webkit-appearance: none;
  height: var(--control-h);
  margin: 0;
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-2);
  font-size: var(--fs-14);
  line-height: 1;
}
/* Color variants use the compound `.lc-btn.lc-btn--*` (0,2,0) so they beat
 * Pico's (0,1,0) background paint on <button> elements (same reason as the
 * danger variants below). On <a> this is identical to the single class — Pico
 * does not fight anchors — so anchor buttons are unchanged. */
.lc-btn.lc-btn--primary {
  background: var(--color-primary);
  color: var(--color-ink-onfill);
  border-color: var(--color-primary);
}
.lc-btn.lc-btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.lc-btn.lc-btn--secondary {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-rule-strong);
}
.lc-btn.lc-btn--secondary:hover { background: var(--color-surface); }
.lc-btn.lc-btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: transparent;
}
.lc-btn.lc-btn--ghost:hover { background: var(--color-surface); }
/* Compound `.lc-btn.lc-btn--danger*` (specificity 0,2,0) is REQUIRED to beat
   Pico's base button paint. Pico colors buttons via `[type=submit]` /
   `[type=button]` attribute selectors (0,1,0), which TIE a single class
   `.lc-btn--danger` (0,1,0) — and Pico wins on source order because atoms/
   loads before vendor/pico. Without the extra class, danger <button>s render
   in the Pico primary (olive) fill instead of red. */
.lc-btn.lc-btn--danger {
  background: var(--color-paper);
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.lc-btn.lc-btn--danger:hover { background: var(--color-danger-soft); }
/* Solid fill for high-emphasis destructive commits (e.g. the confirm button
   inside a delete modal). The outline `--danger` is for low-emphasis entry
   points; this is the point of no return, so it reads as solid red. */
.lc-btn.lc-btn--danger-solid {
  background: var(--color-danger);
  color: var(--color-ink-onfill);
  border-color: var(--color-danger);
}
.lc-btn.lc-btn--danger-solid:hover { opacity: 0.9; }
.lc-btn--sm { height: var(--control-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-13); }
.lc-btn--lg { height: var(--control-h-lg); padding: 0 var(--sp-5); font-size: var(--fs-15); }
.lc-btn--icon { width: var(--control-h); padding: 0; }
/* On <button>, the bare size modifiers (0,1,0) lose to the geometry reset's
 * `.lc-btn[type="submit"]` (0,2,0) above, so re-assert them at a winning
 * specificity. The bare rules above still apply on <a> (no Pico fight). */
button.lc-btn--sm,
.lc-btn--sm[type="submit"],
.lc-btn--sm[type="button"] { height: var(--control-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-13); }
button.lc-btn--lg,
.lc-btn--lg[type="submit"],
.lc-btn--lg[type="button"] { height: var(--control-h-lg); padding: 0 var(--sp-5); font-size: var(--fs-15); }
button.lc-btn--icon,
.lc-btn--icon[type="submit"],
.lc-btn--icon[type="button"] { width: var(--control-h); padding: 0; }
/* Icon size modifiers override width but not height — without these compound
   rules an icon button at :sm would render with mismatched dimensions
   (non-square). Pinned by `components_extraction_test.rb` ICON_SIZE_TOKENS. */
.lc-btn--icon.lc-btn--sm { width: var(--control-h-sm); }
.lc-btn--icon.lc-btn--lg { width: var(--control-h-lg); }

/* Bare button reset. `button.lc-bare-btn` (0,1,1) beats Pico's button paint
 * (`button` at 0,0,1 and `[type=button]`/`[type=submit]` at 0,1,0) without a
 * per-component compound selector — so any plain/icon/text button can drop the
 * dark Pico fill by adding this one class. Add component classes at (0,2,0)+
 * for accent styling (they sit above this reset). See #596/#561. */
button.lc-bare-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  cursor: pointer;
}