/* =========================================================
   GLOBAL HAMBURGER
========================================================= */

.hamburger_menu {
    display: none;
    position: fixed;
    top: var(--space_3);
    right: var(--space_3);
    width: var(--space_8);
    height: var(--space_6);
    flex-direction: column;
    justify-content: center;
    gap: var(--space_1_5);
    cursor: pointer;
    z-index: 500;
}

    /* tri črte */

    .hamburger_menu::before,
    .hamburger_menu input,
    .hamburger_menu::after {
        content: "";
        width: var(--space_8);
        height: var(--space_0_75);
        background: var(--color_LunarGreen);
        border-radius: 999px;
        transition: transform .3s ease, opacity .2s ease;
    }

    /* checkbox */

    .hamburger_menu input {
        appearance: none;
        margin: 0;
        padding: 0;
        outline: none;
        cursor: pointer;
    }


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

@media(max-width:48em) {

    .hamburger_menu {
        display: flex;
    }

    .SS_MLJ .hamburger_menu {
        left: var(--space_3);
    }

    .SS_STD .hamburger_menu {
        left: var(--space_12);
    }

        .SS_STD.hamburger_menu::before,
        .SS_STD.hamburger_menu input,
        .SS_STD.hamburger_menu::after {
            background: var(--color_White);
        }

    .SS_MLJ .hamburger_menu::before,
    .SS_MLJ .hamburger_menu input,
    .SS_MLJ .hamburger_menu::after {
        background: var(--color_White);
    }

    .MM_PPL .hamburger_menu,
    .SS_PPL .hamburger_menu,
    .SS_DLE .hamburger_menu {
        display: none;
    }
}
        /* =========================================================
   ANIMACIJA V X
========================================================= */

    .SS_MLJ .hamburger_menu:has(input:checked)::before,
    .SS_MLJ .hamburger_menu:has(input:checked) input,
    .SS_MLJ .hamburger_menu:has(input:checked)::after {
        background: var(--color_Red);
    }
    .hamburger_menu:has(input:checked)::before {
        transform: translateY(var(--space_2_25)) rotate(45deg);
    }
    .hamburger_menu:has(input:checked)::after {
        transform: translateY(calc((var(--space_1_5) + var(--space_0_75)) * -1)) rotate(-45deg);
    }
    .hamburger_menu:has(input:checked) input {
        opacity: 0;
    }