_navbar.scss

.navbar {
    z-index: 1;
    width: 100%;

    .header-brand {
        img {
            display: block;
            width: 55px;
            height: auto;
            margin: auto;
        }
    }

    #nav-collapse {
        .header-brand {
            margin-right: 3rem;
            img {
                width: 60px;
            }
        }

        > .navbar-nav {
            flex: 1 !important;
        }
    }

    .navbar-nav-right {
        flex: 0 auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .navbar-toggler {
        border: 0;
        transition: 0.2s ease color;

        &:hover {
            color: black;
        }
    }
}

div:not(.bg-white) > .page-use-cases.navbar-light .navbar-nav .nav-link {
    color: $light;

    &:focus {
        color: $secondary;
    }

    &:after {
        position: absolute;
        content: '';
    }

    &:hover {
        color: $light;
    }

    &.router-link-active {
        color: $secondary;
    }

    &:hover:after,
    &.router-link-active:after {
        background-color: $secondary;
    }
}

.navbar.fixed {
    position: fixed;
    z-index: 1;
    background-color: $secondary;

    #nav-collapse > .navbar-nav {
        flex: 1 !important;
    }
}

.navbar-light .navbar-nav .nav-link {
    display: block;
    position: relative;
    font-weight: $font-weight-bold;
    opacity: 1 !important;
    margin: 0 1rem;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 1rem;
    color: $dark;

    &:focus {
        box-shadow: none;
        color: $primary;
    }

    &:after {
        position: absolute;
        content: '';
    }

    &:hover {
        color: $dark;
    }

    &.router-link-active {
        color: $primary;
    }

    &:hover:after,
    &.router-link-active:after {
        width: 100%;
        opacity: 1;
    }
}

.navbar-light .navbar-nav .nav-link:after {
    display: block;
    height: 2px;
    width: 0%;
    bottom: 0;
    opacity: 0;
    color: $primary;
    background-color: $primary;
    -webkit-transition: 0.2s width, 0.3s opacity;
    transition: 0.2s width, 0.3s opacity;
}

.nav-tabs .nav-link {
    padding: 0.5rem 1rem;
}

.nav-link-plain a::after {
    content: unset !important;
    display: none !important;
}

@media (max-width: map-get($grid-breakpoints, 'lg')) {
    #nav-collapse {
        background: $white;
        color: $dark;
        padding: 1rem;

        > .navbar-nav {
            flex: 0 auto;
        }

        .navbar-nav-right {
            flex: 0;
            border-top: 1px solid $light;
            padding-top: 1rem;
            flex-wrap: wrap;

            a {
                flex: 0 100%;
                margin: 0.5rem !important;
            }

            .navbar-nav {
                flex-direction: row;
                flex: 1;
                justify-content: space-around;
            }
        }

        .header-brand {
            display: none;
        }
    }
}

.navbar.bg-light.navbar-white {
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.15);
    background-color: white;
    padding: 5px 1rem;

    .nav-link {
        border-radius: 50%;
        height: 60px;
        width: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;

        i {
            font-size: 1.2rem;
        }

        &.router-link-exact-active {
            background-color: $gray-200;
        }
    }

    .nav-link.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .nav-item:nth-child(2) .nav-link {
        position: absolute;
        background-color: $secondary;
        width: 80px;
        height: 80px;
        left: 50%;
        margin-left: -40px;
        margin-top: -10px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);

        i {
            font-size: 1.5rem;
        }

        &:active {
            background: darken($secondary, 5%);
        }

        &.router-link-exact-active {
            background-color: $secondary;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        }
    }
}

.page-token,
.page-demo,
.navbar-text-white {
    .navbar-collapse:not(.show) .navbar-nav .nav-link {
        color: #fff;
        font-weight: 400;
        &:hover {
            color: $secondary;
        }
    }
    .fa-bars {
        color: #fff;
    }
}
.bg-white.shadow .page-token,
.bg-white.shadow .page-demo,
.bg-white.shadow .navbar-text-white {
    .navbar-nav .nav-link {
        color: $dark;
        font-weight: 700;
        &:hover {
            color: $dark;
        }
    }
}