/**
 * GAS Button System
 * =================
 * Fichier unique et autoritaire pour tous les boutons du plugin.
 * Dépend de gas-design-tokens.css
 *
 * Nomenclature BEM :
 *   .gas-button                        → base (taille md, solid primary par défaut)
 *   .gas-button--{color}               → solid   : primary | secondary | accent | success | danger | warning | info
 *   .gas-button--{color}-outline       → outline : même couleurs
 *   .gas-button--{color}-ghost         → ghost   : même couleurs
 *   .gas-button--icon                  → bouton icône seul (carré, sans bordure)
 *   .gas-button--link                  → apparence lien
 *   .gas-button--s/l/xl                → tailles (md = défaut)
 *   .gas-button--loading               → état chargement (spinner)
 *   :disabled / [disabled]             → état désactivé
 *
 * Usage :
 *   <button class="gas-button gas-button--primary">Valider</button>
 *   <button class="gas-button gas-button--danger-outline gas-button--s">Supprimer</button>
 *   <button class="gas-button gas-button--icon">👁️</button>
 *   <button class="gas-button gas-button--primary gas-button--loading">...</button>
 */

/* =============================================
   TOKENS BOUTONS SUPPLÉMENTAIRES
   (complète gas-design-tokens.css)
   ============================================= */

:root {
    /* Padding par taille */
    --gas-button-s-py:  4px;
    --gas-button-s-px:  10px;
    --gas-button-m-py:  7px;
    --gas-button-m-px:  16px;
    --gas-button-l-py:  10px;
    --gas-button-l-px:  22px;
    --gas-button-xl-py: 14px;
    --gas-button-xl-px: 30px;

    /* Font size par taille */
    --gas-button-s-fs:  var(--gas-text-xs);
    --gas-button-m-fs:  var(--gas-text-s);
    --gas-button-l-fs:  var(--gas-text-m);
    --gas-button-xl-fs: var(--gas-text-l);

    /* Radius */
    --gas-button-radius: var(--gas-radius-s);

    /* Transition */
    --gas-button-transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;

    /* Border width */
    --gas-button-border-width: 1.5px;

    /* Icon button size par taille */
    --gas-button-icon-s:  28px;
    --gas-button-icon-m:  34px;
    --gas-button-icon-l:  40px;
    --gas-button-icon-xl: 50px;

    /* Spinner */
    --gas-button-spinner-size: 1em;
}


/* =============================================
   BASE
   ============================================= */

.gas-button {
    /* Reset */
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    margin: 0;
    text-decoration: none;

    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    /* Taille par défaut (md) */
    padding: var(--gas-button-m-py) var(--gas-button-m-px);
    font-size: var(--gas-button-m-fs);

    /* Typographie */
    font-family: var(--gas-font-family);
    font-weight: var(--gas-weight-medium);
    line-height: 1.4;
    white-space: nowrap;

    /* Forme */
    border-radius: var(--gas-button-radius);
    cursor: pointer;

    /* Transition */
    transition: var(--gas-button-transition);

    /* Reset thèmes WordPress */
    min-width: 0;
    width: auto;
    box-sizing: border-box;
    vertical-align: middle;
}

.gas-button:focus {
    outline: none;
}

/* Liens <a> */
a.gas-button {
    text-decoration: none;
    color: inherit;
}
a.gas-button:hover {
    text-decoration: none;
}

/* Variantes solid : forcer la couleur du texte sur les <a> */
a.gas-button--primary,
a.gas-button--secondary,
a.gas-button--accent,
a.gas-button--success,
a.gas-button--danger,
a.gas-button--warning,
a.gas-button--info {
    color: var(--gas-white);
}
a.gas-button--neutral {
    color: var(--gas-neutral-800);
}
a.gas-button--primary:hover,
a.gas-button--secondary:hover,
a.gas-button--accent:hover,
a.gas-button--success:hover,
a.gas-button--danger:hover,
a.gas-button--warning:hover,
a.gas-button--info:hover {
    color: var(--gas-white);
}
a.gas-button--neutral:hover {
    color: var(--gas-neutral-800);
}


