// Navigation

@import "../base-shared";

.usajobs-nav-secondary {
  position: relative;
  margin-bottom: $size-M;
  background-color: $color-white;

  &.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: $layer-panel;
    @include boxShadow(2);
  }

  &__body {
    @include outer-container();
    max-width: $site-max-width;
    border-bottom: 1px solid $color-gray-light;

    a {
      // Another override of the base styles just to be certain we don't have
      // underlined links in the nav
      text-decoration: none;
    }
  }

  &__menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    text-align: left;
  }

  &__container {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;

    &::before,
    &::after {
      content: none;
    }

    &.is-hidden {
      display: none;
    }
  }

  &__item,
  &__more-toggle {
    display: block;
    padding: $size-S $size-default;
    font-size: $base-font-size;
    line-height: 1;
    color: $color-primary;
    text-align: center;
    text-decoration: none;

    @include media($ML) {
      padding: $size-default $size-M;
    }

    &:visited {
      color: $color-primary;
    }

    &:hover {
      color: $color-primary-darker;
      text-decoration: underline;
    }

    &.is-active,
    &[data-state="is-active"] {
      font-weight: bold;
      color: $color-primary-darkest;
      border-bottom: 3px solid $color-primary-alt-darkest;
    }

    .fa-check {
      color: $color-green;
    }

    .usajobs-icon {
      width: 1.7rem;
      height: 1.7rem;
      color: $color-primary;
    }
  }

  &__more-toggle {
    border-left: 1px solid $color-gray-lighter;
  }

  &__more-container {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin: 0;
    background-color: $color-gray-warm-light;
    @include boxShadow(1);
    z-index: 1;

    &[data-state="is-open"] {
      display: block;
    }

    li {
      width: 100%;

      a {
        text-align: left;
        white-space: nowrap;
      }

      a:hover {
        background-color: $color-gray-lighter;
        text-decoration: underline;
      }
    }
  }
}

.usajobs-profile-secondary-nav,
.usajobs-help-secondary-nav {
  position: relative;
  margin-bottom: $size-M;
  background-color: $color-primary-darker;

  @include media($L) {
    margin-bottom: $size-L;
  }

  &.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: $layer-panel;
    @include boxShadow(2);
  }

  &__body {
    @include outer-container();
    max-width: $site-max-width;

    @include media($L) {
      padding-left: $size-M;
      padding-right: $size-M;
    }

    a {
      // Another override of the base styles just to be certain we don't have
      // underlined links in the nav
      text-decoration: none;
    }
  }

  &__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0;
    text-align: center;

    @include media($L) {
      text-align: left;
    }
  }

  &__item {
    display: inline-table;
    text-align: center;
    border-color: $color-white;
    padding: 0 $size-default;
  }

  &__link {
    display: block;
    padding: $size-default 0 0.8975rem;
    line-height: 1.25;
    font-size: $base-font-size;
    border-bottom: 0.3525rem solid transparent;
    color: $color-white;
    @include transition(all 0.25s ease-in-out);
    text-decoration: none;

    &:visited {
      color: $color-white;
    }

    &:hover {
      color: $color-white;
      text-decoration: none;
      border-bottom-color: inherit;
    }

    &.is-active,
    &[data-state="is-active"] {
      font-weight: bold;
      border-bottom-color: inherit;
    }
  }

  &__short-name {
    @include media($SM) {
      display: none;
    }
  }
  &__long-name {
    display: none;

    @include media($SM) {
      display: inherit;
    }
  }
}

.usajobs-profile-secondary-nav.has-open-opps-tab {
  background-color: inherit;
  margin-bottom: 8.2rem;

  .usajobs-profile-secondary-nav__bground {
    background-color: $color-primary-darker;
  }

  .usajobs-profile-secondary-nav--open-opps-tab {
    background-color: $color-white;

    @include media($ML) {
      background-color: inherit;
    }

    &__link {
      display: inline-block;
      width: 100%;
      text-align: right;
      padding: $size-base;
      @include permaLink();
      text-decoration: none;

      @include media($ML) {
        width: 40%;
        max-width: 26rem;
        float: right;
        padding: $size-base $size-S;
        margin-right: $size-S;
        background-color: $color-white;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }

      @include media($L) {
        max-width: 32rem;
        margin-right: $size-XL;
      }
    }

    &__return {
      font-weight: bold;
      font-size: $small-font-size;
    }

    &__logo {
      width: 170px;
      vertical-align: middle;

      @include media($L) {
        width: 220px;
      }
    }
  }
}

.usajobs-help-secondary-nav {
  margin-bottom: 0;

  &__item.glossary {
    display: none;

    @include media($M) {
      display: inline-block;
      float: right;
    }
  }

  &__glossary-trigger {
    @include removeButton();
    padding: $size-default 0;
    color: $color-white;
    background-color: $color-primary-darker; // IE is inheriting the blue background of a button here
    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg%20%20fill%3D%27%23FFFFFF%27%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19.415%2016.18l-9.044%203.744a.934.934%200%200%201-.74%200L.584%2016.18A.938.938%200%200%201%200%2015.314V.937A.937.937%200%200%201%201.296.072l.002.002.008.003L10%203.673%2018.694.075l.01-.003A.938.938%200%200%201%2020%20.936v14.376c0%20.393-.242.73-.585.868zM9.063%2017.66V5.314L1.875%202.34v12.346l7.188%202.974zm9.062-15.32l-7.188%202.974V17.66l7.188-2.974V2.34z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 1em;
    padding-left: 2.5rem;

    &:visited {
      color: $color-white;
      background-color: $color-primary-darker; // IE is inheriting the blue background of a button here
    }

    &:hover {
      color: $color-white;
      background-color: $color-primary-darker; // IE is inheriting the blue background of a button here
    }
  }
}