
$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);
            }
        }
    }
}

// -------------------------
// SIDE NAV STYLING
// -------------------------
.collapsable-info-panel {

    //App icon colour in side nav
    .nav {
        --theme-app-color: var(--gray-700);
    }

    .nav-link {
        position: relative;
        padding-left: 20px;
        margin: 0 0 .25rem;
        border-radius: $border-radius;
        color: $gray-700;
        word-break: break-word;
        word-wrap: break-word;
        &:hover {
            background: #fff;
            cursor: pointer;
        }
    }
    // ---------
    // SIDE NAV STYLING - WHEN ACTIVE
    // ---------
    .flex-column > .nav-item.active > .nav-link,
    .flex-column > .nav-item > .nav-link.active {
        background: #fff;
        color: var(--theme-primary-color);
        --theme-app-color: var(--theme-primary-color);

        // ---------
        // PRIMARY COLOUR LINE TO LEFT OF ACTIVE ITEM
        // ---------
        &::before {
            content: '';
            background: var(--theme-primary-color);
            position: absolute;
            width: 3px;
            left: 0;
            top: 0;
            bottom: 0;
            margin: 6px;
            border-radius: 10rem;
        }
    }
}

