/*
 * GALAPPXY — Buttons
 * .gx-btn + variantes
 */

.gx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gx-sp-2);
  height: var(--gx-input-height);
  padding: 0 var(--gx-sp-4);
  font-size: var(--gx-text-sm);
  font-weight: var(--gx-weight-medium);
  font-family: var(--gx-font-sans);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--gx-btn-radius);
  cursor: pointer;
  transition: all var(--gx-duration-base) var(--gx-ease-default);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.gx-btn:active { transform: scale(0.97); }

/* Variantes */
.gx-btn--primary {
  background: var(--gx-primary);
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(var(--gx-primary-rgb), 0.3);
}
.gx-btn--primary:hover {
  background: var(--gx-primary-hover);
  box-shadow: var(--gx-shadow-colored);
}

.gx-btn--secondary {
  background: var(--gx-secondary);
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(var(--gx-secondary-rgb), 0.3);
}
.gx-btn--secondary:hover { background: var(--gx-secondary-hover); }

.gx-btn--outline {
  background: transparent;
  border-color: var(--gx-border-strong);
  color: var(--gx-text-primary);
}
.gx-btn--outline:hover {
  border-color: var(--gx-primary);
  color: var(--gx-primary);
  background: rgba(var(--gx-primary-rgb), 0.04);
}

.gx-btn--ghost {
  background: transparent;
  color: var(--gx-text-secondary);
}
.gx-btn--ghost:hover {
  background: var(--gx-bg-surface-hover);
  color: var(--gx-text-primary);
}

.gx-btn--danger {
  background: var(--gx-danger);
  color: #FFFFFF;
}
.gx-btn--danger:hover { background: #DC2626; }

.gx-btn--success {
  background: var(--gx-success);
  color: #FFFFFF;
}
.gx-btn--success:hover { background: #059669; }

/* Soft variants */
.gx-btn--soft {
  background: rgba(var(--gx-primary-rgb), 0.1);
  color: var(--gx-primary);
}
.gx-btn--soft:hover {
  background: rgba(var(--gx-primary-rgb), 0.18);
}

/* Tamaños */
.gx-btn--xs {
  height: 28px;
  padding: 0 var(--gx-sp-2);
  font-size: var(--gx-text-xs);
}

.gx-btn--sm {
  height: var(--gx-input-height-sm);
  padding: 0 var(--gx-sp-3);
  font-size: var(--gx-text-xs);
}

.gx-btn--lg {
  height: var(--gx-input-height-lg);
  padding: 0 var(--gx-sp-6);
  font-size: var(--gx-text-md);
}

/* Formas */
.gx-btn--pill { border-radius: var(--gx-radius-full); }
.gx-btn--square { border-radius: 0; }

/* Icon button */
.gx-btn--icon {
  width: var(--gx-input-height);
  padding: 0;
}
.gx-btn--icon.gx-btn--xs { width: 28px; padding: 0; }
.gx-btn--icon.gx-btn--sm { width: var(--gx-input-height-sm); }
.gx-btn--icon.gx-btn--lg { width: var(--gx-input-height-lg); }

/* Full width */
.gx-btn--block { width: 100%; }

/* Disabled */
.gx-btn:disabled,
.gx-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading state */
.gx-btn.is-loading {
  color: transparent;
  pointer-events: none;
}
.gx-btn.is-loading::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gx-spin 0.6s linear infinite;
  color: #fff;
}

@keyframes gx-spin {
  to { transform: rotate(360deg); }
}

/* Button group */
.gx-btn-group {
  display: inline-flex;
}
.gx-btn-group .gx-btn { border-radius: 0; }
.gx-btn-group .gx-btn:first-child { border-radius: var(--gx-btn-radius) 0 0 var(--gx-btn-radius); }
.gx-btn-group .gx-btn:last-child { border-radius: 0 var(--gx-btn-radius) var(--gx-btn-radius) 0; }
.gx-btn-group .gx-btn + .gx-btn { margin-left: -1px; }