@use '../../sass/abstracts/variables' as *;
@use '../../sass/abstracts/typography';
@use '../../sass/abstracts/mixins';

#{$component-prefix}sidebar-nav {
  $p: &;
  @include typography.headline-small;

  ul {
    padding: 0;
    margin: 0;
    overflow: hidden;
    transition: height ease $transition-duration-long;
    list-style: none;

    li:last-child {
      padding-bottom: 1.688rem;
    }
  }

  li {
    list-style: none;
  }

  &__symbol {
    &-left {
      font-family: 'unity symbols';
      font-weight: normal;
      font-style: normal;
      display: inline-block;
      margin-right: 0.625rem;
    }

    &-right::after {
      @include mixins.unity-symbols('arrow-forward');
      position: absolute;
      right: 40px;
      margin-top: 2px;
    }
  }

  button {
    position: relative;
    top: -2px;
    transition: transform 0.4s ease;

    &[aria-expanded]::after {
      @include mixins.unity-symbols('keyboard-arrow-down', 0.75rem);
      margin-left: 0.5rem;
    }

    &[aria-expanded='true'] {
      transform: rotatex(180deg);
    }
  }

  &__item {
    padding: 0.5rem 0 0.5rem 2rem;

    &:first-child {
      padding-top: 1rem;
    }

    > a,
    > span {
      color: $black;

      &:focus-visible {
        outline-offset: 4px;
      }
    }

    #{$p}__link:hover,
    [aria-current='page']#{$p}__link {
      border-bottom: 2px solid;
    }
  }

  /* Level 2 */
  &__submenu {
    #{$p}__item {
      padding-left: 1.75rem;
    }
  }

  /* Level 3 */
  &__submenu &__submenu {
    #{$p}__item {
      padding-left: 2.5rem;
    }
  }

  /* Level 4 */
  &__submenu &__submenu &__submenu {
    #{$p}__item {
      padding-left: 3rem;
    }
  }
}