@import 'variables';

.nav-submenu__span--one-quarter {
  width: 100%;

  @include media-query-small {
    float: left;
    width: 25%;
  }
}

.nav-submenu__span--four-fifths {
  @extend %clearfix;
  border-bottom: solid 1px $color__brand--light-grey;
  float: left;
  width: 100%;
  margin-bottom: 100px;

  @include media-query-small {
    border-bottom: none;
    width: 80%;
    margin-bottom: 0;
  }
}

.nav-submenu__five-col-gnav {
  @extend %clearfix;
  width: 100%;
  position: absolute;
  background: $color__brand--white;
  z-index: 9999;
  left: 0;

  @include media-query-small {
    @include rem(top, 10px);
    background-color: $color__brand--white;
    box-shadow: 0 19px 27px $nav-shadow;
    box-sizing: border-box;
  }

  @include media-query-large {
    width: 83.3%;
  }

  &.abs-right {
    right: 0;
    left: auto;
  }

  &.abs-left {
    left: 0;
  }

  .gnav-text-part {
    width: 80%;
  }

  .gnav-featured-part {
    width: 20%;
  }
}

.nav-submenu__five-col-gnav,
.nav-submenu__six-col-gnav {
  .nav-submenu__close-button {
    @include media-query-small {
      position: absolute;
      right: 10px;
      top: -5px;
    }

    @include media-query-medium {
      display: none;
    }
  }
}

.nav-submenu__six-col-gnav {
  position: absolute;
  background: $color__brand--white;
  z-index: 9999;
  width: 100%;
  left: 0;

  @include media-query-small {
    @include rem(padding-top, 8px);
    background-color: $color__brand--white;
    box-shadow: 0 19px 27px $nav-shadow;
    box-sizing: border-box;
    min-height: 400px;
  }

  .gnav-text-part {
    width: 80%;

    @include media-query-large {
      width: 66.66%;
    }
  }

  .gnav-featured-part {
    width: 20%;

    @include media-query-large {
      width: 33.33%;
    }

    h2 {
      @include rem(margin-left, 15px);
      @include rem(margin-right, 15px);
    }

    .nav-submenu__col {
      width: 100%;

      @include media-query-large {
        width: 50%;
        float: left;
      }
    }
  }

  .nav-submenu__promo {

    img {
      width: 120px;
      margin-left: 0;

      @include media-query-large {
        width: 100%;
      }
    }

    p {
      &:first-of-type {
        display: none;

        @include media-query-large {
          display: block;
        }
      }
    }
  }
}

.nav-submenu__span--one-fifth {
  display: none;
  float: left;
  width: 20%;

  @include media-query-small {
    display: block;
  }
}

.nav-submenu__col {
  box-sizing: border-box;
  padding-left: 0;

  @include media-query-small {
    @include rem('padding', 0 15px 10px);
  }

  > br {
    display: none;

    @include media-query-small {
      display: block;
    }
  }
}

.nav-submenu__l2-header {
  @include rem('font-size', 14px);
  @include rem('height', 55px);
  @include rem('line-height', 55px);
  @include rem('text-indent', 20px);
  border-top: solid 1px $color__brand--light-grey;
  color: $color__brand--dark-grey;
  cursor: pointer;
  display: block;
  font-family: $font__mns-london--bold;
  margin-bottom: 0;
  position: relative;
  text-transform: none;
  width: 320px;

  @include media-query-small {
    @include rem('margin', 13px 0 8px 0);
    @include rem(padding, 0 0 5px);
    border-top: none 0 transparent;
    border-bottom: 1px solid $color__brand--light-grey;
    cursor: default;
    height: auto;
    line-height: inherit;
    position: static;
    text-indent: 0;
    text-transform: uppercase;
    width: auto;
  }

  .nav-submenu__span--one-quarter:first-child &:first-child {
    border-top: none 0 transparent;
  }

  &::before {
    @include rem('font-size', 13px);
    @include rem('width', 53px);
    @include rem('right', -5px);
    @include rem('top', 23px);
    margin: 0;
    padding: 0;
    position: absolute;
    float: right;

    @include media-query-small {
      display: none;
    }
  }

  &.is-selected {
    &::before {
      @include transform(rotate(180deg));
    }
  }
}

.nav-submenu__l2-header--empty {
  @include rem(height, 14px);
  display: none;

  @include media-query-small {
    display: inline-block;
  }

}

