/*  COMPONENT: NAV HAMBURGER
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .component--nav-main {
        position: relative;
    }
    @media (max-width: 640px) {
        .nav-hamburger__toggle {
            width: 100%;
            border: var(--border);
        }
        .nav-hamburger {
            position: absolute;
            width: 100%;
            background-color: var(--color-white);
            font-size: var(--font-size-l);
            border-inline: var(--border);
        }
        .nav-hamburger ul {
            flex-direction: column;
            gap: 0;
        }
        .nav-hamburger .level_1 > li {
            border-bottom: var(--border);
        }
        .nav-hamburger .level_2 {
            display: none;
        }
        .nav-hamburger .active .level_2,
        .nav-hamburger .trail .level_2 {
            display: flex;
        }
        .nav-hamburger a,
        .nav-hamburger strong,
        .nav-hamburger span.active {
            display: block;
            text-decoration: none;
            padding: var(--spacing-s);
        }
        .nav-hamburger .level_1 > li > a > span,
        .nav-hamburger .level_1 > li > strong,
        .nav-hamburger .level_1 > li > .active {
            font-weight: var(--font-weight-bold);
        }
        .nav-hamburger .level_1 > .active > span,
        .nav-hamburger .level_1 > .trail > a {
            text-decoration: underline;
            text-underline-offset: 0.125em;
            text-decoration-thickness: 0.1em;
        }
    }

    @media (min-width: 640px) {
        .nav-hamburger {
            display: block !important;
            font-size: var(--font-size-l);
            line-height: var(--line-height-l);
        }
        .nav-hamburger__toggle {
            display: none !important;
        }
        .nav-hamburger ul {
            justify-content: flex-end;
        }
        .nav-hamburger a {
            text-decoration: none;
        }
        .nav-hamburger .active,
        .nav-hamburger a:hover,
        .nav-hamburger .trail > a,
        .nav-hamburger span.forward {
            text-decoration: underline;
            text-decoration-thickness: 0.1em;
            text-underline-offset: 0.125em;
        }
        .nav-hamburger .active {
            font-weight: inherit;
        }
        .nav-hamburger .level_1 {
            position: relative;
            font-weight: var(--font-weight-bold);
        }
        .nav-hamburger .level_2 {
            display: none;
            position: absolute;
            right: 0;
            margin-top: var(--spacing-s);
            font-weight: var(--font-weight-light);
        }
        .nav-hamburger .level_2 * {
            text-decoration-thickness: 1px !important;
        }
        .nav-hamburger .level_2 li span,
        .nav-hamburger .level_2 li strong {
            width: max-content;
            display: block;
            font-weight: light;
        }
        .nav-hamburger .level_1 > li.active ul,
        .nav-hamburger .level_1 > li.trail ul {
            display: flex;
        }
        .nav-hamburger .level_2 .active,
        .nav-hamburger .level_2 a:hover,
        .nav-hamburger .level_2 .trail > a {
            text-decoration-thickness: 1px;
        }
        .nav-hamburger .searchlink {
            font-size: 0;
            width: 1.25rem;
            height: 1.25rem;
            background-image: url("../../images/icons/icon--search-small.svg");
            background-size: 100%;

            opacity: 0.25;
        }
        .nav-hamburger .searchlink a {
            display: block;
            width: 100%;
            height: 100%;
        }
    }

    @media (min-width: 1360px) {
        .nav-hamburger .searchlink {
            position: absolute;
            margin-right: -2.5rem;
        }
    }
}