/**
 * - https://component.gallery/components/button
 * - https://designsystems.surf/components/button
 * - https://www.uiguideline.com/components/button
 * - https://codepen.io/jh3y/pen/XJdLrZV
 *
 * Base appearance + primary/destructive variants are shared with shadow-DOM
 * elements (l-alert-dialog) from button-core.css; layered here into
 * `@layer components`. Size/icon-only/press-effect variants are button-only.
 */
@layer components {
/*
 * Shared `.l-button` appearance — the single source of truth for the button's
 * base look, primary, and destructive variants. Lives in the HTML tree so it is
 * both:
 *   - `@import`ed (and layered) by src/css/elements/button.css for the light-DOM
 *     `.l-button`, and
 *   - imported `?inline` into shadow-DOM elements (l-alert-dialog) that render
 *     their own `.l-button` actions and can't reach the global stylesheet.
 *
 * Intentionally UNLAYERED: the light-DOM import wraps it in `@layer components`
 * via `@import … layer(components)`, while shadow consumers want it unlayered to
 * sit alongside the (also unlayered) dialog styles. Size/icon-only/press-effect
 * variants stay in button.css — shadow actions don't need them.
 */
.l-button {
  /* Local size scaffolding (referenced by the size variants in button.css). */
  --_button-size-xs: var(--l-size-control-xs); /* 28px */
  --_button-size-sm: var(--l-size-control-sm); /* 32px */
  --_button-size-md: var(--l-size-control-md); /* 36px */
  --_button-size-lg: var(--l-size-control-lg); /* 40px */
  --_button-size-xl: var(--l-size-control-xl); /* 44px */

  /* Appearance (default: secondary) */
  --height: var(--_button-size-md);
  --padding-inline: 0.625rem;
  --background-color: var(--l-color-bg-fill-secondary);
  --background-color-active: color-mix(
    in oklab,
    var(--l-color-bg-fill-secondary) 90%,
    var(--l-color-text-primary)
  );
  --background-color-hover: var(--background-color-active);
  --font-size: var(--l-text-sm);
  --text-color: var(--l-color-text-primary);
  --text-color-hover: var(--text-color);
  --border-color: var(--l-color-border);
  --border-color-hover: color-mix(in oklab, var(--l-color-border) 75%, var(--l-color-text-primary));

  position: relative;
  display: inline-flex;
  place-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  height: var(--height);
  padding-inline: var(--padding-inline);
  border: 1px solid var(--border-color);
  border-radius: calc(var(--height) / 8);
  background: var(--background-color);
  color: var(--text-color);
  outline: none;
  font-size: var(--font-size);
  font-weight: var(--l-font-weight-semibold);
  text-decoration: none;
  -webkit-user-select: none;
          user-select: none;
  white-space: nowrap;
  appearance: none;
  -webkit-tap-highlight-color: transparent;

  transition-property: background-color, color, text-decoration, border-color;
  transition-duration: 150ms;

  /* `:disabled` (native) and `[aria-disabled]` (a busy/blocked control kept in
     the tab order) read the same. */
  &:not(:disabled):not([aria-disabled='true']) {
    cursor: pointer;
  }

  &:disabled,
  &[aria-disabled='true'] {
    cursor: not-allowed;
    opacity: 0.4;
  }

  &:not(:disabled):not([aria-disabled='true']):hover {
    background-color: var(--background-color-hover);
    border-color: var(--border-color-hover);
    color: var(--text-color-hover);
  }

  &:not(:disabled):not([aria-disabled='true']):active {
    background-color: var(--background-color-active);
  }

  &:focus-visible {
    outline: 2px solid var(--l-focus-ring);
    outline-offset: 2px;
  }
}

.l-button[data-variant='primary'] {
  --background-color: var(--l-color-bg-fill-brand);
  --background-color-active: var(--l-color-bg-fill-brand-active);
  --background-color-hover: var(--l-color-bg-fill-brand-hover);
  --text-color: var(--l-color-text-on-fill-brand);
  --text-color-hover: var(--l-color-text-on-fill-brand);
  --border-color: transparent;
  --border-color-hover: transparent;
}

/* Soft danger fill: a pale tint with a dark-red label, deepening the tint on
   hover/active. Reads clearly as destructive without the visual shout of a solid
   red — the consequence lives in the copy and the confirmation, not the chrome.
   Derivations mix the soft fill toward the danger text color, so the tint
   deepens in light mode and lightens in dark mode (where soft is near-black). */
.l-button[data-variant='destructive'] {
  --background-color: var(--l-color-bg-fill-danger-soft);
  --background-color-hover: color-mix(
    in oklab,
    var(--l-color-bg-fill-danger-soft) 80%,
    var(--l-color-text-danger)
  );
  --background-color-active: color-mix(
    in oklab,
    var(--l-color-bg-fill-danger-soft) 65%,
    var(--l-color-text-danger)
  );
  --text-color: var(--l-color-text-danger);
  --text-color-hover: var(--l-color-text-danger);
  --border-color: transparent;
  --border-color-hover: transparent;
}
}
@layer components {
  .l-button[data-press-effect]:active {
    scale: 0.98;
    translate: 0 1px;
  }

  /*
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
  Button size
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
  */

  .l-button[data-icon-only] {
    width: var(--height);
    font-size: var(--icon-only-size, 1.25em);
  }

  .l-button[data-size='sm'] {
    --height: var(--_button-size-sm);
    --padding-inline: 0.5rem;
    --font-size: var(--l-text-sm);
  }

  /*
   * Font-size stays at --l-text-sm (14px) across md/lg/xl: only height and
   * padding scale with the control size, so a taller button reads as a larger
   * touch target, not a louder label. Consumers who want a bigger label can
   * still override the --font-size knob. See RFC-button-font-size-lg-xl.
   */
  .l-button[data-size='lg'] {
    --height: var(--_button-size-lg);
    --padding-inline: 0.75rem;
  }

  .l-button[data-size='xl'] {
    --height: var(--_button-size-xl);
    --padding-inline: 0.875rem;
  }
}