﻿menu {
    border-right: var(--border-thickness) solid var(--light-gray);
    font-family: var(--limseo-text-font-family), sans-serif;
    --elevation: 8;
    /* flex */
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: stretch;
    /* position */
    top: 0;
    z-index: 20;
    height: 100vh;
    position: sticky;
/*    align-self: stretch;*/
    grid-area: menu;
    /* list */
    padding: 0;
    margin: 0;
    /* transition */
/*    width: 10.5rem;*/
    transition: width .4s ease;
}
    menu.logged-in { width: 10.5rem; }

    menu.tiny { width: 3.05rem; }
        menu.tiny > ul > li > button > .button-label { font-size: 0; }
        menu.tiny > ul > li > img { margin-left: 8.54px; }

    menu button > .button-icon { font-size: 1.1rem; }

    menu > ul > li > button .button-label {
        font-size: .9rem;
        font-weight: 500;
        white-space: nowrap;
        text-transform: uppercase;
        transition: font-size .4s ease;
    }

    menu > button.lms-btn.reduce {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(50%, -50%);
        border: var(--border);
    }

    menu > ul {
        list-style-type: none;
        padding: 1em 0;
    }
        menu > ul > li {
            margin: 0;
            overflow: hidden;
        }

            menu > ul > li.logout {
                margin-bottom: 1rem;
                position: absolute;
                width: 100%;
                bottom: 0;
                right: 0;
            }

            menu > ul > li > img {
                max-height: 2rem;
                cursor: pointer;
                /* centering */
                margin-left: 18.735px;
                transition: margin-left .4s ease;
            }

            menu > ul > li > button,
            menu > ul > li > button.lms-btn {
                margin-block: .25rem 0;
                padding-inline: .5rem 1rem;
                justify-content: left;
                border-radius: 0;
            }

            menu > ul > li > button {
                cursor: pointer;
                border: none;
                height: 2.25rem;
                width: 100%;
                /* ce quil manque tant qu'ils ne sont pas "lms-btn" */
                font: var(--limseo-title-font-family);
/*                color: var(--limseo-white);*/
/*                background-color: var(--limseo-lblue);*/
                /* mask */
                clip-path: polygon(
                    0% 0%,
                    calc(100% - .75rem) 0%,
                    100% 50%,
                    calc(100% - .75rem) 100%,
                    0% 100%
                );
            }
                menu > ul > li > button:hover {
                    background-color: var(--limseo-light-lblue);
                }

