/**
 * Fichier  : /menus/main/assets/css/drawer.css
 * Fonction : style du menu coulissant (seulement sur mobiles)
 */


/* ==================================================
   DESKTOP
================================================== */

@media screen and (min-width: 1024px) {

    .drawer {
        display: none;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media screen and (max-width: 1024px) {


    /* ==================================================
       DRAWER
    ================================================== */

    .drawer {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
    }

    .drawer {
        width: auto;
        height: 100svh;
    }

    .drawer {
        box-sizing: border-box;
    }

    .drawer {
        padding: clamp(8em, 16vh, 11em) clamp(2em, 7vw, 4em) 3em;
    }

    .drawer {
        background: var(--main-background);
        box-shadow: 0 0 28px #000;
    }


    /* ==================================================
       NAVIGATION
    ================================================== */

    .drawer ul.inner {
        width: 100%;
        max-width: 620px;
    }

    .drawer ul.inner {
        margin: 0 auto;
    }

    .drawer ul.inner {
        padding: 0;
    }

    .drawer ul.inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 2em;
    }


    /* ==================================================
       ITEMS
    ================================================== */

    .drawer ul.inner li {
        list-style: none;
    }


    /* ==================================================
       MAIN LINKS
    ================================================== */

    .drawer .drawer__main-link > a {
        display: inline-flex;
        align-items: center;
    }

    .drawer .drawer__main-link > a {
        font-family: 'bold-font';
        font-size: clamp(22px, 5vw, 30px);
        font-weight: 400;
        line-height: 1;
        text-transform: uppercase;
        color: var(--color-white);
    }


    /* ==================================================
       BUSINESS
    ================================================== */

    .drawer .drawer__business {
        padding: 2em 0;
    }

    .drawer .drawer__business {
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
    }


    /* ==================================================
       BUSINESS TITLE
    ================================================== */

    .drawer .drawer__business-title {
        margin-bottom: 1.7em;
    }

    .drawer .drawer__business-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .6em;
    }

    .drawer .drawer__business-title {
        text-decoration: none;
    }

    .drawer .drawer__business-title > span {
        font-family: 'bold-font';
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: .16em;
        color: var(--color-primary);
    }

    .drawer .drawer__business-title > strong {
        font-family: 'bold-font';
        font-size: clamp(28px, 7vw, 42px);
        font-weight: 400;
        line-height: 1;
        text-transform: uppercase;
        color: var(--color-white);
    }


    /* ==================================================
       BUSINESS LINKS
    ================================================== */

    .drawer .drawer__business-links {
        margin: 0;
    }

    .drawer .drawer__business-links {
        padding: 0;
    }

    .drawer .drawer__business-links {
        border-top: 1px solid var(--color-border);
    }

    .drawer .drawer__business-links li {
        margin: 0;
    }

    .drawer .drawer__business-links li {
        padding: 0;
    }

    .drawer .drawer__business-links li {
        border-bottom: 1px solid var(--color-border);
    }

    .drawer .drawer__business-links li:last-child {
        border-bottom: 0;
    }


    /* ==================================================
       BUSINESS LINK
    ================================================== */

    .drawer .drawer__business-links a {
        min-height: 64px;
    }

    .drawer .drawer__business-links a {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) auto;
        align-items: center;
        gap: 1em;
    }

    .drawer .drawer__business-links a {
        text-decoration: none;
        color: var(--color-white);
    }

    .drawer .drawer__business-links a {
        transition: padding var(--transition-soft), background var(--transition-soft);
    }

    .drawer .drawer__business-links a > span {
        font-family: 'bold-font';
        font-size: 8px;
        color: var(--color-primary);
    }

    .drawer .drawer__business-links a > strong {
        font-family: 'content-font';
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--color-white);
    }

    .drawer .drawer__business-links a > i {
        font-size: 18px;
        font-style: normal;
        color: var(--color-text-muted);
    }

    .drawer .drawer__business-links a > i {
        transition: transform var(--transition-soft), color var(--transition-soft);
    }


    /* ==================================================
       BUSINESS LINK HOVER
    ================================================== */

    @media (hover: hover) and (pointer: fine) {

        .drawer .drawer__business-links a:hover {
            padding: 0 1em;
        }

    .drawer .drawer__business-links a:hover {
            background: var(--glass-background-soft);
        }

        .drawer .drawer__business-links a:hover > i {
            color: var(--color-primary);
        }

    .drawer .drawer__business-links a:hover > i {
            transform: translateX(4px);
        }

    }


    /* ==================================================
       LOGO
    ================================================== */

    .drawer > img {
        display: none;
    }

}


/* ==================================================
   SMALL MOBILE
================================================== */

@media screen and (max-width: 600px) {

    .drawer {
        padding: 8em 1.5em 2em;
    }

    .drawer ul.inner {
        gap: 1.7em;
    }

    .drawer .drawer__business {
        padding: 1.7em 0;
    }

    .drawer .drawer__business-title {
        margin-bottom: 1.3em;
    }

    .drawer .drawer__business-links a {
        min-height: 45px;
    }

}


/* ==================================================
   ANIMATIONS
================================================== */

.drawerIn {
    animation: drawerIn .35s cubic-bezier(.22, 1, .36, 1) forwards;
}

.drawerOut {
    animation: drawerOut .25s ease forwards;
}


/* ==================================================
   DRAWER IN
================================================== */

@keyframes drawerIn {

    from {
        opacity: 0;
        transform: translateY(-16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ==================================================
   DRAWER OUT
================================================== */

@keyframes drawerOut {

    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-12px);
    }

}