/* =================== BUTTON ================================================================ */

.button-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
}

button.lms-btn {
    cursor: pointer;
    overflow: hidden;
    padding: 5px 12px;
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--superlight-gray);
    gap: .2rem;
    /* texte */
    font: var(--limseo-title-font-family);
    font-size: 1rem;
    color: var(--limseo-black);
    /* animation */
    transition-duration: 0.2s;
    transition-property: background, border;
    transition-timing-function: ease;
    /* pour que le contenu soit bien aligné: */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /* inutile? */
    vertical-align: middle;
}

    button.lms-btn:disabled {
        cursor: auto;
        background-color: var(--light-gray);
    }

    button.lms-btn:hover {
        background-color: var(--light-gray);
    }

    button.lms-btn.special {
        color: var(--limseo-white);
        background-color: var(--limseo-lblue);
    }
        button.lms-btn.special:hover {
            background-color: var(--limseo-light-lblue);
        }

    button.lms-btn.implicite {
        background-color: transparent;
    }
        button.lms-btn.implicite:hover {
            background-color: var(--superlight-gray);
        }

        button.lms-btn.implicite.special {
            color: var(--limseo-lblue);
        }
            button.lms-btn.implicite.special:hover {
                background-color: var(--limseo-superlight-lblue);
            }

    button.lms-btn.outlined {
        border: var(--border);
    }

        button.lms-btn.outlined.implicite:hover {
            background-color: var(--superlight-gray);
        }

        button.lms-btn.outlined.implicite.special {
            border-color: var(--limseo-light-lblue);
        }

            button.lms-btn.outlined.implicite.special:hover {
                background-color: var(--limseo-superlight-lblue);
            }

/* =================== FAKE SWITCH BUTTON ==================================================== */

fieldset.fake-switch-button {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    text-align: center; /* to change the centering of the fake switch inside the fieldset */
}
    fieldset.fake-switch-button > .radio-group {
        display: inline-flex;
        position: relative;
        border-radius: var(--border-radius);
        background-color: var(--superlight-gray);
        user-select: none;
    }
        fieldset.fake-switch-button > .radio-group > .radio-card {
            padding-inline: 1rem;
            border: var(--border);
            border-radius: var(--border-radius);
            cursor: pointer;
            border: none;
            /* animation */
            transition-duration: 0.2s;
            transition-property: background, color;
            transition-timing-function: ease;
        }
            fieldset.fake-switch-button > .radio-group > .radio-card input[type="radio"] {
                position: absolute;
                opacity: 0;
                height: 0;
                width: 0;
            }

            fieldset.fake-switch-button > .radio-group > .radio-card:has( input[type="radio"]:checked ) {
                background-color: var(--limseo-lblue);
                color: var(--limseo-white);
            }
            fieldset.fake-switch-button > .radio-group > .radio-card:has( input[type="radio"]:checked ):hover {
                background-color: var(--limseo-light-lblue);
            }
            fieldset.fake-switch-button > .radio-group > .radio-card:has( input[type="radio"]:not(:checked) ):hover {
                background-color: var(--light-gray);
            }