/* ============================================================================
   Buttons Component
   ============================================================================ */

/* Base: sempre usar junto com variante de cor e tamanho */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  font-family: var(--font-family-body);
  transition: opacity 0.2s, background-color 0.2s, color 0.2s;
  border: none;
}

.btn:hover {
  opacity: 0.9;
}

/* Ícones Lucide dentro de botões */
.btn [data-lucide] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Variantes de cor */
.btn-primary {
  background-color: var(--color-primary-500);
  color: var(--color-neutral-0);
}

.btn-secondary {
  background-color: var(--color-secundary-900);
  color: var(--color-neutral-0);
}

.btn-tertiary {
  background-color: var(--color-secundary-700);
  color: var(--color-neutral-0);
}

.btn-disabled {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-height-normal);
  padding: var(--space-xs) var(--space-xs);
  border-radius: var(--radius-md);
  width: auto;
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-100);
  color: var(--color-neutral-700);
}


/* Tamanhos */
.btn-xs {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--font-height-normal);
  font-weight: var(--font-weight-medium);
}

/* Botão quadrado para ícone apenas (ex.: login no header) */
.btn-square-icon {
  width: 2rem;
  height: 2rem;
  padding: 0;
  flex-shrink: 0;
}

/* Botão ícone sem fundo (ghost) */
.btn-ghost-icon {
  background-color: transparent;
  color: inherit;
}
.btn-ghost-icon:hover {
  opacity: 0.8;
}

.btn-sm {
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  line-height: var(--font-height-normal);
  font-weight: var(--font-weight-medium);
}

.btn-md {
  padding: var(--btn-md-padding-y) var(--btn-md-padding-x);
  border-radius: var(--btn-md-radius);
  font-size: var(--btn-md-font-size);
  line-height: var(--btn-md-line-height);
}

.btn-lg {
  padding: var(--btn-lg-padding-y) var(--btn-lg-padding-x);
  border-radius: var(--btn-lg-radius);
  font-size: var(--btn-lg-font-size);
  line-height: var(--btn-lg-line-height);
}

/* Variante outline */
.btn-outline-light {
  border: 0.0625rem solid var(--color-neutral-800);
  background-color: transparent;
  color: var(--color-secundary-800);
  font-weight: 500;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-button);
  font-family: var(--font-family-body);
  transition: background-color 0.2s;
}

.btn-outline-light:hover {
  background-color: var(--color-neutral-50);
  opacity: 1;
}

/* Botão apenas com ícone (quadrado) */
.btn-icon-only {
  background-color: var(--color-secundary-800);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-neutral-0);
  text-decoration: none;
  line-height: 0;
  padding: 0.4375rem;
  border-radius: var(--radius-md);
  width: var(--space-8);
  height: var(--space-8);;
  border: none;
  cursor: pointer;
}

.btn-icon-only svg {
  width: 1rem;
  height: 1rem;
  stroke-width: 1.5;
  stroke: var(--color-neutral-0);
}