.nav {

  h2 {

    padding: 10px 30px;

  }

  .menu-item {

    margin: 6px 0;
    line-height: 40px;
    padding: 0 30px;

    a {

      color: inherit;

      &:hover {

        color: $oa-blue;
        text-decoration: none;

      }

      &.badge {

        color: $oa-white;
        margin-left: 0.5em;

      }


    }

    &.disabled, 
    .disabled, 
    .disabled a {

      color: $oa-gray-light;

    }

    &.selected {

      a {

        font-weight: bold;
        color: $oa-blue;

      }

      a.badge {
        color: $oa-white;
      }

    }

  }

  &:not(.nav-right) { // left nav menu

    .menu-item {

      border-left: 4px solid transparent;

      &.selected {

        border-left: 4px solid $oa-blue;

      }

      &:not(.selected):hover {

        border-left: 1px solid $oa-blue;
        padding-left: 33px;

      }

    }

  }

  &.nav-right { // right nav menu

    .menu-item {

      border-right: 4px solid transparent;

      &.selected {

        border-right: 4px solid $oa-blue;

      }

      &:not(.selected):hover {

        border-right: 1px solid $oa-blue;
        padding-right: 33px;

      }

    }

  }

}