.apo-navigation-primary > ul {
    row-gap: 2.25rem;
}

/* Use BS breakpoints - see _apotex_bootstrap_variables_overrides.scss */
@media (width >= 992px) {
    .apo-navigation-primary > ul {
        row-gap: 0.75rem;
    }
}

.apo-navigation-primary__item {
    --region-height: 0;
}

    .apo-navigation-primary__dropdown:is(.is-open) {
        --dropdown-state: flex;
    }

.apo-navigation-primary__link {
    background-color: transparent;
    color: currentColor;
    font-size: var(--apo-fluid-18-20);
    letter-spacing: 0.04em;
    position: relative;
    width: 100%;
}

.apo-navigation-primary__toggle {
    background-color: transparent;
    border: none;
    color: inherit;
    padding: 0;
}

    .apo-navigation-primary__toggle > svg {
        display: block;
    }

.apo-navigation-primary__dropdown {
    display: var(--dropdown-state, none);
    transition: opacity 0.4s var(--apo-easing-out), display 0.1s var(--apo-easing-out) allow-discrete;

    @starting-style {
        opacity: 0;
    }
}

@media (width >= 992px) {
    .apo-navigation-primary__item:hover {
        --dropdown-state: flex;
    }

    .apo-navigation-primary__link {
        width: max-content;
        position: relative;
    }

        .apo-navigation-primary__link::before {
            content: "";
            position: absolute;
            inset: 0 -2.25rem 0 -1.5rem;
            /*background: yellow;
            opacity: 0.4;*/
        }

    .apo-navigation-primary__item:has(:hover, :focus-within) .apo-navigation-primary__link::before {
        height: 100px; /* magic number */
    }


    :where(.apo-navigation-primary__item:has(:hover)) {
        color: var(--bs-primary-muted);
    }

    .apo-navigation-primary__dropdown {
        position: absolute;
        font-size: var(--apo-fluid-14-18);        
        transform: translateX(-1.5rem);
        width: fit-content;        
        max-width: min(100%, 15rem);
    }

    @supports(top: anchor(--foo bottom)) {
        .apo-navigation-primary__dropdown {
            position: fixed;
            top: anchor(--region-header-primary bottom);
            left: anchor(left);
            min-width: anchor-size(width);
        }
    }
}


@media (width < 992px) {
    .apo-navigation-primary__dropdown {
        --apo-link-color: currentColor;
        --apo-link-hover-color: var(--bs-primary-navy);
        background-color: var(--bs-white);
        color: var(--bs-primary);
        margin-block-start: 2rem;
        transition: opacity 0.5s var(--apo-easing-out), height 0.5s var(--apo-easing-out) allow-discrete;


        @starting-style {
            .apo-navigation-primary__dropdown {
                opacity: 0;
                height: 0;
            }
        }
    }

    .apo-navigation-primary__item:has(.is-open) .apo-navigation-primary__toggle > svg {
        transform: rotate(180deg);
    }
}