
$nav-link-icon-size: 1.4rem;

.nav ion-icon {
    display: inline-block !important;
}

// Nav link ion-icon size
.nav-link ion-icon {
    font-size: $nav-link-icon-size;
    vertical-align: bottom;
    line-height: 1;
    height: $nav-link-icon-size;
    width: $nav-link-icon-size;
}

// Nav title custom styling
.nav-item .nav-title {
    color: $nav-title-color;
    font-size: 0.94rem;
    text-transform: uppercase;
    padding: $nav-title-padding-y $nav-title-padding-x;
    margin-bottom: 0;
    margin-top: 0.25rem;

    ion-icon {
        color: $nav-title-icon-color;
    }
}

.nav-item:first-child .nav-title {
    margin-top: 0;
}

// Nav Pills custom styling
.nav-pills:not(.nav-pills-basic) {
    background-color: $gray-200;
    border-radius: $nav-pill-item-padding-y $nav-pill-item-padding-x;

    .nav-item {
        position: relative;
        padding: $nav-pill-item-padding-y $nav-pill-item-padding-x;

        &::after {
            content: '';
            position: absolute;
            border-left: 1px solid $gray-400;
            top: 4px;
            bottom: 4px;
            right: -1px;

            //remove border because assume .flex-column class will be used on mobile
            @include media-breakpoint-down(xs) {
                border: none;
            }
        }

        &:last-child::after {
            border: none;
        }

        .nav-link {
            &:not(.active) {
                --theme-app-color: #{$gray-700};
                color: $gray-700;
            }

            &.active {
                --theme-app-color: var(--theme-primary-color-contrast);
                box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
            }
        }
    }
}

//App icon colour in side nav
.collapsable-info-panel .nav {
    --theme-app-color: #{$gray-700};
}

