@use "uswds-core" as *;
@use "cisa_colors" as *;
@use "base" as *;

$-add-icon: (
  "name": "add",
  "svg-height": 24,
  "svg-width": 24,
  "height": units(2),
);

$-remove-icon: (
  "name": "remove",
  "svg-height": 24,
  "svg-width": 24,
  "height": units(2),
);

$-expand-more-icon: (
  "name": "expand_more",
  "svg-height": 24,
  "svg-width": 24,
  "height": units(2.5),
);

$-expand-less-icon: (
  "name": "expand_less",
  "svg-height": 24,
  "svg-width": 24,
  "height": units(2.5),
);

// Define some styles for the .gov header/logo
.usa-logo button {
    color: #{$dhs-dark-gray-85};
    font-weight: 700;
    font-family: family('sans');
    font-size: 1.6rem;
    line-height: 1.1;
}

.usa-logo button:hover{
    color: #{$dhs-dark-gray-85};
}

.usa-header {
    .usa-logo {
        @include at-media(desktop) {
            margin-top: units(2);
        }
    }
    .usa-logo__text {
        @include typeset('sans', 'xl', 2);
    }
    .usa-nav__username {
        max-width: 208px;
        min-height: units(2);
        @include at-media(desktop) {
            max-width: 500px;
        }
    }
    .padding-y-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

button {
    outline-offset: 0;
}

.usa-header--basic {
    .usa-logo__text {
        color: color('primary-darker');
    }
    .usa-nav__username {
        padding: units(1) units(2);
        @include at-media(desktop) {
            padding: units(2);
        }
    }
    .usa-nav__primary {
        margin-top:units(1);
    }
    @include at-media(desktop) {
        .usa-nav__primary-item:not(:first-child) {
            position: relative;
        }
        .usa-nav__primary-item:not(:first-child)::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 0; /* No width since it's a border */
            height: 40%;
            border-left: solid 1px color('base-light');
            transform: translateY(-50%);
        }
    }

    button {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        color: #{$dhs-blue};
    }
}

.usa-header--extended {
    @include at-media(desktop) {
        background-color: color('primary-darker');
        border-top: solid 1px color('base-light');
        border-bottom: solid 1px color('base-lighter');

        .usa-logo__text a,
        .usa-logo__text button,
        .usa-logo__text button:hover {
            color: color('white');
        }
        .usa-nav {
            background-color: color('primary-lightest');
        }
        .usa-nav__primary-item:last-child {
            margin-left: auto;
            .usa-nav-link {
                margin-right: units(-2);
            }
        }
        .usa-nav__primary {
            .usa-nav-link,
            .usa-nav-link:hover,
            .usa-nav-link:active,
            button  {
                color: color('primary');
                font-weight: font-weight('normal');
                font-size: 16px;
            }
            .usa-current,
            .usa-current:hover,
            .usa-current:active,
            button.usa-current {
                font-weight: font-weight('bold');
            }
            button[aria-expanded="true"] {
                color: #{$dhs-light-blue-15};
            }
            button:not(.usa-current):hover::after  {
                display: none!important;
            }
        }
        .usa-nav__secondary {
            right: 1rem;
            padding-right: $widescreen-x-padding;
            color: #{$dhs-light-blue-15};
            @include at-media($theme-header-min-width) {
                bottom: 3.625rem;
            }

            .usa-nav-link,
            .usa-nav-link:hover,
            .usa-nav-link:active {
                font-weight: bold;
                font-size: 16px;
                color: #{$dhs-light-blue-15};
            }
            // Submenu nav links have normal font weight 
            .usa-nav__submenu-item {
                .usa-nav-link,
                .usa-nav-link:hover,
                .usa-nav-link:active {
                    font-weight: normal;
                }
            }
        }
        > .usa-navbar {
            // This is a dangerous override to USWDS, necessary because we have a tooltip on the logo
            overflow: visible;
        }
    }
}

.usa-nav__inner--widescreen,
.usa-navbar--widescreen,
.usa-nav-container--widescreen  {
    max-width: $widescreen-max-width !important;
}

.usa-nav__secondary-links {
    line-height: line-height($theme-navigation-font-family, 2);

    // Remove column gap to account for padding in secondary nav buttons
    @include at-media($theme-header-min-width) {
        column-gap: 0;

        // Add divider between secondary nav items
        li + li {
            &::marker {
                content: "|";
            }
        }
    }
}

.usa-nav__secondary-item  {
    @include at-media($theme-header-min-width) {
        .usa-nav-link-text {
            vertical-align: middle;
        }

        a {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
        }

        // Override USWDS defaults
        & + .usa-nav__secondary-item {
            // Increase padding of secondary links to match button padding
            padding-left: units(2) !important; 
            // Replace USWDS default border to accommodate button heights
            border-left: 0 !important;
        }
    }

    @include at-media-max($theme-header-min-width) {
        @include nav-list("nav");
        border-top: solid 1px color('base-lighter');

        a {
          @include u-padding-y(1.5);
        }
    }
}

