/* Global button styles — usable on any <button class="btn"> element.
   Loaded in index.html via components.css or directly. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.15s ease,
    opacity 0.15s ease;

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

/* Ensure link-based buttons keep their color in all states */
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:active {
  text-decoration: none;
}

a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:active {
  color: var(--color-text-inverse);
}

a.btn-secondary,
a.btn-secondary:link,
a.btn-secondary:visited,
a.btn-secondary:hover,
a.btn-secondary:active {
  color: var(--color-text);
}

.btn-primary {
  background: var(--color-btn-primary-bg);
  color: var(--color-text-inverse);

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

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);

  &:hover:not(:disabled) {
    background: var(--color-bg);
  }
}

.btn-ghost {
  background: transparent;
  color: var(--color-primary);

  &:hover:not(:disabled) {
    background: var(--color-bg);
  }
}

.btn-success {
  background: var(--color-success);
  color: var(--color-text-inverse);

  &:hover:not(:disabled) {
    background: var(--color-success-hover);
  }
}

.btn-warning {
  background: var(--color-warning);
  color: var(--color-text-inverse);

  &:hover:not(:disabled) {
    background: var(--color-warning-hover);
  }
}

.btn-danger {
  background: var(--color-danger);
  color: var(--color-text-inverse);

  &:hover:not(:disabled) {
    background: var(--color-danger-hover);
  }
}

.btn-info {
  background: var(--color-info);
  color: var(--color-text-inverse);

  &:hover:not(:disabled) {
    background: var(--color-info-hover);
  }
}