/**
 * Button (Atom): liest nur --theme-*.
 * BEM: .btn (primär, gefüllt: invertierte Fläche), .btn--secondary (Kontur),
 * .btn--danger (dezent rot), .btn--small (Kopfzeile, Tabellen).
 * Je Ansicht genau EINE gefüllte Primäraktion; weitere Aktionen sind sekundär.
 * Ausnahme: „Abmelden“ in der Kopfzeile ist klein gefüllt wie das „Sign in“
 * der Stilvorlage.
 * Handy: Trefferfläche mindestens 44 px (letzter Block).
 */
@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--theme-btn-min-height);
    padding: var(--theme-btn-padding-block) var(--theme-btn-padding-inline);
    border: var(--theme-btn-border-width) solid transparent;
    border-radius: var(--theme-btn-radius);
    background-color: var(--theme-btn-primary-bg);
    color: var(--theme-btn-primary-text);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-ui);
    text-decoration: none;
    white-space: nowrap;
    transition:
      background-color var(--motion-duration-ui) var(--motion-ease),
      border-color var(--motion-duration-ui) var(--motion-ease),
      color var(--motion-duration-ui) var(--motion-ease),
      transform var(--press-duration, var(--motion-duration-ui)) var(--motion-ease);
  }

  @media (prefers-reduced-motion: no-preference) {
    .btn:not(:disabled, [aria-disabled="true"]):active {
      --press-duration: var(--motion-duration-press);
      transform: scale(0.97);
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .btn:hover {
      background-color: var(--theme-btn-primary-bg-hover);
      color: var(--theme-btn-primary-text);
    }
  }

  .btn--secondary {
    background-color: var(--theme-btn-secondary-bg);
    border-color: var(--theme-btn-secondary-border);
    color: var(--theme-btn-secondary-text);
  }

  @media (hover: hover) and (pointer: fine) {
    .btn--secondary:hover {
      background-color: var(--theme-btn-secondary-bg-hover);
      border-color: var(--theme-btn-secondary-border-hover);
      color: var(--theme-btn-secondary-text);
    }
  }

  .btn--danger {
    background-color: var(--theme-btn-danger-bg);
    border-color: var(--theme-btn-danger-border);
    color: var(--theme-btn-danger-text);
  }

  @media (hover: hover) and (pointer: fine) {
    .btn--danger:hover {
      background-color: var(--theme-btn-danger-bg);
      border-color: var(--theme-btn-danger-text);
      color: var(--theme-btn-danger-text);
    }
  }

  .btn--small {
    --theme-btn-min-height: 1.75rem;
    --theme-btn-padding-block: var(--space-1);
    --theme-btn-padding-inline: var(--space-3);
    font-size: var(--font-size-small);
  }

  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn__icon {
    inline-size: 1em;
    block-size: 1em;
    flex-shrink: 0;
  }

  @media (max-width: 48.75em) {
    .btn,
    .btn--small {
      --theme-btn-min-height: 2.75rem;
    }
  }
}