/* ===========================
   BUTTONS
   =========================== */

.boows-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--boows-space-1);
  font-family: var(--boows-font);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  padding: var(--boows-space-2) var(--boows-space-3);
  border-radius: var(--boows-button-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--boows-transition);
  text-decoration: none;
  user-select: none;
}

/* === Button Variants === */
.boows-btn.primary {
  background: var(--boows-col-primary);
  color: #fff;
}
.boows-btn.primary:hover {
  background: var(--boows-col-primary-80);
}

/* Secondary = Outline-Only (border + text-color, kein Fill).
   Fuer einen gefuellten Sekundaer-Button stattdessen .accent oder
   .primary verwenden. */
.boows-btn.secondary {
  background: transparent;
  color: var(--boows-col-primary);
  border: 1px solid var(--boows-col-primary);
}
.boows-btn.secondary:hover {
  background: var(--boows-col-primary-10);
  color: var(--boows-col-primary);
}

/* Generischer Outline-Button (neutral, Text-Farbe + Border) */
.boows-btn.outline {
  background: transparent;
  color: var(--boows-col-text);
  border: 1px solid var(--boows-col-text-20);
}
.boows-btn.outline:hover {
  background: var(--boows-col-text-5);
  color: var(--boows-col-text);
}

.boows-btn.pale {
  background: transparent;
  color: var(--boows-col-text);
  border: 1px solid var(--boows-col-text-20);
}
.boows-btn.pale:hover {
  background: var(--boows-col-text-5);
  color: var(--boows-col-text);
}

.boows-btn.success {
  background: var(--boows-col-success);
  color: #fff;
}
.boows-btn.success:hover {
  background: var(--boows-col-success-20);
  color: var(--boows-col-text);
}

.boows-btn.danger {
  background: var(--boows-col-error);
  color: #fff;
}
.boows-btn.danger:hover {
  background: var(--boows-col-error-20);
  color: var(--boows-col-text);
}

.boows-btn.plain {
  background: transparent;
  color: var(--boows-col-text);
}
.boows-btn.plain:hover {
  background: var(--boows-col-text-10);
}

/* === Disabled === */
.boows-btn:disabled,
.boows-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* === Icon Only === */
.boows-btn.icon {
  padding: var(--boows-space-2);
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  justify-content: center;
}

/* === Icon Prefix/Suffix === */
.boows-btn .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  line-height: 0;
}

.boows-btn .btn-icon .material-icons {
  display: block;
  line-height: 1;
  font-size: 1.2em;
}

.boows-btn .btn-icon .material-symbols-outlined {
  display: block;
  line-height: 1;
  font-size: 1.2em;
}

.boows-btn .btn-icon.prefix {
  margin-right: var(--boows-space-1);
}
.boows-btn .btn-icon.suffix {
  margin-left: var(--boows-space-1);
}

.boows-btn .boows-btn-text {
  display: inline-flex;
  align-items: center;
}

.boows-btn.icon .btn-icon.prefix,
.boows-btn.icon .btn-icon.suffix {
  margin: 0;
}

/* === Loading Spinner === */
.boows-btn.boows-btn-loading {
  opacity: 0.8;
  pointer-events: none;
}

.boows-btn.boows-btn-loading-center {
  position: relative;
}

.boows-btn .boows-btn-text.boows-btn-text-hidden {
  visibility: hidden;
}

.boows-btn .boows-btn-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: boowsBtnSpin 0.8s linear infinite;
  margin-right: var(--boows-space-1);
}

.boows-btn .btn-icon.boows-btn-spinner-slot .boows-btn-spinner {
  margin-right: 0;
}

.boows-btn .boows-btn-spinner-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
}

@keyframes boowsBtnSpin {
  to { transform: rotate(360deg); }
}