@use '../settings/variables' as v;
@use '../settings/functions' as f;

// this should be a global thing
[hidden] {
  display: none;
}

header {
  align-items: center;
  background: $color-white;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  @include breakpoint(sm) {
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1);
    display: block;
    height: 103px;
    &.show-cancel-button {
      display: flex;
    }
  }
  @include breakpoint(md) {
    height: 106px;
  }
  @media (min-width: 1080px) {
    height: 108px;
  }
}

.header-height {
  height: 100%;

  @include breakpoint(sm) {
    height: 200px;
  }
}

.header-dropdown--open {
  z-index: v.$zIndexTopNavOpen;
}
.header-dropdown--closed {
  z-index: v.$zIndexTopNavClosed;
}

// logo
.header-logo {
  height: 45px;
  margin-left: f.rem(30px);
  @include breakpoint(sm) {
    float: left;
    margin-left: f.rem(40px);
    padding: f.rem(27px) 0;
    height: 103px;
  }
  @include breakpoint(md) {
    height: 106px;
  }
  @media (min-width: 1080px) {
    height: 108px;
  }
}
.header-logo-search {
  margin-top: 0;

  @include breakpoint(sm) {
    margin-top: f.rem(-48px);
  }
}
.qpp-logo {
  height: 100%;
}

// mobile-only help icon
.header-help {
  font-size: 0.9rem;
  text-decoration: none;
  margin: 0 f.rem(30px) 0 0;
  padding-top: f.rem(20px);
  width: 30px;
  height: 86px;
  @include breakpoint(sm) {
    display: none;
  }
}
.header-help-icon {
  fill: $color-teal;
  width: 30px;
  height: 30px;
}

// cancel button
.header-cancel {
  background-color: transparent;
  border: none;
  color: #006771;
  font-size: f.rem(16px);
  margin-right: f.rem(30px);
  text-transform: uppercase;
}

// mobile menu button new
.mobile-menu-btn-new {
  background-color: #fefefe;
  border: none;
  display: block;
  flex: 0 0 100%;
  padding: f.rem(14px) 0;
  width: 100%;
  &[aria-expanded='true'] {
    color: v.$gray-90;
  }
  @include breakpoint(sm) {
    display: none;
  }

  .close-icon {
    fill: v.$cyan-50;
    height: 18px;
    width: 35px;
    margin-bottom: f.rem(-2px);
  }
}

.icon {
  display: inline-block;
  margin-right: f.rem(14px);
}
.icon-bar {
  background-color: v.$cyan-50;
  border-radius: 1px;
  display: block;
  height: 3px;
  width: 22px;
}
.icon-bar + .icon-bar {
  margin-top: f.rem(5px);
}
.toggle-text {
  display: inline-block;
  font-size: 1.25rem;
}

// dropdown menu
[aria-label='Primary navigation'] {
  flex: 0 0 100%;
  background-color: $color-teal-dark;
  color: $color-white;
  margin-right: f.rem(30px);
  @include breakpoint(sm) {
    background-color: transparent;
    color: $color-navy;
    display: block;
    float: right;
    margin-right: f.rem(40px);
  }
}
[class^='header-item-'] {
  @include breakpoint(sm) {
    float: left;
    position: relative;
  }
  &:last-child {
    .menu-dropdown-toggle::after {
      display: none;
    }
  }
}
.full-width-menu[class^='header-item-'] {
  position: static;
}
.navigation-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation-menu:not(.navigation-new-style) {
  .chevron-container {
    display: none;
  }
  .accordion-section {
    display: none;
  }
  .submenu-section-mips-mobile {
    display: none;
  }
}