/* =============================================
   TAILLES
   ============================================= */

.gas-button--s {
    padding: var(--gas-button-s-py) var(--gas-button-s-px);
    font-size: var(--gas-button-s-fs);
    border-radius: var(--gas-button-radius);
}

/* md = défaut, pas de modificateur nécessaire */

.gas-button--l {
    padding: var(--gas-button-l-py) var(--gas-button-l-px);
    font-size: var(--gas-button-l-fs);
}

.gas-button--xl {
    padding: var(--gas-button-xl-py) var(--gas-button-xl-px);
    font-size: var(--gas-button-xl-fs);
}


/* =============================================
   SOLID — fond coloré, pas de bordure visible
   ============================================= */

/* Primary */
.gas-button--primary {
    background-color: var(--gas-primary);
    color: var(--gas-white);
    border: var(--gas-button-border-width) solid var(--gas-primary);
}
.gas-button--primary:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-primary-dark);
    border-color: var(--gas-primary-dark);
}

/* Secondary */
.gas-button--secondary {
    background-color: var(--gas-secondary);
    color: var(--gas-white);
    border: var(--gas-button-border-width) solid var(--gas-secondary);
}
.gas-button--secondary:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-secondary-dark);
    border-color: var(--gas-secondary-dark);
}

/* Accent */
.gas-button--accent {
    background-color: var(--gas-accent);
    color: var(--gas-white);
    border: var(--gas-button-border-width) solid var(--gas-accent);
}
.gas-button--accent:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-accent-dark);
    border-color: var(--gas-accent-dark);
}

/* Success */
.gas-button--success {
    background-color: var(--gas-success);
    color: var(--gas-white);
    border: var(--gas-button-border-width) solid var(--gas-success);
}
.gas-button--success:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-success-dark);
    border-color: var(--gas-success-dark);
}

/* Danger */
.gas-button--danger {
    background-color: var(--gas-danger);
    color: var(--gas-white);
    border: var(--gas-button-border-width) solid var(--gas-danger);
}
.gas-button--danger:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-danger-dark);
    border-color: var(--gas-danger-dark);
}

/* Warning */
.gas-button--warning {
    background-color: var(--gas-warning);
    color: var(--gas-white);
    border: var(--gas-button-border-width) solid var(--gas-warning);
}
.gas-button--warning:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-warning-dark);
    border-color: var(--gas-warning-dark);
}

/* Info */
.gas-button--info {
    background-color: var(--gas-info);
    color: var(--gas-white);
    border: var(--gas-button-border-width) solid var(--gas-info);
}
.gas-button--info:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-info-hover);
    border-color: var(--gas-info-hover);
}

/* Neutral (gris, actions secondaires) */
.gas-button--neutral {
    background-color: var(--gas-neutral-200);
    color: var(--gas-neutral-800);
    border: var(--gas-button-border-width) solid var(--gas-neutral-200);
}
.gas-button--neutral:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-neutral-300);
    border-color: var(--gas-neutral-300);
}


/* =============================================
   OUTLINE — cadre visible, fond transparent
   ============================================= */

/* Primary */
.gas-button--primary-outline {
    background-color: transparent;
    color: var(--gas-primary);
    border: var(--gas-button-border-width) solid var(--gas-primary);
}
.gas-button--primary-outline:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-primary-ultra-light);
}

/* Secondary */
.gas-button--secondary-outline {
    background-color: transparent;
    color: var(--gas-secondary);
    border: var(--gas-button-border-width) solid var(--gas-secondary);
}
.gas-button--secondary-outline:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-secondary-ultra-light);
}

/* Accent */
.gas-button--accent-outline {
    background-color: transparent;
    color: var(--gas-accent);
    border: var(--gas-button-border-width) solid var(--gas-accent);
}
.gas-button--accent-outline:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-accent-ultra-light);
}

