.nav-menu {
  display: inline;
  order: 1;
  @media screen and (min-width: 73.938em)  {
    width: 65%;
  }
  &-list {
    $block: unquote("#{&}");
    margin: 0;
    padding: 0;
    display: inline;
    &__item {
      display: inline-block;
    }
    &__anchor {
      color: #000;
      cursor: pointer;
      display: block;
      font-size: $font-x-small;
      padding: $spacer-half $spacer-small;
      text-align: center;
      text-decoration: none;
      text-transform: capitalize;
      position: relative;
      @media screen and (min-width: 18.750em) {
        font-size: $font-small;
      }
      @include for-size(tablet-portrait-up) {
        text-align: inherit;
        padding: $spacer-half;
      }
      @include for-size(desktop-up) {
        padding: $spacer-half 1em;
      }
      &:before {
        background-image: url('/static/img/icons/yegna/icon-cast.svg');
        background-size: 100%;
        @include for-size(tablet-portrait-up) {
          background-size: auto;
        }
        background-position: center center;
        background-repeat: no-repeat;
        content: "";
        display: block;
        height: 20px;
        margin: 0 auto;
        vertical-align: middle;
        width: 20px;
        @media screen and (min-width: 18.750em) {
          height: 27px;
          width: 27px;
        }
        @include for-size(tablet-portrait-up) {
          display: inline-block;
          margin: 0 $spacer-half 0 0;
          height: 33px;
          width: 37px;
        }
      }
      span {
        position: relative;
        &:after {
          content: "";
          display: block;
          border-radius: 10%;
          background: transparent;
          width: 100%;
          height: 3px;
          position: absolute;
          margin: -3px auto;
          right: 0;
          left: 0;
          @include for-size(tablet-landscape-up) {
            margin: -5px auto;
          }
        }
      }
      &:active, &:hover, &:focus {
        opacity: 1;
        transition: opacity 100ms ease-in-out;
        &:before {
          opacity: 1;
          text-decoration: none;
        }
        span:after {
          background-color: #000;
          transition: background-color 100ms ease-in-out;
        }
      }
    }
    .active {
      opacity: 1;
      &:before {
        opacity: 1;
        text-decoration: none;
      }
      span:after {
        background-color: #000;
        transition: background-color 100ms ease-in-out;
      }
    }
    .open {
      background: #fff;
      &:active, &:hover, &:focus {
        color: #000;
        transition: color 100ms ease-in-out;
        &:before {
          opacity: 1;
          transition: opacity 100ms ease-in-out;
        }
      }
    }
  }

  #menu:before {
    background-image: url('/static/img/icons/yegna/icon-burger.svg');
    background-size: 100%;
    @include for-size(tablet-portrait-up) {
      background-size: auto;
    }
  }
  #watch:before {
    background-image: url('/static/img/icons/yegna/icon-watch.svg');
    background-size: 70%;
    @include for-size(tablet-portrait-up) {
      background-size: auto;
    }
  }
  #cast:before {
    background-image: url('/static/img/icons/yegna/icon-cast.svg');
    background-size: 100%;
    @include for-size(tablet-portrait-up) {
      background-size: auto;
    }
  }
  #listen:before {
    background-image: url('/static/img/icons/yegna/icon-listen-black.svg');
    background-size: 100%;
    @include for-size(tablet-portrait-up) {
      background-size: auto;
    }
  }
}
