@use '../../global/scss/tools' as nsw;

.nsw-side-nav {
  position: relative;

  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  > ul {
    > li {
      &.active {
        border-left: solid 2px var(--nsw-brand-accent);
      }
    }
  }

  li {
    margin: 0;
    border-top: solid 1px var(--nsw-grey-04);

    li a { /* stylelint-disable-line selector-max-compound-selectors */
      padding-left: nsw.rem(24px);
    }

    li li a { /* stylelint-disable-line selector-max-compound-selectors */
      padding-left: nsw.rem(32px);
    }

    li li li a { /* stylelint-disable-line selector-max-compound-selectors */
      padding-left: nsw.rem(48px);
    }

    &.active {
      > a {
        font-weight: var(--nsw-font-bold);
      }
    }
  }

  a {
    font-weight: var(--nsw-font-normal);
    display: block;
    text-decoration: none;
    color: var(--nsw-text-dark);
    padding: nsw.rem(16px);
    text-wrap: pretty;

    &:hover {
      @include nsw.nsw-hover;
      outline-width: 0;

      .nsw-section--invert & {    
        @include nsw.nsw-hover-light;
        outline-width: 0;
      }
    }

    &:focus {
      outline-width: 3px;
    }

    &.current {
      background-color: var(--nsw-off-white);
      
      .nsw-section--invert & {    
        @include nsw.nsw-hover-light;
      }
    }

    .nsw-section--invert & {    
      color: var(--nsw-text-light);
    }
  }

  &__header {
    border-bottom: solid 2px var(--nsw-brand-dark);

    .nsw-section--invert & {    
      border-color: var(--nsw-brand-light);
    }

    a {
      font-weight: var(--nsw-font-bold);
      padding: nsw.rem(8px) 0;
    }

    + ul {
      > li:first-child {
        border-top: 0;
      }
    }
  }

  &__header,
  &__content {
    display: none;
  }

  &__toggle {
    font-weight: var(--nsw-font-bold);
    background-color: var(--nsw-off-white);
    width: 100%;
    border: 0;
    padding: nsw.rem(16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer;
    transition: background-color nsw.$nsw-transition-duration, color nsw.$nsw-transition-duration;
    top: nsw.rem(16px);
    position: sticky;
    
    @include nsw.font-size('md');

    &:hover:enabled {
      background-color: var(--nsw-brand-dark);
      color: var(--nsw-text-light);
    }

    &:focus {
      @include nsw.nsw-focus;
    }

    .material-icons {
      transition: transform 0.3s ease;
      transform: rotate(0deg);
    }

    &[aria-expanded='true'] {
      background-color: var(--nsw-brand-dark);
      color: var(--nsw-off-white);
    }

    &[aria-expanded='true'] .material-icons {
      transform: rotate(90deg);
    }

    .nsw-section--invert & {
      background-color: var(--nsw-off-white);
      color: var(--nsw-text-dark);

      &[aria-expanded='true'] {
        background-color: var(--nsw-brand-light);
      }

      &:hover:enabled {
        background-color: var(--nsw-brand-light);
        color: var(--nsw-text-dark);
      }

      .material-icons {
        color: var(--nsw-brand-dark);
      }
    }
  }

  &.open > &__content {
    display: block;
  }

  &.open > &__header {
    display: none;
  }

  @include nsw.breakpoint('lg') {
    &__header,
    &__content {
      display: block;
    }

    &__toggle {
      display: none;
    }

    &.open > &__header,
    &.open > &__content {
      padding-top: 0;
    }
  }
}