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

.boows-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--boows-space-1);
  font-family: var(--boows-font);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: var(--boows-space-2) var(--boows-space-3);
  border-radius: var(--boows-button-radius);
  border: none;
  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);
}

.boows-btn.secondary {
  background: var(--boows-col-secondary);
  color: #fff;
}
.boows-btn.secondary:hover {
  background: var(--boows-col-primary-80);
}

.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: 1;
}

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

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

.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;
}

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