/*
 * D11 - Boutons communs
 *
 * Tous les boutons réutilisables du site sont définis ici.
 */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 40px;
  padding: var(--space-xs) var(--space-md);

  gap: var(--space-xs);

  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);

  color: var(--color-text);
  background: var(--color-surface-raised);

  font-weight: var(--font-weight-medium);
  line-height: 1;

  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;

  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.button:hover {
  color: var(--color-text);
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong);
}

.button:active {
  transform: translateY(1px);
}

.button--primary {
  color: var(--color-primary-text);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.button--primary:hover {
  color: var(--color-primary-text);
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.button--primary:active {
  background: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

.button--danger {
  color: var(--color-text);
  background: var(--color-danger);
  border-color: var(--color-danger);
}

.button--small {
  min-height: 32px;
  padding: var(--space-2xs) var(--space-sm);

  font-size: var(--font-size-sm);
}

.button--icon {
  width: 40px;
  min-width: 40px;
  padding: 0;
}

.button--full {
  width: 100%;
}

.button:disabled,
.button[aria-disabled="true"] {
  color: var(--color-text-disabled);
  background: var(--color-surface);
  border-color: var(--color-border);

  opacity: 0.6;
  cursor: not-allowed;

  transform: none;
}