MetaPhase-Consulting/State-TalentMAP

// header container
.tm-header {
  background-color: $dos-blue;
  border-bottom: 3px solid $dos-red;

  .usa-menu-btn {
    background-color: transparent;
    font-size: 1.4em;
  }

  .usa-navbar {
    border-bottom: 0;
  }

  .logo-img-hr {
    border-right: 1px solid $color-white;
    padding-right: 10px;
    width: 90px;
  }

  .logo-img-tm {
    height: auto;
    padding-left: 10px;
    width: 165px;
  }

  // We have to set x-text classes so that sibling divs aren't pushed when hovered over
  .home-text {
    min-width: 63px;
  }

  .about-text {
    min-width: 64px;
  }

  .feedback-text {
    min-width: 89px;
  }

  .search-text {
    cursor: pointer;
    min-width: 90px;
  }

  .navigation-container {
    float: right;
    font-size: 14px;
    height: 100%;
  }

  .nav-link-container {
    float: left;
    height: 100%;
  }

  .account-notification-container {
    float: left;
    height: 100%;
  }

  .usa-logo {
    margin-left: 0;

    a {
      display: inline-block;
    }

    @media screen and (max-width: $screen-sm-min) {
      padding-left: 0;
    }
  }

  .header-nav-desktop {
    a {
      color: $color-white;
      text-decoration: none;
    }
  }

  .header-nav-link-container {
    display: inline-block;
    height: 100%;
    position: relative;
  }

  $header-link-padding: 20px;

  .header-nav-link {
    height: 100%;
    padding-left: $header-link-padding;
  }

  .dropdown.notifications-dropdown,
  .header-nav-link-text,
  .icon-alert-container {
    position: relative;
    top: 37%;
  }

  .glossary-link-container,
  .icon-alert-container {
    border-left: 1px solid $color-white;
    margin-left: 15px;
    padding-left: 15px;
  }

  .account-dropdown,
  .notifications-dropdown {
    top: inherit;
  }

  .notifications-icon-trigger {
    display: contents;
  }

  .account-container {
    .header-nav-link {
      top: ($header-desktop-height - $avatar-dropdown-size) / 2;
    }
  }

  .notifications-container {
    .header-nav-link {
      padding-left: 0;
    }
  }

  .header-nav-link-text {
    border-right: 1px solid $color-white;
    padding-right: $header-link-padding;
  }

  .notifications-icon {
    height: 16px;
  }

  .glossary-link-container {
    .icon-alert-container {
      border-left: 0;
      margin-left: 0;
      padding-left: 0;
    }
  }

  .is-active {
    a {
      color: $color-white;
    }
  }

  .header-nav-link-text:hover {
    a {
      color: $color-white;
    }
  }

  .link-right-active {
    .header-nav-link-text {
      border-right: 1px solid transparent;
    }
  }

  .is-highlighted {
    background-color: $tm-dark-blue;
    font-weight: 500;

    .header-nav-link-text {
      border-right: 1px solid transparent;
    }

    .header-nav-link-text:hover {
      a {
        color: $color-white;
      }
    }

    a,
    .fa {
      color: $color-white;

      &:active,
      &:hover {
        color: $color-white;
      }
    }
  }

  .is-highlighted {
    background-color: $tm-dark-blue;

    .header-nav-link-text:hover {
      a {
        color: $color-white;
      }
    }

    a,
    .fa {
      color: $color-white;

      &:active,
      &:hover {
        color: $color-white;
      }
    }
  }

  @media screen and (min-width: $screen-md-min) {
    .usa-logo {
      line-height: 5.5rem;
      margin-bottom: 0;
      margin-top: 0;

      a {
        font-size: 3.6rem;
        position: relative;
        top: 3px;
      }

      .logo-img-hr {
        height: auto;
        position: relative;
        top: 11px;
      }

      .logo-img-tm {
        height: auto;
        width: 185px;
      }
    }

    .usa-nav {
      border-top: 1px solid $tm-dark-blue;
    }

    .usa-navbar {
      height: $header-desktop-height;
      max-width: 1200px;
      padding-left: 0;
      padding-right: 5px; // handle notification count position
    }

    .usa-nav-secondary {
      top: -6rem;
    }

    .usa-logo-text {
      line-height: unset;
      width: auto;
    }
  }

  @media screen and (max-width: $screen-sm-max) {

    a {
      position: relative;
      top: 3px;
    }

    .usa-logo {
      .logo-img-tm {
        max-height: 50px;
        max-width: 200px;
        padding-top: 5px;
      }
    }

    .logo-img-hr {
      height: auto;
      position: relative;
      top: 3px;
      width: 55px;
    }

    .logo-img-tm {
      height: auto;
      padding-bottom: 1px;
      position: relative;
      top: 2px;
      width: 165px;
    }

    .usa-nav-secondary {
      padding-top: 30px;
    }

    .usa-logo {
      line-height: unset;
    }
  }
}

.search-bar-hidden {
  .results-search-bar-header {
    display: none;
  }
}

@media screen and (min-width: $screen-md-min) {
  .search-bar-hidden {
    .usa-nav {
      border-top: 1px solid $color-gray-light;
    }
  }

  // This is to set correct border color if the toggle-able search bar is hidden
  // but the user is on the search results page, which has its own search bar.
  .is-on-results-page {
    border-bottom-color: $tm-dark-blue;
  }
}

.usa-banner-inner {
  padding-bottom: .5em;
  padding-left: 0;
  padding-top: .5em;

  @media screen and (max-width: $screen-md-max) {
    padding-left: 20px;
  }
}