/* =========================================================
   xdirecttchat
   Boutons
   ========================================================= */


/* =========================================================
   Base
   ========================================================= */

.bouton {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 40px;

    padding:
        9px 16px;

    border:
        1px solid transparent;

    border-radius:
        var(--radius-small);

    font-size: 14px;

    font-weight: 600;

    line-height: 1.2;

    text-align: center;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}


.bouton:hover {

    transform:
        translateY(-1px);
}


.bouton:active {

    transform:
        translateY(0);
}


/* =========================================================
   Bouton principal
   ========================================================= */

.bouton-bleu {

    color:
        #ffffff;

    background:
        var(--color-primary);

    border-color:
        var(--color-primary);

    box-shadow:
        var(--shadow-small);
}


.bouton-bleu:hover {

    color:
        #ffffff;

    background:
        var(--color-primary-dark);

    border-color:
        var(--color-primary-dark);

    box-shadow:
        var(--shadow);
}


/* =========================================================
   Bouton gris
   ========================================================= */

.bouton-gris {

    color:
        var(--color-text-secondary);

    background:
        var(--color-surface);

    border-color:
        var(--color-border);
}


.bouton-gris:hover {

    color:
        var(--color-text);

    background:
        var(--color-surface-soft);

    border-color:
        #d0d5dd;
}


/* =========================================================
   Bouton vert
   ========================================================= */

.bouton-vert {

    color:
        #ffffff;

    background:
        var(--color-success);

    border-color:
        var(--color-success);
}


.bouton-vert:hover {

    color:
        #ffffff;

    background:
        #15803d;

    border-color:
        #15803d;
}


/* =========================================================
   Bouton rouge
   ========================================================= */

.bouton-rouge {

    color:
        #ffffff;

    background:
        var(--color-danger);

    border-color:
        var(--color-danger);
}


.bouton-rouge:hover {

    color:
        #ffffff;

    background:
        #b91c1c;

    border-color:
        #b91c1c;
}


/* =========================================================
   Bouton orange
   ========================================================= */

.bouton-orange {

    color:
        #ffffff;

    background:
        var(--color-warning);

    border-color:
        var(--color-warning);
}


.bouton-orange:hover {

    color:
        #ffffff;

    background:
        #c2410c;

    border-color:
        #c2410c;
}


/* =========================================================
   Bouton désactivé
   ========================================================= */

.bouton:disabled,
.bouton.disabled {

    opacity:
        0.55;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;
}


/* =========================================================
   Bouton pleine largeur
   ========================================================= */

.bouton-full {

    width:
        100%;
}


/* =========================================================
   Groupe de boutons
   ========================================================= */

.boutons {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    flex-wrap:
        wrap;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 600px) {

    .bouton {

        min-height:
            40px;

        padding:
            9px 13px;

        font-size:
            13px;
    }

}