/**
 * Kirby Button Tag Plugin
 * Version: 1.1.0
 *
 * Farben laufen über CSS Custom Properties, die der Tag inline setzt.
 * Dadurch funktionieren sie unabhängig davon, ob Tailwind die Klassen
 * beim Build gesehen hat – Content-Dateien werden von Tailwind nicht
 * gescannt.
 */

.kbtn {
  --kbtn-bg:          transparent;
  --kbtn-color:       currentColor;
  --kbtn-border:      transparent;
  --kbtn-hover-bg:    var(--kbtn-accent, #1c4e65);
  --kbtn-hover-color: #ffffff;
  --kbtn-hover-border: transparent;

  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: 1px solid var(--kbtn-border);
  background-color: var(--kbtn-bg);
  color: var(--kbtn-color);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none !important;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}

.kbtn:hover,
.kbtn:focus-visible {
  background-color: var(--kbtn-hover-bg);
  color: var(--kbtn-hover-color);
  border-color: var(--kbtn-hover-border);
}

/* Textgrößen */
.kbtn--sm   { font-size: 0.875rem; padding: 0.375rem 0.75rem; }
.kbtn--base { font-size: 1rem; }
.kbtn--lg   { font-size: 1.125rem; padding: 0.625rem 1.25rem; }

/* Icon */
.kbtn svg { flex-shrink: 0; }

/* Wenn eigene Klassen für Hintergrund/Farbe übergeben wurden, sollen
   diese gewinnen: dann setzt der Tag .kbtn--plain, das die eigenen
   Farbregeln deaktiviert. */
.kbtn--plain,
.kbtn--plain:hover,
.kbtn--plain:focus-visible {
  background-color: revert;
  color: revert;
  border-color: revert;
}

/* --- Dateiangabe (Typ und Größe) ---
   Erscheint hinter der Beschriftung, wenn ein Button auf eine Datei
   verweist. Etwas kleiner und zurückgenommen, damit die Beschriftung
   führend bleibt. */
.kbtn__meta{
  font-size: .85em;
  opacity: .75;
  font-weight: 400;
  white-space: nowrap;
}