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

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

.primary-navigation {
  //display: none;
  overflow: hidden;

  @include mq(mq960) {
    width: 35%;
    margin: 0;
    float: left;
  }

  @include mq(mq1200) {
    width: 25%;
  }

  .btn {
    &--menu {
      background: transparent;
      border: none;
      border-bottom: 2px solid #D0D0D0;
      width: 100%;
      padding: 15px 20px;
      color: $brand;
      cursor: pointer;
      border-radius: 0;

      font: {
        size: font-size(16);
      }
      text-align: left;

      @include states {
        background: transparent;
        color: $brand;
      }

      @include mq(mq960) {
        display: none;
      }
    }
  }

  ul {
    background: #E7E7E7;
    overflow: hidden;
    margin: 0;
    padding: 20px;

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

    @include mq(mq960) {
      background: transparent;
      padding: 30px;
    }

    @include mq(mq1200) {

    }

    &[data-state="hidden"] {
      display: none;

      @include mq(mq960) {
        display: block;
      }
    }

    ul {
      clear: both;

      padding: 0 10px;

      @include mq(mq600) {
        padding: 0 12.5px;
      }

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

  li {
    display: block;
    float: left;
    width: 100%;
    margin: 0;
  }

  a {
    float: left;
    padding: 5px 0;

    color: $brand;
    font: {
      size: font-size(16);
      weight: bold;
    }
  }

  span {
    float: left;
    padding: 5px 0;
    color: $brand;
    text: {
      decoration: none;
      transform: uppercase;
    }
    font: {
      size: font-size(16);
      weight: bold;
    }
  }

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