/* Success */
.gas-button--success-outline {
    background-color: transparent;
    color: var(--gas-success-dark);
    border: var(--gas-button-border-width) solid var(--gas-success);
}
.gas-button--success-outline:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-success-light);
}

/* Danger */
.gas-button--danger-outline {
    background-color: transparent;
    color: var(--gas-danger);
    border: var(--gas-button-border-width) solid var(--gas-danger);
}
.gas-button--danger-outline:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-danger-light);
}

/* Warning */
.gas-button--warning-outline {
    background-color: transparent;
    color: var(--gas-warning-dark);
    border: var(--gas-button-border-width) solid var(--gas-warning);
}
.gas-button--warning-outline:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-warning-light);
}

/* Info */
.gas-button--info-outline {
    background-color: transparent;
    color: var(--gas-info-dark);
    border: var(--gas-button-border-width) solid var(--gas-info);
}
.gas-button--info-outline:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-info-light);
}

/* Neutral */
.gas-button--neutral-outline {
    background-color: transparent;
    color: var(--gas-neutral-700);
    border: var(--gas-button-border-width) solid var(--gas-neutral-400);
}
.gas-button--neutral-outline:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-neutral-100);
    border-color: var(--gas-neutral-600);
}


/* =============================================
   GHOST — pas de cadre, fond coloré léger au hover
   ============================================= */

/* Primary */
.gas-button--primary-ghost {
    background-color: transparent;
    color: var(--gas-primary);
    border: var(--gas-button-border-width) solid transparent;
}
.gas-button--primary-ghost:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-primary-ultra-light);
    color: var(--gas-primary-dark);
}

/* Secondary */
.gas-button--secondary-ghost {
    background-color: transparent;
    color: var(--gas-secondary);
    border: var(--gas-button-border-width) solid transparent;
}
.gas-button--secondary-ghost:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-secondary-ultra-light);
    color: var(--gas-secondary-dark);
}

/* Accent */
.gas-button--accent-ghost {
    background-color: transparent;
    color: var(--gas-accent);
    border: var(--gas-button-border-width) solid transparent;
}
.gas-button--accent-ghost:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-accent-ultra-light);
    color: var(--gas-accent-dark);
}

/* Success */
.gas-button--success-ghost {
    background-color: transparent;
    color: var(--gas-success-dark);
    border: var(--gas-button-border-width) solid transparent;
}
.gas-button--success-ghost:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-success-light);
}

/* Danger */
.gas-button--danger-ghost {
    background-color: transparent;
    color: var(--gas-danger);
    border: var(--gas-button-border-width) solid transparent;
}
.gas-button--danger-ghost:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-danger-light);
    color: var(--gas-danger-dark);
}

/* Warning */
.gas-button--warning-ghost {
    background-color: transparent;
    color: var(--gas-warning-dark);
    border: var(--gas-button-border-width) solid transparent;
}
.gas-button--warning-ghost:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-warning-light);
}

/* Info */
.gas-button--info-ghost {
    background-color: transparent;
    color: var(--gas-info-dark);
    border: var(--gas-button-border-width) solid transparent;
}
.gas-button--info-ghost:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-info-light);
}

/* Neutral */
.gas-button--neutral-ghost {
    background-color: transparent;
    color: var(--gas-neutral-600);
    border: var(--gas-button-border-width) solid transparent;
}
.gas-button--neutral-ghost:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-neutral-100);
    color: var(--gas-neutral-800);
}


/* =============================================
   ICON — bouton icône seul, carré, sans bordure
   Usage : <button class="gas-button gas-button--icon">👁️</button>
   Combiner avec une couleur ghost pour la teinte :
   <button class="gas-button gas-button--icon gas-button--danger-ghost">🗑️</button>
   ============================================= */

.gas-button--icon {
    padding: 0;
    width: var(--gas-button-icon-m);
    height: var(--gas-button-icon-m);
    border: none;
    background-color: transparent;
    color: var(--gas-neutral-600);
    border-radius: var(--gas-button-radius);
    font-size: 1.1em;
    flex-shrink: 0;
}
.gas-button--icon:hover:not(:disabled):not([disabled]) {
    background-color: var(--gas-neutral-100);
    color: var(--gas-neutral-900);
}

