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

@layer components {
    .component--nav-sub {
        sbackground-color: var(--color-white);
    }
    .nav-sub {
        padding-block: var(--spacing-s);

        padding-inline: var(--spacing-m);
        background-color: var(--color-mbz-beige-200);
    }
    .nav-sub * {
        color: var(--color-mbz-beige-900);
    }
    .nav-sub :where(h1, h2, h3) {
        margin-bottom: 0;
        margin-right: auto;
    }
    .nav-sub ul {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs) var(--spacing-s);
        flex-direction: row;
        sjustify-content: end;
    }

    .component--nav-sub .tabs {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 1px;
    }
    .component--nav-sub .tab {
        cursor: pointer;
        display: block;
        padding: var(--spacing-s) var(--spacing-m);
        background-color: rgba(255, 255, 255, 0.5);
        background-color: oklch(81.09% 0.13 89.88 / 0.5);
        background-color: var(--color-mbz-beige-100);
        backdrop-filter: blur(5px);
        user-select: none;
        font-weight: var(--font-weight-bold);
    }
    .component--nav-sub .tab.active {
        background-color: var(--color-white);
        background-color: var(--color-mbz-beige-200);
        color: var(--color-mbz-beige-900);
    }
    .component--nav-sub .tabs ~ * {
        display: none;
    }
    .component--nav-sub .tabs ~ .active {
        display: block;
    }
}