// Navigation helpers
// ---------------------------------

@mixin primary-nav-link {
  line-height: line-height($theme-navigation-font-family, 1);
  padding: units(2);
}

$nav-link-color: "base-dark";
$sliding-panel-width: "card-lg";
$nav-link-accordion-icon-size: 2.5;
$nav-link-arrow-icon-size: 2;

// Maps for icon masks
$place-icon-defaults: (
  "color": ButtonText,
  "svg-height": 24,
  "svg-width": 24,
);

$chevron-icon-defaults: map-merge(
  $place-icon-defaults,
  (
    "height": units($nav-link-arrow-icon-size),
  )
);

$mobile-icon-defaults: map-merge(
  $place-icon-defaults,
  (
    "height": units($nav-link-accordion-icon-size),
  )
);

$add-icon: map-merge(
  $mobile-icon-defaults,
  (
    "name": "add",
  )
);

$remove-icon: map-merge(
  $mobile-icon-defaults,
  (
    "name": "remove",
  )
);

$close-icon: map-merge(
  $mobile-icon-defaults,
  (
    "name": "close",
  )
);

$expand-more-icon: map-merge(
  $chevron-icon-defaults,
  (
    "name": "expand_more",
  )
);

$expand-less-icon: map-merge(
  $chevron-icon-defaults,
  (
    "name": "expand_less",
  )
);

// TODO: Collect animations in a common location?
@keyframes slidein-left {
  from {
    transform: translateX(units($sliding-panel-width));
  }

  to {
    transform: translateX(0);
  }
}

// Header navigation
// ---------------------------------
.usa-nav {
  @include typeset($theme-navigation-font-family, null, 1);
  @include at-media-max($theme-header-min-width) {
    @include u-pin("right");
    @include u-pin("y");
    position: fixed;
    background: color("white");
    border-right: 0;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    padding: units(2);
    width: units($sliding-panel-width);
    z-index: z-index(500);

    &.is-visible {
      animation: slidein-left 0.3s ease-in-out;
      display: flex;
    }
  }

  @include at-media($theme-header-min-width) {
    float: right;
    position: relative;
  }

  .usa-search {
    @include at-media($theme-header-min-width) {
      margin-left: units(2);
    }
  }

  .usa-accordion {
    @include typeset($theme-navigation-font-family, null, 1);
  }
}

// Primary navigation
// ---------------------------------

