/* ============================================================
 * TEDDY DS — BUTTON
 *
 * Complementa as variantes já presentes em original.css:
 *   .button, .btn-orange, .btn-dark, .btn-outline, .btn-ghost
 *
 * Adiciona aqui: tamanhos (sm/lg), block, icon-only, loading,
 * disabled e a variante destrutiva (danger).
 *
 * Importar APÓS tokens.css e original.css.
 * ============================================================ */

/* ── Garantias da base ─────────────────────────────────────── */
/* original.css já define a .button. As regras abaixo garantem
   comportamento esperado nos NOVOS estados (focus visível,
   alinhamento de ícones boxicons, line-height previsível). */

.button {
  /* Sobrescritas conservadoras — só adicionam o que faltava */
  font-family: var(--font-sans);
  line-height: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.button i {
  /* Boxicons como ícone de botão */
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.button:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* ── Tamanhos ──────────────────────────────────────────────── */
/* Default (`.button` sem modificador) = md → 16/32 padding, 15px, definido em original.css */

.btn-sm {
  padding: 10px 18px;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  gap: var(--space-2);
}
.btn-sm i { font-size: 16px; }

.btn-lg {
  padding: 20px 40px;
  font-size: var(--font-size-md);
  border-radius: 18px;
  gap: var(--space-3);
}
.btn-lg i { font-size: 20px; }

/* ── Icon-only (quadrado) ──────────────────────────────────── */
.btn-icon {
  width: 48px;
  height: 48px;
  padding: 0;
  justify-content: center;
}
.btn-icon.btn-sm { width: 36px; height: 36px; }
.btn-icon.btn-lg { width: 56px; height: 56px; }

/* ── Block (full width) ────────────────────────────────────── */
.btn-block {
  width: 100%;
  justify-content: center;
}

/* ── Variante destrutiva ───────────────────────────────────── */
.btn-danger {
  background: var(--color-error);
  color: white;
}
.btn-danger:hover {
  background: #dc2626; /* error-dark, não tokenizado ainda */
  /* hover de --transition já vem da .button base */
}

/* ── Disabled ──────────────────────────────────────────────── */
.button:disabled,
.button[disabled],
.button.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Loading ───────────────────────────────────────────────── */
/* Uso: <button class="button btn-orange btn-loading" disabled>Salvar</button> */
.btn-loading {
  position: relative;
  color: transparent !important;        /* esconde texto e ícones internos */
  pointer-events: none;
}
.btn-loading > * { visibility: hidden; }
.btn-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  /* currentColor não funciona em transparent — recuperamos pela cor original */
  color: white;
  animation: btn-spin 0.7s linear infinite;
}
.btn-loading.btn-outline::after,
.btn-loading.btn-ghost::after { color: var(--color-text); }

@keyframes btn-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

/* ── Group (botões agrupados) ──────────────────────────────── */
.btn-group {
  display: inline-flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}