/* Tailles icon */
.gas-button--icon.gas-button--s {
    width: var(--gas-button-icon-s);
    height: var(--gas-button-icon-s);
    font-size: 0.95em;
}
.gas-button--icon.gas-button--l {
    width: var(--gas-button-icon-l);
    height: var(--gas-button-icon-l);
    font-size: 1.25em;
}
.gas-button--icon.gas-button--xl {
    width: var(--gas-button-icon-xl);
    height: var(--gas-button-icon-xl);
    font-size: 1.5em;
}

/* Icon + variante couleur ghost */
.gas-button--icon.gas-button--primary-ghost  { color: var(--gas-primary); }
.gas-button--icon.gas-button--danger-ghost   { color: var(--gas-danger); }
.gas-button--icon.gas-button--success-ghost  { color: var(--gas-success-dark); }
.gas-button--icon.gas-button--warning-ghost  { color: var(--gas-warning-dark); }
.gas-button--icon.gas-button--info-ghost     { color: var(--gas-info-dark); }
.gas-button--icon.gas-button--accent-ghost   { color: var(--gas-accent); }


/* =============================================
   LINK — ressemble à un lien texte
   ============================================= */

.gas-button--link {
    background-color: transparent;
    color: var(--gas-text-color-link);
    border: var(--gas-button-border-width) solid transparent;
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gas-button--link:hover:not(:disabled):not([disabled]) {
    color: var(--gas-text-color-link-hover);
    text-decoration-thickness: 2px;
}


/* =============================================
   UTILITAIRES
   ============================================= */

/* Pleine largeur */
.gas-button--full {
    width: 100%;
    justify-content: center;
}

/* Allow text wrapping (for buttons in tight grids) */
.gas-button--wrap {
    white-space: normal;
    text-align: center;
}

/* Groupe de boutons côte à côte */
.gas-button-group {
    display: inline-flex;
    align-items: center;
    gap: var(--gas-space-s);
    flex-wrap: wrap;
}


/* =============================================
   ÉTAT : DISABLED
   ============================================= */

.gas-button:disabled,
.gas-button[disabled],
.gas-button--disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}


/* =============================================
   ÉTAT : LOADING
   ============================================= */

.gas-button--loading {
    cursor: wait;
    pointer-events: none;
    position: relative;
    color: transparent !important;
}

.gas-button--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: var(--gas-button-spinner-size);
    height: var(--gas-button-spinner-size);
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: gas-button-spin 0.6s linear infinite;
    color: var(--gas-white);
}

/* Pour les variantes claires (outline, ghost) le spinner est foncé */
.gas-button--primary-outline.gas-button--loading::after,
.gas-button--secondary-outline.gas-button--loading::after,
.gas-button--accent-outline.gas-button--loading::after,
.gas-button--neutral-outline.gas-button--loading::after,
.gas-button--primary-ghost.gas-button--loading::after,
.gas-button--secondary-ghost.gas-button--loading::after,
.gas-button--accent-ghost.gas-button--loading::after,
.gas-button--neutral-ghost.gas-button--loading::after,
.gas-button--link.gas-button--loading::after {
    color: var(--gas-primary);
}

.gas-button--danger-outline.gas-button--loading::after,
.gas-button--danger-ghost.gas-button--loading::after  { color: var(--gas-danger); }
.gas-button--success-outline.gas-button--loading::after,
.gas-button--success-ghost.gas-button--loading::after  { color: var(--gas-success); }
.gas-button--warning-outline.gas-button--loading::after,
.gas-button--warning-ghost.gas-button--loading::after  { color: var(--gas-warning); }
.gas-button--info-outline.gas-button--loading::after,
.gas-button--info-ghost.gas-button--loading::after     { color: var(--gas-info); }

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