.navbar-nav {
    .nav-link {
        font-size: $navbar-nav-link-font-size;
        font-family: $navbar-nav-link-font-family;
        font-weight: $navbar-nav-link-font-weight;
        text-transform: $navbar-nav-link-text-transform;
        letter-spacing: $navbar-nav-link-letter-spacing;
        
        @if $enable-transitions {
            -webkit-transition: $navbar-transition;
            transition: $navbar-transition;
        }
    }
}

@include max-screen ($break-medium){
    .navbar-nav {
        .nav-item {
            margin-right: 0.5rem;
            &:not(:last-child) {
                margin-right:0;
            }
        }
        .nav-link {
            padding-top: $navbar-nav-link-padding-y;
            padding-bottom: $navbar-nav-link-padding-y;
            border-radius: $navbar-nav-link-border-radius;
        }

        .nav-link-icon {
            border-radius: $navbar-nav-link-border-radius;
        }
    }
}

// Dark links against a light background
.navbar-light {
    .navbar-brand {
        color: $navbar-light-active-color;

        @include hover-focus {
            color: $navbar-light-active-color;
        }
    }
    .navbar-nav {
        .nav-link {
            color: $navbar-light-color;

            @include hover-focus {
                color: $navbar-light-hover-color;
            }

            &.disabled {
                color: $navbar-light-disabled-color;
            }
        }

        .show>.nav-link,
        .active>.nav-link,
        .nav-link.show,
        .nav-link.active {
            color: $navbar-light-active-color;
        }
    }
    .navbar-toggler {
        color: $navbar-light-color;
        border-color: $navbar-light-toggler-border-color;
    }
    .navbar-toggler-icon {
        background-image: $navbar-light-toggler-icon-bg;
    }
    .navbar-text {
        color: $navbar-light-color;
        a {
            color: $navbar-light-active-color;

            @include hover-focus {
                color: $navbar-light-active-color;
            }
        }
    }
}

// White links against a dark background
.navbar-dark {
    .navbar-nav {
        .nav-link {
            background-color: $navbar-dark-bg;

            @include hover-focus {
                background-color: $navbar-dark-hover-bg;
            }
        }

        .show>.nav-link,
        .active>.nav-link,
        .nav-link.show,
        .nav-link.active {
            background-color: $navbar-dark-active-bg
        }
    }    
}


// Transparent navbar
@include max-screen ($break-medium){
    .navbar-transparent {
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 100;
        background-color: transparent !important;
        border: 0;
        box-shadow: none;
    }
    .navbar-transparent.border-bottom {
        border-color: rgba(0, 0, 0, 0.1);
    }
}

// Offset collapse
@include max-screen ($break-medium - 1px){

    .offcanvas-collapse {
        width: 270px;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 1050;
        padding: 1.5rem;
        overflow-y: auto;
        transition: transform 300ms, opacity 300ms;
        transform: translate3d(100%, 0, 0);
        opacity: 0;

        .navbar-nav .nav-item {
            margin-bottom: 0.2rem;
        }
        .navbar-nav .nav-link {
            padding-left: 1rem;
            padding-right: 1rem;
            border-radius: $border-radius;
        }
    }
    .offcanvas-collapse.open {
        box-shadow: -5px 0px 10px 0px rgba(0,0,0,.15);
        opacity: 1;
        transform: translate3d(0, 0, 0);
     
    }
    .navbar-light {
        .offcanvas-collapse {
            background-color: $white;
        }

        .dropdown-divider {
            border-color: rgba(0, 0, 0, .1);
        }
    }
    .navbar-dark {
        .offcanvas-collapse {
            background-color: $dark;
        }

        .dropdown-divider {
            border-color: rgba(255, 255, 255, .1);
        }
    }
}