@mixin _make-nav-icon-purple {
  filter: invert(15%) sepia(80%) saturate(550%) hue-rotate(210deg)
    brightness(80%) contrast(110%);
}

.Nav {
  width: 100%;

  &__section {
    display: none;
    flex-direction: column;
    width: 100%;

    @media (min-width: $screen-md) {
      flex-direction: row;
    }

    &--show {
      display: flex;
      flex-direction: column;

      &.Nav__section--level1 {
        @media (min-width: $screen-md) {
          flex-direction: row;
        }
      }
    }

    &--level1 {
      display: flex;
      flex-direction: column;
      padding-bottom: 0;
      padding-top: 0;

      @media (min-width: $screen-md) {
        flex-direction: row;
        gap: 4px;
      }
    }

    &--level2 {
      @media (min-width: $screen-md) {
        display: none;
      }
    }
  }

  &__link {
    align-items: center;
    text-align: left;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
    color: $navy-900;
    display: flex;
    font-family: $font-family-base;
    font-size: map-get($font-size-aliases, "template");
    gap: 5px;
    line-height: map-get($line-heights, "default");
    margin: 0;
    padding: 8px 15px;
    position: relative;
    text-decoration: none;
    transition: background-color $transition-speed, color $transition-speed;
    width: 100%;

    @media (min-width: $screen-md) {
      padding-left: $gutter / 2;
      padding-right: $gutter / 2;
      width: auto;
    }

    &:hover {
      &:not(span) {
        color: map-get($color-aliases, "selected");
        background-color: #fbfbff;

        &::before {
          @include _make-nav-icon-purple;
        }
      }
    }

    &--current {
      background-color: map-get($color-aliases, "selected-bg") !important;
      color: map-get($color-aliases, "selected");
    }

    &--parent {
      color: map-get($color-aliases, "selected");
    }

    &::before {
      content: "";
      left: 10px;
      height: 8px;
      position: absolute;
      top: calc(1rem - 1px);
      transition: transform $transition-speed;
      width: 8px;
    }

    &--level2 {
      &::before {
        left: 32px;

        @media (min-width: $screen-md) {
          left: 12px;
        }
      }
    }

    &--level3 {
      &::before {
        left: 42px;

        @media (min-width: $screen-md) {
          left: 22px;
        }
      }
    }

    &--level4 {
      &::before {
        left: 52px;

        @media (min-width: $screen-md) {
          left: 32px;
        }
      }
    }

    &--type {
      &-back {
        &::before {
          background: transparent url("~/images/icons/chevron-left.svg") 50% 50%
            no-repeat;
        }

        &:hover {
          &:before {
            transform: translateX(-2px);
          }
        }
      }

      &-link {
        &:after {
          content: "";
          background: transparent url("~/images/icons/external_link.svg") 50%
            50% no-repeat;
          background-size: cover;
          height: 16px;
          width: 16px;
        }
      }
    }

    &--level1 {
      padding-left: 26px;
      padding-right: 26px;

      @media (min-width: $screen-md) {
        padding-left: $gutter / 2;
        padding-right: $gutter / 2;
      }

      &.Nav__link--parent {
        background-color: map-get($color-aliases, "~/images/selected-bg");
      }
    }

    &--level2 {
      padding-left: 48px;

      @media (min-width: $screen-md) {
        padding-left: 24px;
      }
    }

    &--level3 {
      padding-left: 60px;

      @media (min-width: $screen-md) {
        padding-left: 36px;
      }
    }

    &--level4 {
      padding-left: 70px;

      @media (min-width: $screen-md) {
        padding-left: 44px;
      }
    }

    &--level5 {
      padding-left: 80px;

      @media (min-width: $screen-md) {
        padding-left: 55px;
      }
    }
  }

  &__toggle {
    cursor: pointer;
    width: 100%;

    &::before {
      background: transparent url("~/images/icons/angle-down.svg") 50% 50%
        no-repeat;
      transform: rotate(-90deg);
      will-change: transform;
    }

    &--on::before {
      transform: rotate(0deg);
    }

    &--parent {
      color: map-get($color-aliases, "selected");

      &::before {
        @include _make-nav-icon-purple;
      }

      &--on::before {
        transform: rotate(0deg);
      }
    }
  }

  &__pill {
    margin-left: auto;
  }

  &__divider {
    margin-bottom: 8px;
    margin-top: 8px;
  }

  // Dropdown styling starts
  &__item--has-dropdown {
    position: relative;
  }

  &__dropdown-toggle {
    @media (min-width: $screen-md) {
      &::after {
        background: transparent url("~/images/icons/angle-down.svg") 50% 50%
          no-repeat;
        content: "";
        height: 8px;
        width: 8px;
      }
    }

    &:hover {
      @media (min-width: $screen-md) {
        &::after {
          @include _make-nav-icon-purple;
        }
      }
    }
  }

  &__dropdown {
    display: flex;
    flex-direction: column;

    @media (min-width: $screen-md) {
      background: $base-0;
      border: map-get($color-aliases, "border") 1px solid;
      border-radius: 5px;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
      display: none;
      padding: 5px;
      position: absolute;
      left: 0;
      width: 200px;
    }

    .Nav__item--has-dropdown & {
      @media (min-width: $screen-md) {
        left: auto;
        right: 0;
      }
    }

    .Nav__item--has-dropdown:hover > & {
      display: flex;
    }

    .Nav__link {
      @media (min-width: $screen-md) {
        padding-left: 15px;
        padding-right: 15px;
      }
    }
  }
  // Dropdown styling ends
}

.Nav--sidebar {
  .Nav__section {
    &--level2 {
      @media (min-width: $screen-md) {
        display: block;
        background-color: $base-0;
        border-color: map-get($color-aliases, "border");
      }
    }
  }
}
