$navbar-background: $primary-color;
$navbar-active-color: darken($primary-color,10);

.navbar {
    box-shadow: 0 1px 4px 0 rgba($primary-color, 0.4);
    background-color: rgba($primary-color, 0.9);
    backdrop-filter: blur(5px);
    //border: 1px $navbar-background solid;
    border: 0;
    padding: 0;

    .nav-item {
        transition: background-color 0.5s;
        //margin: auto;

        .nav-link {
            font-size: 1rem;
            //font-weight: 600;
            text-shadow: 0px 0px 3px #000000;
            color: rgb(255, 255, 255);
            padding: 0.6rem 1rem 0.4rem;

            .nav-link-icon {
                font-size: 1.2em;
                color: white;
                padding-right: 0.5rem;
            }

        }

        .dropdown-menu {
            background-color: rgba($primary-color, 1);
            min-width: 18rem;
            border-radius: 0 0 $border-radius $border-radius;
            border: 0;
            box-shadow: 0px 4px 6px 0 rgba(black, 0.5);
            transition: height 1s;
            margin-top: 0;
            z-index: -1;
    
            .nav-link-icon {
                min-width: 2rem;
            }
    
            .nav-link-text {
                margin-left: 0.5rem;
            }
    
        }

        &:hover {
            background-color: $navbar-active-color;
            color: $color-light;
        }

        &.active {
            background-color: $navbar-active-color;
            color: $primary-color;
        }

        &.nav-subitem {
            background-color: darken($navbar-background, 1);
            padding-left: 1rem;
        }
    }

    .admin-link{
        color: white;
        margin-right: 2rem;
    }

    .brand-container {

        .brand-logo-container {
            text-align: center;
            margin: auto;

            img {
                max-height: 72px;
                margin: auto;
            }
        }

        .brand-text-container {
            padding-left: 0.5rem;
            text-align: left;

            .brand-title {
                font-size: 1.4rem;
                font-weight: 600;
                color: white;
                text-shadow: 0px 0px 4px #000000;
                line-height: 2rem;
            }

            .brand-subtitle {
                font-size: 1rem;
                font-weight: 600;
                color: white;
                //text-shadow: 0px 1px 2px #000000;
                line-height: 1.2rem;
            }
        }

    }

    .navbar-toggler{
        color: white;
        font-size: 1.4rem;
        margin: 0.25rem;
    }

}

@keyframes fade_in_show {
    0% {
        opacity: 0;
        //transform: scaleY(0)
    }

    100% {
        opacity: 1;
        //transform: scaleY(1)
    }
}

@media all and (min-width: 768px) {
    .navbar .nav-item .dropdown-menu {
        display: none;
        margin-top: 0;
    }

    .navbar .nav-item:hover .dropdown-menu {
        display: block;
        animation: fade_in_show 0.2s
    }

}