@charset "UTF-8";

/* ============================================ */
/* =============== Mobile Menu ================ */
/* ============================================ */

.mobile__menu--button {
    height: 3.5rem;
    width: 3.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile__menu--button span,
.mobile__menu--button span::before,
.mobile__menu--button span::after {
    content: '';
    position: absolute;
    width: 2.75rem;
    height: 0.25rem;         
    background: var(--cl-complementary); 
    transform: rotate(-180deg);
    transition: 500ms ease-in-out;
}

.mobile__menu--button span::before {
    margin-top: -0.75rem;
}

.mobile__menu--button span::after {
    margin-top: 0.75rem;
}

.mobile__menu--button:hover span,
.mobile__menu--button:hover span::before,
.mobile__menu--button:hover span::after {
    background: var(--cl-secondary); 
}

.mobile__menu--button.mobile__menu--opened span {
    background: transparent;
}

.mobile__menu--button.mobile__menu--opened span::before {
    margin-top: 0;
    transform: rotate(-45deg);
    background: var(--cl-secondary);
}

.mobile__menu--button.mobile__menu--opened span::after {
    background: var(--cl-secondary);
    transform: rotate(45deg);
    margin-top: 0;
}