/*------------------------------------*\
  $PRIMARY NAVIGATION
\*------------------------------------*/

$primary-nav-alignment: right;
$primary-nav-active-border-color: $brand;

.primary-navigation {
  display: none;
  overflow: hidden;
  margin: {
    top: -21px;
    bottom: 21px;
  }
  width: 100%;

  @include mq(mq600) {
    margin: {
      top: -35px;
      bottom: 35px;
    }
  }

  @include mq(mq960) {
    margin: {
      top: -95px;
    }
    display: block;
  }

  .wrap {
    width: 2000px;
    max-width: 100%;
    border-top: 1px solid #e5e5e5;
  }

  ul {
    overflow: hidden;
    
    @include mq(mq960) {
      width: 1200px;
      max-width: 95%;
      margin: 0 auto;
      height: 60px;
      overflow: hidden;
      display: flex;
      justify-content: flex-end;
    }

  }

  li {
    display: block;

    &:first-of-type {
      a {
        padding: {
          top: 41px;
        }

        @include mq(mq600) {
          padding: {
            top: 47px;
          }
        }

        @include mq(mq960) {
          padding: {
            top: 0;
          }
        }
      }
    }

    &:last-of-type {
      a {
        @include mq(mq960) {
          border-right: 0;
        }
      }
    }
  }

  a {
    display: block;
    padding: 20px 5%;
    color: #262626;
    font: {
      family: $heading-font;
      weight: 400;
      size: font-size(15);
    }
    border-bottom: 1px solid #e5e5e5;
    transition: color 0.3s;
    text-decoration: none;

    @include states {
      color: #d00000;
    }

    &.active {
      background: #d00000;
      color: #fff;
    }

    @include mq(mq960) {
      padding: {
        top: 0;
        right: 20px;
        bottom: 0;
        left: 20px;
      }
      border-bottom: 0;
      border-right: 1px solid #e5e5e5;
      height: 60px;
      line-height: 60px;
    }

    @include mq(mq1200) {
      padding: {
        right: 35px;
        left: 35px;
      }
    }
  }

  /**
   * If the navigation has been requested on mobile we should show it.
   * We're using stateful data attributes
   */
  &[data-state="active"] {
    display: block;
  }
}