.nav-simple,
.nav-aside {
    @include simple-list; // Adds border and padding.
    padding-bottom: 0;
    display: block;
}

.nav-aside {
    border-top: 1px dotted #DDD;
    border-bottom: 1px dotted #DDD;
    margin-bottom: 15px;
}


.module-narrow  {
    .nav-item>a,
    .nav-aside li a {
    text-decoration: none;;
    display: block;
    color: $navLinkColor;
    font-size: $font-size-base;
    line-height: $line-height-base;
    margin: -7px (-$gutterX);
    padding: 10px ($gutterX);
    &:hover {
        text-decoration: none;
        background-color: #eeeeee;
    }
    .badge {
        background-color: $emptyTextColor;
        border-radius: 10px;
    }
}
    .nav-item.active,
    .nav-aside li.active {
        background-color: $navActiveBackgroundColor;
    }

    .nav-item.active>a,
    .nav-aside li.active a {
        position: relative;
        color: $navItemActiveTextColor;
        background-color: $navItemActiveBackgroundColor;
        &:hover {
            color: $navItemActiveTextColor;
            background-color: $navItemActiveBackgroundColor;
        }
    }

    .nav-item.active>a:before,
    .nav-aside li.active a:before {
        content: ' ';
        position: absolute;
        border: ($navItemActiveArrowSize*3 + 2) solid transparent;
        border-right: none;
        border-left-color: $navItemActiveBackgroundColor;
        border-left-width: $navItemActiveArrowSize;
        top: 0;
        bottom: 0;
        right: -$navItemActiveArrowSize;
        width: $navItemActiveArrowSize;
        height: 34px;
        // background-image: url("${imagePath}/nav-active.png?1");
    }

    .nav-pills>li {
        float: none;
        @include media-breakpoint-down(sm) {
            float: left;
        }
    }

    .nav-item.active>a span,
    .nav-aside li.active a span {
        white-space: nowrap;
        // display: block;
    }
}


.module-narrow .nav-item>a,
.module-narrow .nav-aside li a {
    padding-left: $gutterSmallX;
    padding-right: $gutterSmallX;
    position: relative;
}

.module-narrow .nav-item.image,
.module-narrow .nav-aside li.image {
    position: relative;
}

.module-narrow .nav-item.image>a,
.module-narrow .nav-aside li.image a {
    padding-left: $gutterSmallX + 27;
    padding-right: $gutterSmallX + 27;
}

.module-narrow .nav-item.image>img,
.module-narrow .nav-aside li.image img {
    position: absolute;
    top: 50%;
    left: $gutterSmallX;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    z-index: 2;
}

// FACET NAVIGATION
.user-list {
    @include list-unstyled;
    li {
        margin: 0 0 10px 0;
    }
    .user-image {
        margin-right: 3px;
        margin-bottom: 3px;
        @include border-radius(100px);
    }
}

.nav-item{
    .facet-close {
        float: right;
    }
}

// STACKED NAV
// -----------

// Stacked tabs and pills
.nav-stacked > li {
    float: none;
}
.nav-stacked > li > a {
    margin-right: 0; // no need for the gap between nav items
}