.usa-nav__primary {
  // 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");
    margin-top: units(3);
    order: 2;

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

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

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

  // just level 1 nav items...
  > .usa-nav__primary-item {
    line-height: line-height($theme-navigation-font-family, 2);
    @include at-media($theme-header-min-width) {
      font-size: font-size($theme-navigation-font-family, "2xs");
      line-height: line-height($theme-navigation-font-family, 1);
    }

    // ...and their direct links
    > a {
      @include at-media($theme-header-min-width) {
        @include primary-nav-link;
        color: color($nav-link-color);
        display: block;
        font-weight: font-weight("bold");

        &:hover {
          color: color("primary");
        }
      }
    }
  }

  a {
    @include at-media($theme-header-min-width) {
      @include u-padding-y(1);
    }
  }

  button {
    $button-vertical-offset: 53%; // XXX: Magic number

    @include button-unstyled;
    position: relative; // Anchor spans chevron pseudo element
    color: color($nav-link-color);
    font-weight: font-weight("normal");
    line-height: line-height($theme-navigation-font-family, 2);
    padding: units(1.5) units(2);
    text-decoration: none;

    @include at-media($theme-header-min-width) {
      @include primary-nav-link;
      font-size: font-size($theme-navigation-font-family, "2xs");
      font-weight: font-weight("bold");
    }

    @media (forced-colors: active) {
      forced-color-adjust: auto;
    }

    &:hover {
      color: color("primary");
      background-color: color("base-lightest");
      text-decoration: none;

      @include at-media($theme-header-min-width) {
        background-color: transparent;
      }
    }

    &[aria-expanded="false"] {
      /* stylelint-disable-line selector-no-qualifying-type */
      background-image: none;

      span {
        @include place-icon($add-icon, "after");

        &::after {
          position: absolute;
          right: 0;

          &:hover {
            background-color: buttonText;
          }
        }
      }

      @include at-media($theme-header-min-width) {
        span {
          @include place-icon($expand-more-icon, "after");

          &::after {
            right: units(1.5);
          }
        }
      }

      &:hover {
        @include at-media($theme-header-min-width) {
          span::after {
            background-color: color(blue-warm-70v);

            @media (forced-colors: active) {
              background-color: ButtonText;
            }
          }
        }
      }
    }

    &[aria-expanded="true"] {
      /* stylelint-disable-line selector-no-qualifying-type */
      background-image: none;

      span {
        @include place-icon($remove-icon, "after");
        &::after {
          position: absolute;
          right: 0;
          @media (forced-colors: active) {
            background-color: ButtonText;
          }
        }
      }

      @include at-media($theme-header-min-width) {
        background-image: none;
        background-color: color("primary-darker");
        color: color("white");

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

  .usa-accordion__button {
    span {
      @include at-media($theme-header-min-width) {
        margin-right: 0;
        padding-right: units(2);
      }
    }
  }
}

// Secondary navigation
// ---------------------------------

.usa-nav__secondary {
  margin-top: units(2);

  @include at-media($theme-header-min-width) {
    @include u-flex("column", "align-end");
    bottom: units(8); // XXX magic number
    display: flex;
    font-size: font-size($theme-navigation-font-family, "2xs");
    margin-top: units(1);
    min-width: calc(
      #{$theme-search-min-width} + #{units($theme-button-small-width)}
    );
    position: absolute;
    right: units($theme-site-margins-width);
  }

  .usa-search {
    margin-top: units(2);
    width: 100%;

    @include at-media($theme-header-min-width) {
      margin-left: 0;
      margin-top: units(1);
    }
  }
}

.usa-nav__secondary-links {
  @include add-list-reset;
  line-height: line-height($theme-navigation-font-family, 3);
  margin-top: units(3);

  @include at-media($theme-header-min-width) {
    float: right;
    line-height: line-height($theme-navigation-font-family, 1);
    margin-bottom: units(0.5);
    margin-top: 0;
  }

  .usa-nav__secondary-item {
    @include at-media($theme-header-min-width) {
      display: inline;
      padding-left: units(0.5);

      & + .usa-nav__secondary-item::before {
        color: color("base-lighter");
        content: "|";
        padding-right: units(0.5);
      }
    }
  }

  a {
    color: color("base");
    display: inline-block;
    font-size: font-size($theme-navigation-font-family, "2xs");
    text-decoration: none;

    &:hover {
      color: color("primary");
      text-decoration: underline;
    }
  }
}

// Navigation dropdowns
// ---------------------------------

.usa-nav__submenu {
  @include at-media-max($theme-header-min-width) {
    @include nav-sublist;
  }

  @include at-media($theme-header-min-width) {
    @include add-list-reset;
    background-color: color("primary-darker");
    width: units("card-lg");
    padding: units(2);
    position: absolute;
    z-index: z-index(400);
  }

  &[aria-hidden="true"] {
    display: none;
  }

  .usa-nav__submenu-item {
    @include at-media($theme-header-min-width) {
      & + * {
        margin-top: units(1.5);
      }

      a {
        color: color("white");
        padding: 0;
        line-height: line-height($theme-navigation-font-family, 3);

        &:hover {
          background-color: transparent;
          color: color("white");
          padding: 0;
          text-decoration: underline;
        }
      }
    }
  }
}

.usa-nav__submenu-list {
  @include unstyled-list;

  .usa-nav__submenu-list-item {
    margin: 0;
    font-size: font-size($theme-navigation-font-family, "2xs");

    a {
      line-height: line-height($theme-navigation-font-family, 3);
    }
  }
}

// Navigation close button
// ---------------------------------

.usa-nav__close {
  @include button-unstyled;
  @include u-square($size-touch-target);
  color: currentColor;
  flex: none;
  float: right;
  margin: units(-1.5) units(-2) units(2) auto;
  text-align: center;

  background-image: none;

  @media (forced-colors: active) {
    @include place-icon($close-icon, "before");
    &::before {
      background-color: buttonText;
    }
  }

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

  @include at-media($theme-header-min-width) {
    display: none;
  }

  img {
    width: units(3);

    @media (forced-colors: active) {
      display: none;
    }
  }

  + * {
    clear: both;
  }
}

.usa-js-mobile-nav--active {
  overflow: hidden;
}