// Dropdown menus on secondary nav
.usa-nav__secondary-menu {
    // Until the $theme-header-width,
    // use the usa-nav-list styles for the slide-in nav
    @include at-media-max($theme-header-min-width) {
        @include nav-list("nav");
    
        a {
            @include u-padding-y(1.5);
            line-height: line-height($theme-navigation-font-family, 2);
        }
    }

    // At $theme-header-width and wider...
    @include at-media($theme-header-min-width) {
        display: flex;
        align-items: stretch;
    }

    // all nav items in the nav
    .usa-nav__secondary-item {
        a {
            text-decoration: none;
        }
    }

    // ...and their direct links
    > a {
        @include at-media($theme-header-min-width) {
            line-height: line-height($theme-navigation-font-family, 2) !important;
            padding: units(2);            
            align-items: center;
            display: flex;
            font-weight: font-weight("bold");
        }
    }

    > button,
    > a {
            @include at-media($theme-header-min-width) {
            height: 100%;
        }
    }
    
    @include at-media($theme-header-min-width) {
        span {
            @include place-icon($-add-icon, "after");
            font-weight: font-weight('bold');
            color: #{$dhs-light-blue-15};
        }
    }

    a {
        @include at-media($theme-header-min-width) {
            @include u-padding-y(1.5);
            line-height: 1.1;
        }
    }

    button,
    .usa-accordion__button {
        $button-vertical-offset: 53%; // XXX: Magic number

        background-color: transparent;
        color: var(--close-button-bg);
        position: relative; // Anchor spans chevron pseudo element
        font-weight: font-weight("normal");
        font-size: 1rem;
        line-height: 1.2;
        margin-right: 0;
        padding: units(1.5) units(2);
        text-decoration: none;
        width: 100%;
        border-radius: 0;

        @include at-media-max($theme-header-min-width) {
            justify-content: flex-start;

            &:hover {
                background-color: var(--border-color);
                color: #{$theme-color-primary};
            }
            a {
                @include u-padding-y(1.5);
            }
        }

        // Remove icon set from usa-accordion.
        // Also removed in _usa-banner.scss.
        &[aria-expanded],
        &[aria-expanded]:hover {
            background-image: none;

            @media (forced-colors: active) {
                &::before {
                    content: none;
                }
            }
        }

        span {
            @include at-media($theme-header-min-width) {
              display: inline-block;
              margin-right: 0;
              padding-right: units(2);
            }
        }

        &[aria-expanded] {
            span {
              &::after {
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
              }
            }
        }

        &[aria-expanded="false"] {
            span {
              @include place-icon($-add-icon, "after");
      
              &::after:hover {
                background-color: #{$dhs-light-blue-15};
              }
            }

            &::after:hover {
                background-color: #{$dhs-light-blue-15};
            }
            
            @include at-media($theme-header-min-width) {
                span {
                    @include place-icon($-expand-more-icon, "after");
    
                    &::after {
                        background-color: #{$dhs-light-blue-15};
                        right: units(1.5);
                    }
                }
            }

            &:hover {
                @include at-media($theme-header-min-width) {
                    span::after {
                        background-color: #{$dhs-light-blue-15};
        
                        @media (forced-colors: active) {
                            background-color: #{$dhs-light-blue-15};
                        }
                    }
                }
            }
        }

        &[aria-expanded="true"] {
            span {
                @include place-icon($-remove-icon, "after");
        
                &::after {
                  position: absolute;
                  right: 0;
        
                  @media (forced-colors: active) {
                    background-color: #{$dhs-light-blue-15};
                  }
                }
            }

            @include at-media($theme-header-min-width) {
                background-image: none;
                background-color: color("primary-darker");
                color: #{$dhs-light-blue-15};

                @include at-media($theme-header-min-width) {
                    span {
                        @include place-icon($-expand-less-icon, "after");
                        &::after {
                            right: units(1.5);
                            background-color: #{$dhs-light-blue-15};
                            @media (forced-colors: active) {
                                background-color: #{$dhs-light-blue-15};
                            }
                        }
                    }
                }
            }
        }
    }
}

// Extended header only displaying topmost navigation
.usa-header__top-level-only {
    border-bottom-width: 0;

    .usa-nav {
        background-color: white !important;
    }

    .usa-nav__primary {
        visibility: hidden;
    }
}

#organizations-submenu {
    button,
    button:hover {
        background-color: inherit;
    }

    button {
        @include at-media($theme-header-min-width) {
            &:hover {
                text-decoration: underline;
            }
        }
        font-size: 1rem;
        font-weight: font-weight("normal");
        justify-content: flex-start;
        border-radius: 0;
        outline-offset: 0;
        padding: 0 0;
        margin-right: 0;
        width: 100%;
        a {
            line-height: line-height($theme-navigation-font-family, 2);
            margin-right: auto;
            text-align: left;
            width: 100%;
            @include at-media($theme-header-min-width) {
                font-size: 1rem;
                color: #{$dhs-light-blue-15};
            }
        }
    }
}