@import "../../../sass/webpack_deps";
@import "masthead_variables";

.masthead_nav {
  bottom: 0;
  color: $color-white;
  position: absolute;
  width: 100%;
  z-index: z("global-header");

  &__container {
    @include container-padded();
    border-top: .1rem solid rgba($color-white, .3);
    height: $masthead-nav-height;
  }
}

.masthead_nav__link {
  color: $color-white;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: $masthead-nav-height;
  text-transform: uppercase;

  [class*="icon-chevron"] {
    backface-visibility: hidden;
    display: inline-block;
    font-size: 6px;
    font-weight: 600;
    line-height: 1.6;
    transition: transform 500ms;
    vertical-align: 20%;
  }
}

.masthead_nav__link:first-child {
  float: left;

  &:hover,
  &:active,
  &:focus {
    @media (min-width: $min-960) {
      [class*="icon-chevron"] {
        transform: translateX(.4rem);
      }
    }
  }

  [class*="icon-chevron"] {
    margin-right: .4rem;

    @media (min-width: $min-960) {
      margin-right: .8rem;
    }
  }
}

.masthead_nav__link:last-child {
  float: right;

  &:hover,
  &:active,
  &:focus {
    @media (min-width: $min-960) {
      [class*="icon-chevron"] {
        transform: translateX(-.4rem);
      }
    }
  }

  [class*="icon-chevron"] {
    margin-left: .4rem;

    @media (min-width: $min-960) {
      margin-left: .8rem;
    }
  }
}