// Mobile Top Nav
.navigation-menu.navigation-new-style {
  background-color: v.$white;

  .nav-section.open {
    border-top: 1px solid v.$gray-10;
  }

  .menu-dropdown-toggle {
    .dropdown-title,
    .nav-title {
      color: v.$gray-90;
      font-weight: $rubik-regular;
    }

    @include breakpoint(sm) {
      &[aria-expanded='true'] {
        border-bottom: 4px solid $color-teal-medium;
        outline: none;
        .nav-description {
          color: v.$cyan-50;
        }
      }
    }
  }

  .menu-dropdown-toggle,
  .header-item-login {
    background-color: v.$white;

    a {
      padding-right: 0
    }

    @media only screen and (max-width: 767px) {
      border-top: 1px solid v.$gray-10;
    }
  }

  .menu-dropdown-toggle[aria-expanded='true']
    .dropdown-title-chevron-container {
    .chevron-container {
      transition: transform 0.5s ease;
      transform: rotate(180deg);
    }
  }
  .menu-dropdown-toggle[aria-expanded='false']
    .dropdown-title-chevron-container {
    .chevron-container {
      transition: transform 0.5s ease;
    }
  }
  .dropdown-title-chevron-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    text-align: left;

    @include breakpoint(xs) {
      justify-content: space-around;
    }

    .dropdown-title {
      flex-grow: 0;

      @include breakpoint(xs) {
        flex-grow: 1;
      }

      &::before {
        right: -20px;

        @include breakpoint(sm) {
          right: -18px;
        }
      }
    }

    .chevron-container {
      margin: 0;
      margin-right: f.rem(10px);

      @include breakpoint(xs) {
        margin-right: 0;
      }

      @include breakpoint(sm) {
        margin-right: f.rem(10px);
      }
    }

    .accordion-left-title {
      color: $color-gray-darker;
      flex-grow: 1;
      font-size: 1.125rem;
      font-weight: 500;
      max-width: 100%;
      text-align: left;
      width: 33%;

      .accordion-title {
        width: 75%;
      }

      .accordion-subtitle {
        color: $color-gray-dark;
        font-size: 1rem;
        font-weight: 400;
        margin-top: f.rem(5px);
      }

      p {
        margin: 0;
        padding: 0;
      }
    }
    .chevron-container {
      height: 10px;
      width: 10px;
      display: inline-block;
      margin-top: 0;

      @include breakpoint(xs) {
        margin-top: f.rem(20px);
      }

      @include breakpoint(sm) {
        height: 8px;
        width: 8px;
      }

      .accordion-icon {
        transition: transform 0.5s ease;
        height: 10px;
        width: 10px;
        display: block;
        margin-top: 0;

        @include breakpoint(sm) {
          height: 8px;
          width: 8px;
        }

        @include breakpoint(md) {
          height: 10px;
          width: 10px;
        }
      }
    }
  }

  .nav-section.open {
    background-color: v.$gray-02;
    @include breakpoint(sm) {
      background-color: v.$gray-02;
    }
  }

  .dropdown-title,
  .nav-title {
    color: v.$gray-90;
    font-weight: $rubik-regular;
    padding-right: 0;
    margin-right: 0;

    @include breakpoint(xs) {
      padding-right: 0;
    }

    @include breakpoint(sm) {
      padding-right: f.rem(6px);
    }

    @include breakpoint(md) {
      padding-right: f.rem(9px);
    }

    @include breakpoint(lg) {
      margin-right: 0;
    }

    &:after {
      display: none;
    }
  }

  .dropdown-description,
  .nav-description {
    color: v.$gray-70;
    font-weight: $rubik-light;
    margin-top: f.rem(5px);

    @include breakpoint(xs) {
      margin-top: 0;
    }
  }

  .dropdown-description.active {
    color: v.$cyan-50;
  }

  .nav-section {
    background-color: v.$white;

    .submenu-heading {
      border-bottom: 1px solid v.$gray-10;
      color: v.$gray-80;
      font-weight: 500;
      text-transform: none;
    }

    a {
      color: v.$gray-90;
    }

    .signout-button {
      color: v.$gray-90;
      &:hover {
        text-decoration: underline;
      }
    }

    .sublink {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: f.rem(10px);
    }

    .sublink a {
      margin-bottom: 0;
    }

    .sublink::before {
      color: v.$gray-90;
    }
  }

  .submenu-section {
    .btn.btn-navigation.inverse-hover {
      background-color: v.$white;
      border-color: v.$gray-10;
      box-shadow: none;
      color: v.$gray-80;
      &:hover,
      &:focus,
      &:active {
        background-color: v.$gray-04;
      }

      .chevron-icon {
        fill: v.$gray-80;
      }
    }
  }

  .menu-link .nav-title {
    margin-top: 0;
  }
}

