@import url("base.css");


@property --global-mobile-navigation-active {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
}

.site-navigation {
    --global-mobile-navigation-active: 0;
}

.site-navigation-button,
.site-navigation-submenu-button {
    cursor: pointer;
    width:  var(--navmenu-button-width);
    height: var(--navmenu-button-height);
    z-index: 4;
}
.site-navigation-button {
    right: var(--navmenu-space-item);
    flex-direction: column;
    justify-content: space-between;
}

.site-navigation-submenu-button {
    left: var(--navmenu-space-item);
}

.site-navigation-submenu-button::before,
.site-navigation-submenu-button::after {
    content: "";
    position: absolute;
    left: 3.25px;
    background-color: var(--color-global-navmenu-button-line);
    width: 70%;
    height: 1.93px;
} 

.site-navigation-submenu-button::before {
    top: 80%;
    transform: rotate(45deg);
}

.site-navigation-submenu-button::after {
    top: 20%;
    transform: rotate(-45deg);
}

.site-navigation-button> div {
    width: 100%;
    height: 1.93px;
    background-color: var(--color-global-navmenu-button-line);
}

.site-navigation-button.button-pressed {
    justify-content: center;
}

.site-navigation-button.button-pressed> div:first-child {
    transform: translateY(57%) rotate(-45deg);
}

.site-navigation-button.button-pressed> div:last-child {
    transform: translateY(-57%) rotate(45deg);
}

@keyframes KFrame-global-mobile-site-navigation-menu {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
    
}

.site-navigation-item.header {
    display: none;
    position: fixed;
    top: 8px;
    left: 38px;
}

@media screen and (width <= 744px) {
    .site-navigation {
        --global-mobile-navigation-active: 1;
        --navmenu-space-list-item: 2px;
    }

    .site-navigation-item.header {
        display: block;
        border-bottom-style: none;
    }

    .site-navigation-item.header .site-navigation-link {
        border-radius: 14px;
    }

    .site-navigation-list {
        flex-direction: column;
        height: 0;
        background-color: var(--global-submenu-background);
        padding: 0;
        transition: height var(--transition-list), 
                    padding var(--transition-list);
    }

    .site-navigation-item {
        height: var(--mobile-navmenu-item-height);
        border-bottom: 1.93px solid;
    }

    .site-navigation-link {
        justify-content: start;
    }

    .site-navigation-link:hover {
        background-color: var(--global-navmenu-link-background);
    }

    .site-navigation-link:hover * {
        background-color: transparent;
    }

    .site-navigation-list {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        border-radius: 0;
    }

    .site-navigation-list.show-menu {
        padding: 58px 0;
        height: 100vh;
        transition: height var(--transition-list-active), 
                    padding var(--transition-list-active);
    }

    .site-navigation-submenu-list {
        padding: 58px 0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }

    .site-navigation-list.show-menu,
    .site-navigation-submenu-list.show-menu,
    .site-navigation-submenu-button.show-button {
        animation: KFrame-global-mobile-site-navigation-menu 313ms ease-in-out;       
    }

    .site-navigation-button {
        display: flex;
    }

    .site-navigation-submenu-button.show-button {
        display: block;
    }
    
}