.navigation-open {
  overflow: hidden;
}

.nsw-navigation {
  @include z-index('middle');
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: $white;
  transition: map-get($transitions, base);
  transform: translateX(-100%);
  visibility: hidden;
  outline: none;
  height: 100%;
  overflow-y: auto;

  &.is-opening,
  &.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  &.is-closing {
    transform: translateX(-100%);
  }

  @include breakpoint('lg') {
    position: relative;
    transform: none;
    background-color: $light10;
    top: auto;
    left: auto;
    transition: none;
    visibility: visible;
    border-top: solid 1px $light40;
    overflow-y: visible;
    height: auto;
  }

  &__close {
    @include border-radius;
    width: rem(40px);
    height: rem(40px);
    background: none;
    border: 0;
    padding: 0;
    position: relative;
    right: rem(-10px);
    top: 0;
    text-align: center;

    &:hover {
      @include nsw-hover;
    }

    &:focus {
      @include nsw-focus;
    }

    .icon {
      height: rem(20px);
      width: rem(20px);
    }

    @include breakpoint('lg') {
      display: none;
    }
  }

  &__link-text {
    flex: 1 1 auto;
  }

  &__subbtn {
    width: rem(52px);
    height: rem(52px);
    background: none;
    border: 0;
    padding: 0;
    text-align: center;
    border-left: solid 1px $light20;

    &:hover {
      @include nsw-hover;
    }

    &:focus {
      @include nsw-focus;
    }

    .nsw-icon {
      width: rem(16px);
      height: rem(16px);
    }

    @include breakpoint('lg') {
      display: none;
    }
  }

}

.nsw-navigation__list,
.nsw-subnavigation__list {
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;

  @include breakpoint('lg') {
    @include container(0);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    position: relative;
  }
}

.nsw-subnavigation__list {
  @include breakpoint('lg') {
    @include nsw-spacing(margin-top, xl);
    display: flex;
  }
}

.nsw-navigation__list-item,
.nsw-subnavigation__list-item,
.nsw-subnavigation__title {
  border-bottom: solid 1px $light20;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;

  @include breakpoint('lg') {
    border-bottom: 0;
  }
}

.nsw-navigation__list-item,
.nsw-subnavigation__list-item {
  @include font-stack;

  @include breakpoint('lg') {
    @include font-stack('heading');
    border-bottom: 0;
  }
}

.nsw-subnavigation__list-item {

  @include breakpoint('lg') {
    width: 32%;
    border-top: solid 1px $light20;

    &:nth-child(3n+2) {
      margin-left: 2%;
      margin-right: 2%;
    }

    &:nth-last-child(-n+3) {
      border-bottom: solid 1px $light20;
    }
  }
}

.nsw-navigation__link,
.nsw-subnavigation__link,
.nsw-subnavigation__title-link {
  flex: 1 1 auto;
  padding: 16px;
  color: $dark80;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;

  @include breakpoint('lg') {
    @include z-index('middle');
    position: relative;
  }

  &:hover {
    @include nsw-hover;
  }

  &:focus {
    @include nsw-focus($offset: false);
  }

  &.is-open {
    background-color: $white;
  }
}

.nsw-navigation__link-icon {
  margin-top: rem(10px);
  transform: translateY(-50%);
  height: rem(16px);
  width: rem(16px);

  @include breakpoint('lg') {
    display: block;
    height: rem(12px);
    width: rem(12px);
    margin-left: rem(10px);
    transform: translateY(-50%) rotate(90deg);
  }

  .nsw-navigation__link.is-open & {
    transform: translateY(-50%) rotate(270deg);
  }
}

.nsw-subnavigation {
  @include z-index;
  position: absolute;
  top: 0;
  background-color: $white;
  width: 100%;
  transition: map-get($transitions, base);
  transform: translateX(-100%);
  visibility: hidden;
  left: 0;
  height: 100%;
  overflow-y: auto;

  &.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  @include breakpoint('lg') {
    @include container;
    @include nsw-spacing(padding-top, lg);
    @include nsw-spacing(padding-bottom, lg);
    top: 100%;
    background: $white;
    box-shadow: map-get($shadows, menu);
    transition: none;
    transform: none;
    height: auto;
    overflow: auto;

    &.is-open {
      left: 50%;
      transform: translateX(-50%);
    }
  }

  @include breakpoint('lg') {
    @include nsw-spacing(padding-top, xxl);
    @include nsw-spacing(padding-bottom, xxl);
  }
}

.nsw-navigation__header,
.nsw-subnavigation__header {
  @include nsw-spacing(padding-top, xs);
  @include nsw-spacing(padding-bottom, xs);
  @include container;
  border-bottom: solid 2px $nsw-primary-blue;
  display: flex;
  align-items: stretch;
  justify-content: space-between;

  h2 {
    @include font-stack('heading');
    @include nsw-spacing(margin, none);
    @include font-size('md');
    flex: 1 1 auto;
    align-self: center;
  }

  @include breakpoint('lg') {
    display: none;
  }
}

.nsw-subnavigation__back-btn {
  @include font-stack('heading');
  @include font-size('md');
  @include nsw-spacing(padding, none xs);
  @include border-radius;
  background: none;
  border: 0;
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  position: relative;
  left: -8px;

  &:hover {
    @include nsw-hover;
  }

  &:focus {
    @include nsw-focus;
  }

  .nsw-icon {
    width: rem(16px);
    height: rem(16px);
    margin-right: rem(6px);
    align-self: center;
  }

  @include breakpoint('lg') {
    display: none;
  }
}

.nsw-subnavigation__title {
  @include font-stack('heading');
  @include font-size('md');
  @include nsw-spacing(margin, none);

  @include breakpoint('lg') {
    @include font-size('lg');
    display: inline-block;
  }
}

.nsw-subnavigation__title-link {
  @include breakpoint('lg') {
    @include nsw-spacing(padding, none);
    color: $nsw-primary-blue;
  }
}

.nsw-subnavigation__description {
  @include font-stack;
  @include nsw-spacing(margin-top, md);
  @include font-size('xs');
  display: none;

  @include breakpoint('lg') {
    display: block;
  }
}

.nsw-subnavigation .nsw-subnavigation,
.nsw-subnavigation .nsw-navigation__link-icon {

  @include breakpoint('lg') {
    display: none;
  }

}