import { css } from 'lit'

export default css`
    :host {
        display: flex;
        align-items: center;
        gap: var(--terra-spacing-2x-small);

        /* Override CSS custom properties for menus inside navigation */
        /* These cascade through shadow DOM boundaries */
        --terra-panel-background-color: var(--terra-color-carbon-black);
        --terra-panel-border-color: var(--terra-color-carbon-20);
        --terra-menu-item-color: var(--terra-color-spacesuit-white);
        --terra-menu-item-color-hover: var(--terra-color-spacesuit-white);
        --terra-menu-item-background-color-hover: var(--terra-color-carbon-80);
        --terra-menu-item-background-color-focus: var(--terra-color-nasa-blue);
        --terra-menu-item-color-focus: var(--terra-color-spacesuit-white);
    }

    .site-navigation {
        display: flex;
        align-items: center;
        gap: var(--terra-spacing-2x-small);
    }

    /* Navigation buttons should be blue */
    ::slotted(terra-button[variant='text']) {
        --terra-button-text-text-color: var(--terra-color-nasa-blue);
        --terra-button-text-text-color-hover: var(--terra-color-nasa-blue-tint);
    }

    /* Dropdown panels should have dark background */
    ::slotted(terra-dropdown)::part(panel) {
        background-color: var(--terra-color-carbon-black);
        border-color: var(--terra-color-carbon-20);
        color: var(--terra-color-spacesuit-white);
    }

    /* Full-width mode styles */
    .site-navigation--full-width ::slotted(terra-dropdown) {
        position: static;
    }

    .site-navigation--full-width ::slotted(terra-dropdown)::part(base) {
        position: static;
    }

    .site-navigation--full-width ::slotted(terra-dropdown)::part(base__popup) {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        transform: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .site-navigation--full-width ::slotted(terra-dropdown)::part(panel) {
        width: 100%;
        max-width: 100%;
        background-color: var(--terra-color-carbon-black);
    }
`