.nav-submenu__l2-header--promo {
  color: $color__brand--red;
}

.nav-submenu__link-list {
  @include rem('font-size', 13px);
  @include rem('margin', 0);
  display: none;
  padding: 0;
  list-style: none;
  overflow: hidden;

  @include media-query-small {
    @include rem('margin-bottom', 25px);
    display: block;
    padding: 0;
  }

  @include media-query-medium {
    @include rem('font-size', 15px);
  }

  &.is-expanded {
    display: block;
    height: auto;
  }

  > li {
    @include rem('line-height', 37px);
    @include rem('font-size', 14px);
    @include rem('margin-left', 40px);
    color: $color__brand--black;

    @include media-query-small {
      @include rem('line-height', 20px);
      @include rem('margin-bottom', 10px);
      margin-left: 0;
    }

    > a {
      font-family: $font__mns-london;
      text-decoration: none;
      cursor: pointer;
      display: block;
    }

    &:hover {
      text-decoration: underline;
    }

  }
}

.nav-submenu__close-button {
  @include rem('font-size', 13px);
  line-height: 1;
  display: none;
  text-align: right;
  cursor: pointer;
  text-transform: uppercase;

  @include media-query-small {
    display: block;
    position: absolute;
    right: 10px;
    top: 5px;
  }

  @include media-query-medium {
    display: none;
  }

  &::before {
    @include rem('font-size', 10px);
    @include rem('margin-left', 5px);
    @include rem('margin-top', 1px);
    float: right;
    font-weight: 700;
  }
}

.nav-submenu__link-highlight {
  @include rem('margin-right', 3px);
  display: none;
  color: $color__brand--green;
  text-transform: uppercase;

  @include media-query-medium {
    display: inline-block;
  }
}

.nav-submenu__promo {

  a {
    @include rem('font-size', 14px);
    text-decoration: underline;

    &:hover {
      text-decoration: underline;
    }
  }

  h3 {
    @include rem('font-size', 14px);
    @include rem('margin-top', 10px);
    @include rem('margin-bottom', 7px);
    font-family: $font__mns-london;
    text-transform: uppercase;

    @include media-query-large {
      @include rem('margin-bottom', 15px);
    }
  }

  img {
    @include rem('margin-top', 5px);
    width: 100%;
  }

  .loader__spinner--image {
    @include rem(height, 120px);

    @include media-query-large {
      @include rem(height, 170px);
    }

    &::after {
      @include rem(width, 31px);
      @include rem(height, 31px);
    }
  }

}

.nav-primary__submenu .copy > p,
.nav-submenu__copy > p,
.nav-submenu__five-col-gnav .copy > p,
.nav-submenu__five-col-gnav > p,
.nav-submenu__six-col-gnav .copy > p,
.nav-submenu__six-col-gnav > p {
  @include rem('font-size', 12px);
  @include rem('line-height', 20px);
  @include rem('letter-spacing', .5px);
  color: $color__brand--grey-80;
  font-family: $font__mns-london;

  @include media-query-small {
    @include rem('line-height', 16px);
  }
}

.nav-primary__submenu .copy a,
.nav-submenu__copy a {
  text-decoration: underline;

  &::after {
    @include rem('top', 9px);
    left: 0;
  }
}

@media screen and (max-height: 750px) and (min-width: calculateEm($screen-sm/1px)) {
  .nav-submenu__l2-header,
  .nav-submenu__link-list {
    @include rem('font-size', 14px);
  }

  .nav-submenu__link-list > li {
    @include rem('line-height', 15px);
  }
}

.nav-submenu__back-bar {
  @include rem('line-height', 45px);
  @include rem('height', 45px);
  background-color: $color__brand--white;
  text-align: center;

  @include media-query-small {
    display: none;
  }

  .is-active & {
    background-color: $color__brand--black;
  }

}

.nav-submenu__back-bar-link {
  @include rem('left', 20px);
  color: $color__brand--white;
  cursor: pointer;
  display: inline-block;
  position: absolute;

  &::before {
    @include rem('padding-right', 5px);
    @include rem('top', 2.5px);
    font-size: 13px;
    position: relative;
    transform: rotate(90deg);
    display: inline-block;
  }
}

.nav-submenu__back-bar-label {
  @include rem('font-size', 15px);
  @include rem('max-width', 156px);
  color: $color__brand--white;
  text-transform: uppercase;
  width: 100%;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}