/* Botão Base */
.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-1) var(--spacing-3);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  text-decoration: none;
  height: 32px;
}

.btn:disabled {
  cursor: not-allowed;
  color: var(--gray-400) !important;
}

/* Botão Primary */
.btn-primary {
  background-color: var(--primary-700);
  color: var(--gray-25);
  min-width: 200px;
}

.btn-primary:not(:disabled):hover {
  background-color: var(--primary-900);
}

.btn-primary:active {
  background-color: var(--primary-900);
}

.btn-primary:disabled {
  background-color: var(--gray-200);
}

/* Botão Secondary */
.btn-secondary {
  background-color: var(--gray-25);
  border-color: var(--gray-300);
  color: var(--gray-900);
}

.btn-secondary:not(:disabled):hover {
  background-color: var(--primary-50);
}

.btn-secondary:active {
  background-color: var(--gray-300);
}

/* Botão Outline */
.btn-outline {
  background-color: transparent;
  color: var(--primary-500);
  border-color: var(--primary-500);
}

.btn-outline:not(:disabled):hover {
  background-color: var(--primary-25);
}

.btn-outline:active {
  background-color: var(--primary-50);
}

.btn-outline-gray {
  background-color: var(--gray-25);
  border-color: var(--gray-300);
  color: var(--gray-900);
}

.btn-outline-gray:not(:disabled):hover {
  background-color: var(--primary-50);
}

.btn-outline-gray:active {
  box-shadow: 0 0 0 2px var(--blue-300);
  outline: none;
}

/* Botão Ghost */
.btn-ghost {
  background-color: transparent;
  border: none;
  color: var(--gray-900);
  outline: transparent;
}

.btn-ghost:not(:disabled):hover {
  background-color: var(--primary-100);
}

.btn-ghost:active {
  outline: var(--border-style-solid) var(--border-width-medium) var(--blue-light-300);
}

/* Botão Ghost - Erro */
.btn-ghost.error {
  background-color: transparent;
  border: none;
  color: var(--error-700);
}

.btn-ghost.error:not(:disabled):hover {
  background-color: var(--error-50);
}

/* Estados de Desabilitado */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Tamanhos de Botão */
.btn-sm {
  height: var(--spacing-8);
  font-size: var(--font-size-xs);
  line-height: 1rem;
}

.btn-md {
  height: var(--spacing-10);
  font-size: var(--font-size-sm);
  line-height: 1.25rem;
}

.btn-lg {
  height: 38px;
  font-size: var(--font-size-base);
  line-height: 1.5rem;
}

/* Botões com ícones */
.btn-icon {
  padding: 0.5rem;
}

.btn-icon.btn-sm {
  padding: 0.25rem;
}

.btn-icon.btn-md {
  padding: 0.5rem;
}

.btn-icon.btn-lg {
  padding: 0.75rem;
}

.btn-link {
  background-color: transparent;
  border: none;
  color: var(--gray-900);
  outline: transparent;
}

.eye-btn{
  background: transparent;
  right: var(--spacing-4);
  top: var(--spacing-2);
  border-width: var(--border-width-none);
}

@media (max-width: 767px) {
  .btn-ghost {
    border: var(--border-width-thin) var(--border-style-solid) var(--gray-400);
  }

  .btn-icon {
    font-size: var(--font-size-xl);
    padding: 0 var(--spacing-3);

    .label {
      display: none;
    }
  }
}

/* Botão Remove - Ajustes específicos para usar classes padrão */
.btn.btn-ghost.btn-sm.error.btn-icon {
  width: var(--spacing-12);
  height: var(--spacing-12);
  padding: var(--spacing-4);
  flex-shrink: 0;
}

.btn.btn-ghost.btn-sm.error.btn-icon i {
  font-size: var(--font-size-xl);
}

/* Garantir que o botão seja escondido quando necessário */
.btn.btn-ghost.btn-sm.error.btn-icon[style*="display: none"] {
  display: none !important;
}