﻿/* menu in desktop */

.dropdown-menu.multi-level .dropdown-submenu .nav-link {
    padding: .25rem 0.75rem 0.25rem 3.5rem;
    font-weight: 400;
    color: inherit;
    white-space: nowrap;
}

/* menu in mobile */

@media (max-width: 992px) {

    .header-nav .navbar {
        --menu-bg: 0, 0, 0;
        --menu-color: 255, 255, 255;
        background-color: rgb(var(--menu-bg));
        position: relative;
    }

    .header-nav .hamburger .bar {
        background-color: rgb(var(--menu-color));
    }

    .header-nav #navbarSupportedContent {
        position: absolute;
        top: 70px;
        right: 0;
        width: fit-content;
        min-width: 80vw;
        z-index: 99999;
        background-color: rgb(var(--menu-bg));
    }

    .dropdown-menu {
        display: none !important;
    }

    .nav-item.open-submenu > .dropdown-menu,
    .dropdown-submenu.open-submenu > .dropdown-menu {
        display: block !important;
    }

    /* level 1 */

    .header-nav .navbar-nav .nav-item {
        width: auto;
        margin-bottom: 10px;
        padding: 5px 10px 5px 5px;
        border-bottom: 1px solid rgba(var(--menu-color), 0.3);
    }

    .header-nav .navbar-nav .nav-link {
        padding-left: 20px;
        position: relative;
    }

        .header-nav .navbar-nav .nav-link:after {
            left: 0;
            top: 18px;
        }

    /* level 2 */

    .header-nav .dropdown-menu.multi-level {
        min-width: 95%;
        background-color: rgb(var(--menu-bg));
        margin: 15px 10px 15px 0;
        padding-right: 10px;
        border: none;
        border-right: 1px solid rgba(var(--menu-color), 0.3);
    }

    .header-nav .dropdown-submenu {
        width: auto;
        margin-bottom: 10px;
        padding: 10px 5px;
        border-bottom: 1px solid rgba(var(--menu-color), 0.3);
    }

        .header-nav .dropdown-submenu:last-child {
            border: none;
        }

    .header-nav .dropdown-item {
        padding: 0;
        color: rgb(var(--menu-color));
        background-color: rgb(var(--menu-bg));
        position: relative;
    }

        .header-nav .dropdown-item:after {
            position: absolute;
            top: 3px;
            left: 0;
            border-width: 4px;
            border-left-color: rgb(var(--menu-color));
            transform: rotate(90deg) !important;
        }


    /* level 3  */

    .header-nav .dropdown-submenu .dropdown-menu {
        min-width: 90%;
        margin: 15px 10px 15px 0;
        padding-right: 10px;
        border: none;
        border-right: 1px solid rgba(var(--menu-color), 0.3);
        background-color: rgb(var(--menu-bg));
    }

        /* level 4  */

        .header-nav .dropdown-submenu .dropdown-menu .nav-link {
            padding: 0;
            color: rgb(var(--menu-color))
        }

    /* Icon */

    .nav-item.open-submenu > .nav-link::after {
        transform: rotate(90deg) !important;
    }

    .dropdown-submenu.open-submenu .dropdown-item::after {
        transform: rotate(180deg) !important;
    }

    .dropdown-submenu .dropdown-submenu .dropdown-item::after {
        transform: rotate(90deg) !important;
    }

    .dropdown-submenu .dropdown-submenu.open-submenu .dropdown-item::after {
        transform: rotate(180deg) !important;
    }
}

@media (min-width: 768px) {
    .header-nav #navbarSupportedContent {
        min-width: 50vw;
    }
}
