/*
|--------------------------------------------------------------------------
| Menu trigger
|--------------------------------------------------------------------------
*/
#menu-trigger {
    --line-width: 25px;
    --line-thickness: 2px;
}


/* hamburger menu */
#menu-trigger {
    display: inline-block;
    padding: 16px;
    width: max-content;
    cursor: pointer;
    position: relative;
    bottom: -5px !important;
    left: 16px;
    z-index: 4;
}


/*
|--------------------------------------------------------------------------
| Menu bars
|--------------------------------------------------------------------------
*/
.menu-trigger-line {
    width: 100%;
    height: 2px;
    background: var(--e-global-color-primary);
    transition: 0.1s ease-in-out;
    width: var(--line-width);
}

#menu-bar1 {
    margin-bottom: 4px;
}

/* Open state */
body.overlay-menu-open #menu-bar1 {
    transform: rotate(-45deg) translate(-1px, 4px);
}
body.overlay-menu-open #menu-bar2 {
    transform: rotate(45deg) translate(0px, -3px);
}


/*
|--------------------------------------------------------------------------
| Overlay menu
|--------------------------------------------------------------------------
*/
.overlay-menu {
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0px;
    width: 100%;
    z-index: 3;
    transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}

body:not(.overlay-menu-open) .overlay-menu {
    transform: translateX(calc(100%));
}


/*
|--------------------------------------------------------------------------
| Overlay menu background
|--------------------------------------------------------------------------
*/
.overlay-menu-background {
    background: rgba(255,255,255,.9);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity .3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.overlay-menu-open .overlay-menu-background {
    opacity: 1;
}

body:not(.overlay-menu-open) .overlay-menu-background {
    pointer-events: none;
    opacity: 0;
}



/* body:not(.overlay-menu-open) .overlay-menu {
    transform: translateX(calc(100%));
} */