/**
 * Projeto: RGLog CAOA
 * Arquivo: button.css
 * Autor: Djeferson Capelli
 * Versão: 1.0.0
 * Descrição: Componente button — variantes primary, secondary, ghost, danger
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.625rem 1.25rem;
  min-height: 40px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Variantes ────────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--c-accent);
  color: var(--c-accent-text);
  border-color: var(--c-accent);
}
.btn-primary:hover { background-color: var(--c-accent-hover); border-color: var(--c-accent-hover); }

.btn-secondary {
  background-color: var(--c-bg-elevated);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}
.btn-secondary:hover { background-color: var(--c-bg-hover); }

.btn-ghost {
  background-color: transparent;
  color: var(--c-text-muted);
}
.btn-ghost:hover { background-color: var(--c-bg-hover); color: var(--c-text); }

.btn-danger {
  background-color: var(--c-danger);
  color: #fff;
  border-color: var(--c-danger);
}
.btn-danger:hover { opacity: 0.9; }

/* ── Tamanhos ─────────────────────────────────────────────────────────── */
.btn-sm  { padding: 0.4rem 0.875rem; min-height: 32px; font-size: 13px; }
.btn-lg  { padding: 0.875rem 1.5rem; min-height: 48px; font-size: 15px; }
.btn-block { width: 100%; }

/* ── Botão ícone (square) ─────────────────────────────────────────────── */
.btn-icon {
  width: 40px; height: 40px; min-height: 40px;
  padding: 0;
}
.btn-icon.btn-sm { width: 32px; height: 32px; min-height: 32px; }

/* ── Loading state ────────────────────────────────────────────────────── */
.btn[data-loading="true"] {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.btn[data-loading="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--c-accent-text);
  animation: rg-spin 0.7s linear infinite;
}
.btn-secondary[data-loading="true"]::after,
.btn-ghost[data-loading="true"]::after {
  color: var(--c-text);
}
@keyframes rg-spin { to { transform: rotate(360deg); } }