/*
 * SNCF Design System - Button Library
 * Généré à partir de l'ancien button.scss
 */
:root {
  --button-padding: 9px 16px;
  --button-border-radius: 4px;
  --button-font-weight: 400;
  --button-font-size: 16px;
  --button-width: fit-content;
}

/* Cibler uniquement le front-office en excluant l'admin */
body:not(.wp-admin) .button,
body:not(.wp-admin) button,
body:not(.wp-admin) a.button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--button-padding);
  border-radius: var(--button-border-radius);
  text-shadow: none;
  text-decoration: none !important;
  font-weight: var(--button-font-weight);
  font-size: var(--button-font-size);
  width: var(--button-width);
  border: none;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border 0.2s;
}

body:not(.wp-admin) .button.disabled,
body:not(.wp-admin) button.disabled,
body:not(.wp-admin) a.button.disabled,
body:not(.wp-admin) button:disabled {
  background-color: var(--wp--preset--color--surface-200) !important;
  color: var(--wp--preset--color--surface-500) !important;
  cursor: not-allowed;
  border: none;
}

body:not(.wp-admin) .button.fullwidth,
body:not(.wp-admin) button.fullwidth,
body:not(.wp-admin) a.button.fullwidth {
  width: -webkit-fill-available; /* Pour compatibilité avec l'ancien SCSS */
  width: 100%; /* Pour une meilleure compatibilité cross-browser */
  display: flex;
  justify-content: center;
}

body:not(.wp-admin) .button.fullwidth.space-between,
body:not(.wp-admin) button.fullwidth.space-between,
body:not(.wp-admin) a.button.fullwidth.space-between {
  justify-content: space-between;
}

body:not(.wp-admin) .button.small,
body:not(.wp-admin) button.small,
body:not(.wp-admin) a.button.small {
  padding: 9px 12px;
  font-size: 14px;
}

body:not(.wp-admin) .button.big,
body:not(.wp-admin) button.big,
body:not(.wp-admin) a.button.big {
  padding: 13px 24px;
  font-size: 16px;
}

body:not(.wp-admin) .button.ghost,
body:not(.wp-admin) button.ghost,
body:not(.wp-admin) a.button.ghost {
  background: transparent;
  border: none;
}

body:not(.wp-admin) .button.outline,
body:not(.wp-admin) button.outline,
body:not(.wp-admin) a.button.outline {
  background: transparent;
  border: 1px solid var(--wp--preset--color--dark, #222);
  color: var(--wp--preset--color--dark, #222);
}

body:not(.wp-admin) .button.primary,
body:not(.wp-admin) button.primary,
body:not(.wp-admin) a.button.primary {
  background: var(--wp--preset--color--primary, #0055a4);
  color: var(--wp--preset--color--on-primary, #fff);
}

body:not(.wp-admin) .button.secondary,
body:not(.wp-admin) button.secondary,
body:not(.wp-admin) a.button.secondary {
  background: var(--wp--preset--color--secondary, #e2001a);
  color: var(--wp--preset--color--on-secondary, #fff);
}

body:not(.wp-admin) .button.accent,
body:not(.wp-admin) button.accent,
body:not(.wp-admin) a.button.accent {
  background: var(--wp--preset--color--accent, #ffb612);
  color: var(--wp--preset--color--on-accent, #222);
}

body:not(.wp-admin) .button.outline.text-color-primary,
body:not(.wp-admin) button.outline.text-color-primary,
body:not(.wp-admin) a.button.outline.text-color-primary {
  border: 1px solid var(--wp--preset--color--primary, #0055a4);
  color: var(--wp--preset--color--primary, #0055a4);
}

body:not(.wp-admin) .button.outline.text-color-secondary,
body:not(.wp-admin) button.outline.text-color-secondary,
body:not(.wp-admin) a.button.outline.text-color-secondary {
  border: 1px solid var(--wp--preset--color--secondary, #e2001a);
  color: var(--wp--preset--color--secondary, #e2001a);
}

body:not(.wp-admin) .button.outline.text-color-accent,
body:not(.wp-admin) button.outline.text-color-accent,
body:not(.wp-admin) a.button.outline.text-color-accent {
  border: 1px solid var(--wp--preset--color--accent, #ffb612);
  color: var(--wp--preset--color--accent, #ffb612);
}

body:not(.wp-admin) .button.primary:hover,
body:not(.wp-admin) button.primary:hover,
body:not(.wp-admin) a.button.primary:hover {
  background: var(--wp--preset--color--primary-hover, #003366);
  color: var(--wp--preset--color--on-primary-hover, #fff);
}

body:not(.wp-admin) .button.secondary:hover,
body:not(.wp-admin) button.secondary:hover,
body:not(.wp-admin) a.button.secondary:hover {
  background: var(--wp--preset--color--secondary-hover, #b80013);
  color: var(--wp--preset--color--on-secondary-hover, #fff);
}

body:not(.wp-admin) .button.accent:hover,
body:not(.wp-admin) button.accent:hover,
body:not(.wp-admin) a.button.accent:hover {
  background: var(--wp--preset--color--accent-hover, #ffd700);
  color: var(--wp--preset--color--on-accent-hover, #222);
}

body:not(.wp-admin) .button.outline.text-color-primary:hover,
body:not(.wp-admin) button.outline.text-color-primary:hover,
body:not(.wp-admin) a.button.outline.text-color-primary:hover {
  background: rgba(0, 85, 164, 0.05);
  border: 2px solid var(--wp--preset--color--primary-hover, #003366);
  color: var(--wp--preset--color--primary-hover, #003366);
}

body:not(.wp-admin) .button.outline.text-color-secondary:hover,
body:not(.wp-admin) button.outline.text-color-secondary:hover,
body:not(.wp-admin) a.button.outline.text-color-secondary:hover {
  background: rgba(226, 0, 26, 0.05);
  border: 2px solid var(--wp--preset--color--secondary-hover, #b80013);
  color: var(--wp--preset--color--secondary-hover, #b80013);
}

body:not(.wp-admin) .button.outline.text-color-accent:hover,
body:not(.wp-admin) button.outline.text-color-accent:hover,
body:not(.wp-admin) a.button.outline.text-color-accent:hover {
  background: rgba(255, 182, 18, 0.05);
  border: 2px solid var(--wp--preset--color--accent-hover, #ffd700);
  color: var(--wp--preset--color--accent-hover, #ffd700);
}

body:not(.wp-admin) .button.ghost:hover,
body:not(.wp-admin) button.ghost:hover,
body:not(.wp-admin) a.button.ghost:hover {
  background: var(--wp--preset--color--neutral, #f4f5f6);
  color: var(--wp--preset--color--on-neutral, #222);
}

body:not(.wp-admin) .button:focus,
body:not(.wp-admin) button:focus,
body:not(.wp-admin) a.button:focus {
  outline: 2px solid var(--wp--preset--color--primary, #0055a4);
  outline-offset: 2px;
}

body:not(.wp-admin) .button:active,
body:not(.wp-admin) button:active,
body:not(.wp-admin) a.button:active {
  filter: brightness(0.95);
}