@layer parts {
    .nav-menu {
        display: flex;
        gap: var(--nav-menu-gap, var(--spacing-sm));
        align-items: var(--nav-menu-align, stretch);
        justify-content: var(--nav-menu-justify, flex-start);
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-menu--column {
        flex-direction: column;
    }

    .nav-menu--row {
        flex-direction: row;
    }

    .nav-menu--wrap {
        flex-wrap: wrap;
    }

    .nav-menu > li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nav-menu > li > a {
        display: block;
        padding: var(--nav-menu-padding, 0);
        font-family: var(--nav-menu-font, inherit);
        font-size: var(--nav-menu-font-size, inherit);
        font-weight: var(--nav-menu-font-weight, inherit);
        text-transform: var(--nav-menu-text-transform, none);
        letter-spacing: var(--nav-menu-letter-spacing, normal);
        line-height: var(--nav-menu-line-height, inherit);
        color: var(--nav-menu-color, var(--color-text));
        background: var(--nav-menu-bg, transparent);
        border: var(--nav-menu-border, none);
        border-radius: var(--nav-menu-radius, 0);
        text-decoration: none;
        transition: color var(--transition-speed, 200ms) ease,
                    background-color var(--transition-speed, 200ms) ease;
    }

    .nav-menu > li > a:hover {
        color: var(--nav-menu-color-hover, var(--nav-menu-color, var(--color-text)));
        background: var(--nav-menu-bg-hover, var(--nav-menu-bg, transparent));
        font-style: var(--nav-menu-hover-font-style, inherit);
    }

    .nav-menu > li.current-menu-item > a,
    .nav-menu > li.current-menu-ancestor > a {
        color: var(--nav-menu-color-active, var(--nav-menu-color-hover, var(--color-text)));
        background: var(--nav-menu-bg-active, var(--nav-menu-bg-hover, var(--nav-menu-bg, transparent)));
    }

    /* Dividers */

    .nav-menu--dividers.nav-menu--column > li + li {
        border-top: var(--rule-width, 1px) solid var(--nav-menu-divider-color, var(--color-border));
    }

    .nav-menu--dividers.nav-menu--row > li + li {
        border-left: var(--rule-width, 1px) solid var(--nav-menu-divider-color, var(--color-border));
    }

    /* Style: pills */

    .nav-menu--pills > li > a {
        padding: var(--nav-menu-padding, var(--spacing-xs) var(--spacing-sm));
        background: var(--nav-menu-bg, var(--color-surface));
        border-radius: var(--nav-menu-radius, var(--radius-sm));
    }

    .nav-menu--pills > li > a:hover {
        background: var(--nav-menu-bg-hover, color-mix(in oklch, var(--color-surface) var(--surface-hover-mix, 93%), var(--color-text)));
    }

    /* Style: outline */

    .nav-menu--outline > li > a {
        padding: var(--nav-menu-padding, var(--spacing-xs) var(--spacing-sm));
        border: var(--nav-menu-border, var(--rule-width, 1px) solid var(--color-border));
        border-radius: var(--nav-menu-radius, var(--radius-sm));
        background: transparent;
    }

    .nav-menu--outline > li > a:hover {
        background: var(--nav-menu-bg-hover, var(--color-surface));
    }
}