/***************** Container boutons ***************/
.modu-head-bout {
    display: flex;
    flex-direction: row;
    align-items: center;

    border-radius: 4px;
}

/*************** Style boutons *************/
.modu-bout {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    margin-right: 4px;

    font-size: 12px;
    font-weight: 500;
    background-color: #eee;
    color: var(--them-fonc);
}

/* Bouton vertical */
.modu-head-bout-vert > button,
.bout-vert {
    margin-right: 0px;
    margin-bottom: 4px;
}

/* Bouton dimensions XL */
.bout-xtra-larg {
    min-width: 200px;
    height: 22px;
    border-radius: 4px;
}

/* Bouton dimensions L */
.bout-larg {
    min-width: 80px;
    height: 22px;
    border-radius: 4px;
}

/* Bouton dimensions S */
.bout-peti {
    width: 22px;
    height: 22px;
    border-radius: 4px;
}

/*********************** Style contenu boutons **************/
/* Bouton icône : 14px */
.modu-bout > i {
    font-size: 14px;
}

/* Bouton text : fill */
.modu-bout > span,
.modu-bout > div {
    flex-grow: 1;
}

/*********************** Etats boutons **********************/
/* Bouton focus : aucun contour */
.modu-bout:focus {
    outline: none;
}

/* Bouton désactivé */
.modu-bout.disabled {
    opacity: 25%;
    cursor: not-allowed;
    &:hover {
        background-color: #eee;
        color: var(--them-fonc);
    }
}

/* Bouton hover */
.modu-bout:hover {
    color: #fff;
    background-color: var(--noti-fonc);
}

/* Bouton actif */
.modu-bout.active {
    color: #fff;
    background-color: var(--noti-fonc);
}

/* Bouton actif suppression */
.modu-bout.active.suppr {
    background-color: red;
}

/* Puce de notif dans Boutons */
.modu-bout > .gene-puce-noti {
    bottom: -4px;
    right: -4px;
    font-weight: 600;
    font-size: 9px;
}

.modu-bout:hover > .gene-puce-noti {
    display: none;
}