// mobile top nav - mips dropdown
.navigation-menu.navigation-new-style {
  #nav-section-MIPS {
    padding: f.rem(24px);

    .nav-column:last-child {
      .submenu-section-mips-mobile:last-child {
        .accordion-section {
          border: none;
        }
      }
    }

    @include breakpoint(xs) {
      padding: 0;
      .nav-column {
        margin-top: 0;
      }
    }
  }

  #nav-section-MIPS .nav-column .submenu-section {
    display: block;
    @include breakpoint(xs) {
      display: none;
    }

    @include breakpoint(sm) {
      display: block;
    }
  }

  .accordion-section {
    border: none;
    border-bottom: 1px solid v.$gray-10;
    margin: 0;

    .accordion {
      padding: f.rem(12px) f.rem(5px) f.rem(12px) f.rem(30px);
      background-color: v.$gray-02;

      .accordion-left-title {
        font-size: f.rem(14px);
      }

      .chevron-container {
        background-color: v.$gray-02;
        border: none;

        .accordion-icon {
          height: 10px;
          width: 10px;
        }
      }
    }

    .accordion-content {
      .accordion-text {
        padding: 0;
        margin-bottom: f.rem(10px);

        a {
          display: inline-block;
          font-size: 1rem;
          font-weight: 300;
          line-height: 1.4;
          text-decoration: none;
          margin-bottom: f.rem(10px);
        }

        .sublink a {
          margin-bottom: 0;
        }

        .btn.btn-navigation.inverse-hover {
          background-color: v.$white;
          border-color: v.$gray-10;
          box-shadow: none;
          color: v.$gray-80;
          font-size: 0.9rem;
          font-weight: 500;
          &:hover,
          &:focus,
          &:active {
            background-color: v.$gray-04;
          }

          .chevron-icon {
            fill: v.$gray-80;
          }
        }
      }
    }

    .accordion-text.dashed-border {
      border: none;
    }
  }

  .submenu-section-mips-mobile {
    display: none;

    @include breakpoint(xs) {
      display: block;
    }

    @include breakpoint(sm) {
      display: none;
    }

    @include breakpoint(md) {
      display: none;
    }
  }
}

