/*
 * button -- Bedienelement für Aktionen; auch für Links, die als Aktion
 * auftreten sollen.
 * Ausprägungen: --primary (gefüllt, die eine Hauptaktion), --secondary
 * (Kontur), --danger (zerstörend), --link (reiner Text), --icon (reines
 * Symbol ohne Fläche).
 * Zustände: hover, Fokus (kommt aus base), disabled.
 */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  padding-inline: var(--space-4);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-medium);
  background-color: transparent;
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

/* Ein Link mit Knopf-Aussehen erbt beim Zeigen sonst die Linkfarbe aus base.css:
   dunkelgrüner Text auf grünem Grund, unlesbar. Auf Touchgeräten bleibt dieser Zustand
   nach dem Antippen kleben, also auch noch, wenn man von der nächsten Seite zurückkommt.
   Jede Ausprägung setzt ihre Textfarbe im Hover deshalb selbst. */
.button:hover {
  color: var(--color-text);
}

.button--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.button--primary:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.button--secondary {
  border-color: var(--color-border-strong);
}

.button--secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.button--danger {
  background-color: var(--color-error);
  color: var(--color-on-error);
}

.button--danger:hover {
  background-color: var(--color-error-hover);
  color: var(--color-on-error);
}

/* Trefferfläche bleibt 44px hoch, der Text sitzt aber ohne Innenabstand auf
   der Kante -- sonst steht ein Textknopf gegenüber Fließtext eingerückt */
.button--link {
  padding-inline: 0;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.button--link:hover {
  color: var(--color-primary-hover);
}

/* Reines Symbol: keine Fläche, keine Kante, kein Kasten beim Zeigen.
   Auf Touchgeräten gibt es keinen Zeiger, dem man eine Fläche zeigen müsste;
   beim Zeigen wechselt deshalb nur die Farbe des Symbols. Die Trefferfläche
   ist 44 x 44px und unsichtbar. */
.button--icon {
  inline-size: var(--tap-target);
  padding: 0;
  border: 0;
  color: var(--color-text);
}

.button--icon:hover {
  color: var(--color-primary);
}

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

.button__icon {
  flex: none;
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
}

/* In den Abschnitten von Gast und Teilnehmer (layout__band, trail-style.md): Knöpfe als
   runde Pillen, mindestens 52px hoch; der zweite Weg weiß mit Rand und Schatten. Text-
   und Symbolknöpfe behalten ihre Form. Die Verwaltung hat keine Abschnitte und bleibt,
   wie sie ist. */
.layout__band .button {
  min-height: 3.25rem;
  padding-inline: var(--space-5);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
}

.layout__band .button--secondary {
  border-color: var(--color-border);
  background-color: var(--color-card);
  color: var(--color-primary);
  box-shadow: var(--shadow-small);
}

.layout__band .button--link {
  min-height: var(--tap-target);
  padding-inline: 0;
  border-radius: 0;
}

.layout__band .button--icon {
  min-height: var(--tap-target);
  padding: 0;
}