/* ==================================================
   Button Component
   schwimm einfach Theme
================================================== */

/*
 * Base Button
 *
 * Gemeinsame Grundlage für Links und echte Buttons.
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

    box-sizing: border-box;


  min-height: 48px;
  padding: var(--space-12) var(--space-24);

  color: var(--color-secondary);
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-family: var(--font-family-ui);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-button);
  text-align: center;
  text-decoration: none;

  cursor: pointer;
}

/* ==================================================
   Variants
================================================== */

/*
 * Primärer Button
 *
 * Für wichtige Aktionen wie Buchungen.
 */
.btn-primary {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/*
 * Sekundärer Button
 *
 * Für weiterführende Links und weniger
 * stark gewichtete Aktionen.
 */
.btn-secondary {
  color: var(--color-secondary);
  background-color: var(--color-white);
  border-color: var(--color-secondary);
}

/* ==================================================
   Sizes
================================================== */

.btn-sm {
  min-height: 40px;
  padding: var(--space-8) var(--space-16);
  font-size: var(--font-size-xs);
}

.btn-lg {
  min-height: 56px;
  padding: var(--space-16) var(--space-32);
  font-size: var(--font-size-md);
}

/* ==================================================
   Width
================================================== */

.btn-full {
  width: 100%;
}

/* ==================================================
   States
================================================== */

/*
 * Sichtbarer Fokus für Tastaturbedienung.
 *
 * Kein Hover-Effekt, da dieser aktuell
 * für das Theme nicht benötigt wird.
 */
.btn:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 3px;
}

/*
 * Deaktivierte Buttons
 */
.btn:disabled,
.btn[disabled],
.btn-disabled,
.btn.is-disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}

/* ==================================================
   Responsive
================================================== */

@media (max-width: 576px) {
  .btn-mobile-full {
    width: 100%;
  }
}