.menu-dropdown-toggle {
  background-color: transparent;
  border: none;
  padding: f.rem(20px) f.rem(16px);
  position: relative;
  text-align: left;
  width: 100%;
  &[aria-expanded='true'] {
    .dropdown-title::after {
      transform: translateX(0.5rem) translateY(-0.25rem) rotate(180deg);
    }
  }
  @include breakpoint(sm) {
    border-bottom: 4px solid white;
    padding: 0;
    height: 103px;
    &:focus,
    &[aria-expanded='true'] {
      border-bottom: 4px solid $color-teal;
      outline: none;
      .dropdown-title {
        color: $color-teal;
      }
    }
  }
  @include breakpoint(md) {
    height: 106px;
    max-width: 132px;
    padding: 0 f.rem(10px);
    &::after {
      content: '';
      background: $color-gray-very-light;
      height: 64px;
      position: absolute;
      width: 1px;
      right: 0;
      top: 26px;
    }
  }
  @media (min-width: 1080px) {
    height: 108px;
    max-width: 158px;
    padding: 0 f.rem(15px);
  }
}
.menu-link {
  padding: f.rem(20px) f.rem(16px);
  width: 100%;
  display: inline-block;
  text-decoration: none;
  &:hover,
  &:focus {
    text-decoration: none;
  }
  @include breakpoint(sm) {
    margin-top: f.rem(-2px);
    align-items: center;
    display: grid;
    height: 103px;
    padding: 0 f.rem(14px);
    _:-ms-fullscreen,
    :root & {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  @include breakpoint(md) {
    align-content: center;
    height: 106px;
    justify-content: center;
    padding: 0 f.rem(10px);
  }
  @media (min-width: 1080px) {
    max-width: 158px;
    padding: 0 f.rem(15px);
  }
}
.dropdown-title {
  color: $color-white;
  display: inline-block;
  font-size: 1.25rem;
  line-height: 1.2;
  margin-bottom: f.rem(6px);
  margin-right: f.rem(8px);
  position: relative;
  &::after {
    content: '\f078';
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: f.rem(10px);
    transform: translateX(0.5rem) translateY(-0.25rem);
    transition: 0.25s;
  }
  @include breakpoint(sm) {
    color: $color-navy;
    font-size: 1rem;
    margin: 0;
    padding-left: f.rem(14px);
    padding-right: f.rem(22px);
    &::before {
      content: '';
      border-right: 1px solid $color-gray-very-light;
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
    }
  }
  @include breakpoint(md) {
    padding-left: 0;
    padding-right: 0;
    &::before {
      content: '';
      display: none;
    }
  }
  @media (min-width: 1080px) {
    font-size: 1.25rem;
    margin-right: f.rem(8px);
  }
}
.nav-title {
  color: $color-white;
  display: inline-block;
  font-size: 1.25rem;
  margin-bottom: f.rem(6px);
  margin-right: f.rem(8px);
  line-height: 1.2;
  @include breakpoint(sm) {
    color: $color-navy;
    font-size: 1rem;
    margin: 0;
    _:-ms-fullscreen,
    :root & {
      width: 100%;
    }
  }
  @media (min-width: 1080px) {
    font-size: 1.25rem;
  }
}
.nav-column {
  margin-top: 0;
}
.dropdown-description,
.nav-description {
  color: $color-white;
  display: block;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.1rem;
  @include breakpoint(sm) {
    display: none;
  }
  @include breakpoint(md) {
    color: $color-teal;
    font-size: 0.7rem;
    display: block;
  }
  @media (min-width: 1080px) {
    font-size: 0.8rem;
  }
}
.login .nav-description br {
  @include breakpoint(xs) {
    display: none;
  }
}
.submenu-heading {
  border-bottom: 1px solid $color-white;
  color: $color-white;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 f.rem(18px);
  padding: 0;
  text-transform: uppercase;
}
.nav-section {
  padding: f.rem(24px);
  box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1);
  & ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  ul + ul {
    margin-top: f.rem(26px);
  }

  .btn {
    font-weight: 500;
  }

  .sublink::before {
    content: '\2022';
    font-weight: 500;
    padding: 0 f.rem(12px);
  }

  $menu-spacing: 18px;
  @include breakpoint(sm) {
    background-color: $color-teal-dark;
    position: absolute;
    right: 0;
    &.open {
      .nav-column:not(:first-of-type) {
        margin-top: $menu-spacing;
      }
    }
    &[data-columns='1'] {
      width: 315px;
      _:-ms-fullscreen,
      :root & {
        .nav-column {
          flex-basis: 100%;
          margin-right: 0;
        }
      }
    }
    &[data-columns='2'] {
      width: 650px;
      .nav-column {
        display: flex;
        justify-content: space-between;
        li {
          flex-basis: calc((100% / 2) - 15px);
        }
      }

      _:-ms-fullscreen,
      :root & {
        .nav-column {
          flex-basis: calc((100% / 2) - 15px);
          margin-right: f.rem(30px);
        }
        .nav-column:last-of-type {
          margin-right: 0;
        }
      }
    }
    &[data-columns='3'] {
      width: 890px;
      .nav-column {
        display: flex;
        justify-content: space-between;
        li {
          flex-basis: calc((100% / 3) - 15px);
        }
      }

      _:-ms-fullscreen,
      :root & {
        .nav-column {
          flex-basis: calc((100% / 3) - 15px);
          margin-right: f.rem(30px);
        }
        .nav-column:last-of-type {
          margin-right: 0;
        }
      }
    }
    &[data-columns='4'] {
      width: 1200px;
      .nav-column {
        display: flex;
        justify-content: space-between;
        li {
          flex-basis: calc((100% / 4) - 15px);
        }
      }
      _:-ms-fullscreen,
      :root & {
        .nav-column {
          flex-basis: calc((100% / 4) - 15px);
          margin-right: f.rem(30px);
        }
        .nav-column:last-of-type {
          margin-right: 0;
        }
      }
    }
    .full-width-menu & {
      left: 0;
      width: 100%;
    }
    .sublink::before {
      color: $color-white;
    }
    .nav-column + .nav-column {
      margin-top: 0;
    }
  }
}
.submenu-section {
  a {
    color: $color-white;
    display: inline-block;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
    text-decoration: none;
    margin-bottom: f.rem(10px);

    &:hover:not(.btn),
    &:focus:not(.btn) {
      text-decoration: underline;
    }

    &:focus {
      outline-offset: 2px;
    }
  }
  li:last-child a {
    margin-bottom: 0;
  }
}

.nav-section .nav-column > .submenu-section {
  margin-top: 0;

  &:first-child {
    margin-top: 0;
  }

  @include breakpoint(xs) {
    margin-top: f.rem(26px);
  }
}

.full-width-menu {
  @include breakpoint(sm) {
    left: 0;
  }
}
.btn.btn-navigation {
  @include breakpoint(sm) {
    font-size: 0.78rem;
    .btn-navigation-icon {
      top: 25%;
    }
  }
  @include breakpoint(md) {
    font-size: 0.9rem;
  }
}
.signout-button {
  border: none;
  background: transparent;
  color: $color-white;
  display: inline-block;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.4;
  padding-left: 0;

  &:hover {
    text-decoration: underline;
  }
}
.account-menu-item {
  .dropdown-description {
    height: 35px;
  }
}