:where(.component-primary-navigation) {

    :where(& > .primary-navigation) {
        align-items: center;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: var(--size-medium);
        min-width: 0;

        :where(& > .menu) {
            margin: 0;
            padding: 0;
            list-style: none;
            display: inline-flex;
            flex-flow: row;
            align-items: center;
            gap: var(--size-medium);
            justify-content: space-between;

            :where(&:not(.buttons)) {
                padding-inline: var(--size-medium);
            }

            & > .menu-item { /* No :where() because of a WordPress style that is overriding it when logged in */
                text-align: center;

                :where(a) {
                    color: var(--color-primary-black);
                    text-decoration: none;
                    font-weight: var(--font-weight-semi-bold);

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }

        :where(& > .menu.buttons) {
            gap: var(--size-x-small);
            justify-self: end;

            & > .menu-item { /* No :where() because of a WordPress style that is overriding it when logged in */

                :where(a) {
                    color: var(--color-primary-white);
                    background-color: var(--color-brand-red);

                    &:hover {
                        text-decoration: none;
                    }
                }
            }
        }
    }
}