li.nav-item {
  > a,
  > button,
  > span {
    background: transparent;
    border: 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 10px 25px;
    color: darken($text-color, 10%);
    font-size: 18px;
    white-space: nowrap;
    text-transform: uppercase;
    width: 100%;

    i:not(.fa-chevron-right),
    svg:not(.fa-chevron-right) {
      min-width: 30px;
      font-size: 24px;
      text-align: center;
      vertical-align: middle;
    }

    &::after {
      opacity: 1;
    }
  }

  > a,
  > button {
    cursor: pointer;
  }

  &:hover > a,
  &:active > a,
  &.active > a,
  &:hover > button,
  &:active > button,
  &.active > button {
    color: lighten($text-color, 10%);
  }

  &.active > a,
  &.active > button {
    &::after {
      position: absolute;
      top: 10%;
      left: 0;
      width: 3px;
      height: 80%;
      background: $primary;
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
      box-shadow: 2px 0 10px rgba(darken($primary, 20%), 0.9);
      content: "";
    }
  }

  &.divider {
    height: 1px;
    margin: 5px 15px 5px;
    padding: 0;
    background-color: $gray-darker;
  }

  &.sub-menu {
    > a,
    > button {
      .submenu-icon {
        position: absolute;
        top: 50%;
        right: 20px;
        margin-top: -10px;

        i.fa-chevron-right,
        svg.fa-chevron-right {
          transition: all $transition-base-speed ease;
        }
      }
    }

    ul {
      margin: 0;
      margin-bottom: 10px;
      padding: 0;
      list-style: none;

      > li > a {
        padding-left: 40px;
        font-size: 16px;
      }
    }

    &.open {
      &.active > a,
      &.active > button {
        &::after {
          opacity: 0;
        }
      }

      > a,
      > button {
        .submenu-icon {
          i.fa-chevron-right,
          svg.fa-chevron-right {
            transform: rotate(90deg);
          }

          &.submenu-icon-up {
            i.fa-chevron-right,
            svg.fa-chevron-right {
              transform: rotate(-90deg);
            }
          }
        }
      }
    }
  }

  &.nav-item-slim {
    &.sub-menu {
      ul > li > a {
        padding-left: 25px;
      }
    }
  }
}
