/*
 * leadity-Bibliothek · kanonische Aktionskomponenten
 * Quellen: Figma 2074:139, 2234:4488, 9343:60945,
 * 6367:1414, 8931:56265 und 6367:1478.
 * Dieser Layer wird nach seitenspezifischen Styles und app-shell.css geladen.
 */

:where(.btn, .action-icon-button, .quicklink, .quicklink-chip) {
  box-sizing: border-box;
  position: relative;
  border: 0;
  font-family: var(--leadity-font-body);
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transform: none;
}

:where(.btn, .action-icon-button, .quicklink) {
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

:where(.btn, .action-icon-button, .quicklink):active { transform: none; }

:where(.btn, .action-icon-button):disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Textbuttons */
.btn {
  min-width: 96px;
  height: var(--leadity-control-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--leadity-space-4);
  padding-inline: var(--leadity-space-5);
  border-radius: var(--leadity-radius-full);
  font-size: 16px;
  line-height: 16px;
  letter-spacing: .15px;
  white-space: nowrap;
}

.btn > i {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 16px;
  font-size: 16px;
}

/* Navigation innerhalb der Komponentenbibliothek. */
.component-index-back {
  width: fit-content;
  margin-bottom: var(--leadity-space-5);
}

.btn-sm {
  min-width: 0;
  height: var(--leadity-control-compact);
  gap: var(--leadity-space-3);
  padding-inline: var(--leadity-space-4);
  font-size: 14px;
  line-height: 16px;
  letter-spacing: .1px;
}

.btn-sm > i {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  font-size: 14px;
}

.btn-primary {
  background: var(--leadity-neutral-80);
  color: var(--leadity-white);
  box-shadow: var(--leadity-shadow-default);
}

.btn-primary:hover { background: var(--leadity-neutral-100); }

.btn-secondary {
  background: var(--leadity-neutral-10);
  color: var(--leadity-text-default);
}

.btn-secondary:hover { background: var(--leadity-neutral-20); }

.btn-secondary-light,
.btn-light {
  background: var(--leadity-white);
  color: var(--leadity-text-default);
  box-shadow: var(--leadity-shadow-default);
}

.btn-secondary-light:hover,
.btn-light:hover {
  background: var(--leadity-neutral-20);
  box-shadow: var(--leadity-shadow-hover);
}

.btn-destructive {
  background: var(--leadity-state-error-background);
  color: var(--leadity-white);
}

.btn-destructive:hover { background: var(--leadity-state-error-text); }

.btn-destructive-light {
  background: var(--leadity-state-error-background-light);
  color: var(--leadity-state-error-text);
}

.btn-destructive-light:hover { background: var(--leadity-state-error-background-light-hover); }

/* Generische Icon-Aktionen; Header- und Sidebar-Controls bleiben App-Shell-Scope. */
.action-icon-button {
  width: var(--leadity-control-default);
  height: var(--leadity-control-default);
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--leadity-control-default);
  padding: 0;
  border-radius: var(--leadity-radius-full);
  background: var(--leadity-neutral-10);
  color: var(--leadity-text-default);
  font-size: 16px;
}

.action-icon-button:hover { background: var(--leadity-neutral-20); }

.action-icon-button-sm {
  width: var(--leadity-control-compact);
  height: var(--leadity-control-compact);
  flex-basis: var(--leadity-control-compact);
  font-size: 14px;
}

.action-icon-button-lg {
  width: var(--leadity-control-large);
  height: var(--leadity-control-large);
  flex-basis: var(--leadity-control-large);
  font-size: 20px;
}

.action-icon-button-primary {
  background: var(--leadity-neutral-80);
  color: var(--leadity-white);
  box-shadow: var(--leadity-shadow-default);
}

.action-icon-button-primary:hover { background: var(--leadity-neutral-100); }

.action-icon-button-secondary-light {
  background: var(--leadity-white);
  box-shadow: var(--leadity-shadow-default);
}

.action-icon-button-secondary-light:hover {
  background: var(--leadity-neutral-20);
  box-shadow: var(--leadity-shadow-hover);
}

.action-icon-button-destructive-light {
  background: var(--leadity-state-error-background-light);
  color: var(--leadity-state-error-text);
}

.action-icon-button-destructive-light:hover {
  background: var(--leadity-state-error-background-light-hover);
}

/* Quicklinks */
.quicklink {
  height: var(--leadity-control-compact);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  gap: var(--leadity-space-3);
  padding-inline: var(--leadity-space-4);
  border-radius: var(--leadity-radius-full);
  background: var(--leadity-neutral-10);
  color: var(--leadity-text-default);
  font-size: 14px;
  line-height: 16px;
  letter-spacing: .15px;
  white-space: nowrap;
}

.quicklink:hover { background: var(--leadity-neutral-20); }

.quicklink > i {
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 14px;
  font-size: 14px;
}

.quicklink-large {
  min-width: 96px;
  height: var(--leadity-control-default);
  gap: var(--leadity-space-4);
  padding-inline: var(--leadity-space-5);
  font-size: 16px;
}

.quicklink-large > i {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  font-size: 16px;
}

.quicklink-secondary-light {
  background: var(--leadity-white);
  box-shadow: var(--leadity-shadow-default);
}

.quicklink-secondary-light:hover {
  background: var(--leadity-neutral-20);
  box-shadow: var(--leadity-shadow-hover);
}

.quicklink-icon-only {
  width: var(--leadity-control-compact);
  padding: 0;
}

.quicklink-large.quicklink-icon-only { width: var(--leadity-control-default); }

.quicklink-chip {
  min-width: var(--leadity-control-compact);
  height: var(--leadity-control-compact);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--leadity-space-3);
  padding-inline: var(--leadity-space-3);
  border-radius: var(--leadity-radius-sm);
  background: var(--leadity-neutral-10);
  color: var(--leadity-neutral-80);
  font-size: 14px;
  line-height: 16px;
  letter-spacing: .1px;
}

.quicklink-chip > i { font-size: 14px; }

.quicklink-list {
  display: flex;
  gap: var(--leadity-space-3);
}

.quicklink-list-wrap { flex-wrap: wrap; }
.quicklink-list-column { align-items: flex-start; flex-direction: column; }

/* 32-px-Sichtflächen behalten eine effektive Trefferfläche von 40 px. */
:where(.btn-sm, .action-icon-button-sm, .quicklink:not(.quicklink-large), .quicklink-chip)::after {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  :where(.btn, .action-icon-button, .quicklink) { transition-duration: .01ms; }
}