@mixin highlighted-navigation($color) {
  a, span {
    color: $color;
    opacity: 0.8;
    transition: opacity 200ms ease-in-out;

    &:hover {
      opacity: 1;
    }
  }
}

.Vlt-sidenav {
  flex: 0 0 300px;
  width: 300px;
}

.Vlt-sidemenu--flat {
  .Vlt-sidemenu__link {
    padding: 4px 10px;
  }

  li {
    a {
      font-weight: 900;
    }

    li {
      a {
        font-weight: 600;
      }

      li {
        a {
          font-weight: 400;
        }
      }
    }
  }
}

.Vlt-sidemenu__title + ul > li {
  margin-left: 0 !important;
}

@media #{$M-plus} {
  .Vlt-sidenav {
    height: calc(100vh - 150px);
  }
}

.navigation--documentation {
  .navigation-item--api-reference a {
    color: $purple;
  }

  .navigation-item--ncco-reference a {
    color: $orange;

    .navigation-item--ncco-reference a {
      color: $orange;
    }
  }
}

#Vlt-sidenav-mobile-trigger {
  display: inline-block;
  margin-top: $unit0;
  margin-right: $unit2;

  svg {
    height: 24px;
    width: 24px;
  }

  @media #{$M-plus} {
    display: none;
  }
}

.Nxd-tutorial {
  border-right: 1px solid silver;
}

.Nxd-tutorial-sidenav {
  background: $white;

  a {
    color: black;
  }
  padding: 0px;

  li li {
    margin-left: 10px !important;
  }
}

.Nxd-sidenav {
  @media #{$M-plus} {
    margin-top: 150px;
  }
}

.Nxd-sidenav-badge {
  position: absolute;
  top: 14px;
  right: 35px;
  z-index: 1;
}

li.navigation-item {
  position: relative;
}