// AutoUpdateFileChromatic
@use "../../global-modules.scss" as *;

// Custom breakpoint for a crowded Navbar so all the nav items are alaways nicely displayed
@mixin tablet-to-1300px {
    @media (min-width: $tablet) and (max-width: 1300px) {
        @content;
    }
}

// Shared styles between both variants of the Navbar
header.Navbar {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .ClientEnv {
        transform: rotate(343deg);
        position: absolute;
        opacity: 0.6;
        top: 1em;
        left: 0;
        color: crimson;
        overflow: hidden;
        font-weight: 900;
    }

    @media (min-width: $tablet) {
        height: 104px;
    }

    :global {
        .usa-navbar {
            & .usa-logo {
                cursor: pointer;
            }

            & .usa-link {
                color: inherit;
                &:visited,
                &:hover,
                &:active {
                    cursor: pointer;
                }
            }
        }

        .usa-nav__primary button,
        .primary-nav-link-container,
        .usa-nav__submenu .usa-nav__submenu-item a {
            padding: 1.5rem 1rem;
        }

        .usa-menu-btn {
            cursor: pointer;
        }

        .usa-nav-container {
            align-items: center;
            height: 100%;
            margin: 0;
        }

        .nav-cta-container {
            .usa-button {
                margin-right: 0;

                &:first-of-type {
                    margin-right: 1rem;
                }
            }
        }

        .primary-nav-link-container {
            position: relative;
            width: fit-content;

            .primary-nav-link,
            .primary-nav-link:visited,
            .primary-nav-link:hover,
            .primary-nav-link:active {
                color: inherit;
            }
        }

        .usa-nav__submenu .usa-nav__submenu-item {
            position: relative;
            width: fit-content;

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

        .usa-nav__primary button {
            & span {
                vertical-align: middle;
            }
        }

        // Styling block specific for the mobile state of the Navbar
        .usa-nav.is-visible {
            .primary-nav-link-container {
                padding: 0;
                width: 100%;
            }

            .primary-nav-link {
                color: inherit;
                padding: 1.5rem 1rem;

                &:hover {
                    color: inherit;

                    &:after {
                        content: none;
                    }
                }
            }

            .usa-accordion {
                padding-bottom: 64px;
            }

            .nav-cta-container {
                margin-top: 16px;
                order: 2;
                display: flex;
                flex-direction: column;
                width: 100%;

                .nav-cta-username {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                & .usa-button {
                    margin-bottom: 8px;
                    width: 100%;
                }
            }

            .usa-nav__primary button {
                display: flex;
                flex-direction: column;
                justify-content: center;

                &:after {
                    left: 0;
                }

                &:hover:after {
                    height: auto;
                    left: 0;
                    border-radius: 99rem;
                    bottom: 0.25rem;
                    top: 0.25rem;
                    width: 0.25rem;
                }
            }

            .usa-nav__primary .usa-accordion__button span {
                padding-right: 8px;
            }
        }

        .primary-nav-link:hover:after,
        .usa-nav__submenu .usa-nav__submenu-item:hover:after,
        .usa-nav__primary button[aria-expanded="true"]:hover:after,
        .usa-nav__primary button:hover:after {
            border-radius: 0;
            content: "";
            display: block;
            position: absolute;
            height: 0.25rem;
            left: 1rem;
            right: 1rem;
            bottom: 0;
        }

        @include tablet-to-1300px {
            .usa-nav__primary button,
            .primary-nav-link-container {
                padding: 1rem 0.4rem;
            }

            .primary-nav-link:hover:after,
            .usa-nav__submenu .usa-nav__submenu-item:hover:after,
            .usa-nav__primary button[aria-expanded="true"]:hover:after,
            .usa-nav__primary button:hover:after {
                left: 0.4rem;
                right: 0.4rem;
            }

            .usa-nav__primary button span::after {
                right: 0;
            }

            .usa-nav__link:hover::after,
            .usa-nav__primary button[aria-expanded="true"]:hover:after,
            .usa-nav__submenu .usa-nav__submenu-item:hover:after {
                left: 0.4rem;
            }
        }
    }
}

.NavbarDefault {
    background-color: color("white");
    border-bottom: 1px solid color("primary-darker");

    :global {
        .usa-nav__link:hover:after,
        .primary-nav-link:hover:after {
            background-color: color("primary");
        }

        .usa-nav__primary button[aria-expanded="true"]:hover:after,
        .usa-nav__submenu .usa-nav__submenu-item:hover:after {
            background-color: color("white");
        }

        .usa-nav__primary button[aria-expanded="true"] {
            background-color: color("primary-darker");
        }

        // Styling block specific for the mobile state of the Navbar
        .usa-nav.is-visible {
            .usa-nav__primary button[aria-expanded="true"] {
                background-color: color("white");

                &:hover {
                    background-color: color("gray-5");

                    &:after {
                        background-color: color("primary");
                    }
                }
            }

            .usa-nav__primary-item,
            .usa-nav__submenu-item {
                width: 100%;

                &:hover:after {
                    background-color: transparent;
                }
            }
        }
    }
}

header.NavbarBlueVariant {
    background-color: color("primary-darker");
    border-bottom: 1px solid color("white");

    :global {
        .usa-nav__link:hover:after,
        .primary-nav-link:hover:after,
        .usa-nav__primary button[aria-expanded="false"]:hover span::after,
        .usa-nav__primary button span::after,
        .usa-nav__submenu {
            background-color: color("white");
        }

        .usa-logo__text,
        .primary-nav-link-container,
        .usa-nav__primary button[aria-expanded="false"] span,
        .usa-button.usa-button--outline {
            color: color("white");
        }

        .usa-button.usa-button--outline {
            box-shadow: inset 0 0 0 2px color("white");

            &:hover {
                box-shadow: inset 0 0 0 2px color("gray-10");
                color: color("gray-10");
            }
        }

        .usa-button:not(.usa-button.usa-button--outline) {
            background-color: color("white");
            color: color("primary-darker");

            &:hover {
                background-color: color("gray-10");
            }
        }

        .usa-nav__primary button[aria-expanded="true"] {
            background-color: color("white");

            & span {
                color: color("primary-darker");

                &:after {
                    background-color: color("primary-darker");
                }
            }

            &:hover:after {
                background-color: color("primary-darker");
            }
        }

        .usa-nav__submenu .usa-nav__submenu-item {
            a {
                color: color("primary-darker");
            }

            &:hover:after {
                background-color: color("primary-darker");
            }
        }

        // Styling block specific for the mobile state of the Navbar
        .usa-nav.is-visible {
            background-color: color("primary-darker");

            .usa-nav__close svg {
                fill: color("white");
            }

            .usa-nav__primary-item,
            .usa-nav__submenu-item {
                border-top: 1px solid color("primary");
                width: 100%;

                &:hover:after {
                    background-color: transparent;
                }
            }

            .usa-nav__primary button {
                &:hover {
                    background-color: color("primary-dark");
                }
            }

            .usa-nav__primary button[aria-expanded="true"] {
                background-color: color("primary-dark");

                span {
                    color: color("white");

                    &:after {
                        background-color: color("white");
                    }
                }

                &:after {
                    background-color: color("white");
                }

                &:hover {
                    background-color: color("primary-dark");

                    &:after {
                        background-color: color("white");
                    }
                }
            }

            .usa-accordion {
                border-bottom: 1px solid color("primary");
            }

            .usa-nav__submenu {
                background-color: color("primary-darker");
            }

            .usa-nav__submenu .usa-nav__submenu-item a {
                color: color("white");
            }

            .usa-nav__primary a:not(.usa-button) {
                &:hover {
                    background-color: color("primary-dark");
                }
            }
        }
    }
}

.AuthNavbar {
    background-color: color("blue-5");

    :global {
        .primary-nav-link-container a:hover {
            text-decoration: underline;
        }

        .usa-nav__link:hover:after {
            height: 1px;
            left: 0;
            bottom: -2px;
        }

        .primary-nav-link-container,
        .usa-nav__submenu .usa-nav__submenu-item a {
            font-size: 0.75rem;
            color: black;
        }

        .usa-nav-container {
            height: 40px;
            margin: 0;
        }

        .usa-nav__submenu {
            background-color: color("blue-5");
            padding-top: 0;
            padding-bottom: 0;
            margin-top: 5px;
            margin-left: -10px;
            width: fit-content;
        }

        .usa-nav__submenu .usa-nav__submenu-item a {
            padding: 5px 8px;
        }

        .usa-nav__submenu .usa-nav__submenu-item {
            position: relative;
            width: fit-content;
            padding: 8px 0;
        }

        .usa-nav__primary button,
        .usa-nav__primary button[aria-expanded="true"] {
            font-size: 0.75rem;
            color: black;
            background-image: none;
            background-color: color("blue-5");
            padding: 0 8px 0 0;

            & span:after {
                background-color: color("primary");
                right: 0;
            }
        }

        .usa-nav__primary button {
            & span {
                color: black;
                vertical-align: middle;
                padding-bottom: 8px;
            }
        }

        .usa-nav__primary {
            font-size: 0.75rem;
            color: black;
            padding: 8px 0;
            align-items: center;
            justify-content: flex-end;

            & a {
                padding: 0;
            }
        }

        .usa-nav__primary-item a.usa-button {
            font-size: 0.75rem;
            color: black;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .usa-nav__primary-item {
            height: 20px;
            padding: 5px 10px;
            border-right: 1px solid color("primary");
            font-size: 0.75rem;

            .org-settings {
                margin-top: -4px;
            }

            &:last-of-type {
                border-right: none;
            }
        }

        .usa-icon {
            margin-left: 3px;
            color: color("primary");
            font-size: 1.2rem;
        }
    }
}
