/*  COMPONENT: NAV MOBILE SUB
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .component--nav-mobile-sub {
    }
    .component--nav-mobile-sub ul {
        justify-content: flex-end;
        text-align: right;
    }
    .component--nav-mobile-sub .level_1 > li {
        display: none;
    }
    .component--nav-mobile-sub .level_1 > li > a,
    .component--nav-mobile-sub .level_1 > li > strong {
        display: block;
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--spacing-s);
    }
    .component--nav-mobile-sub .level_1 > li.active,
    .component--nav-mobile-sub .level_1 > li.trail {
        display: block;
        gap: var(--size-gap);
    }
}