.navbar {
    border: 0;
    border-radius: $border-radius-base;
    padding: 0.625rem 0;
    margin-bottom: 20px;
    @include navbar-colors($white-color, $navbar-color);

    &.fixed-top{
        border-radius: 0;
    }

    .navbar-nav{
        .nav-item .nav-link{
            position: relative;
            color: inherit;
            padding: $padding-general-x;
            font-weight: $font-weight-default;
            font-size: $mdb-btn-font-size-base;
            text-transform: uppercase;
            border-radius: $border-radius-base;
            line-height: 20px;

            &:not(.btn-just-icon) .fa{
                position: relative;
                top: 2px;
                margin-top: -4px;
                margin-right: 4px;
            }

            & .material-icons,
            & .fa{
                font-size: $font-size-lg;
                max-width: 24px;
                margin-top: -1.1em;
            }

            &:not(.btn) .material-icons{
                margin-top: -7px;
                top: 3px;
                position: relative;
                margin-right: 3px;
            }

            &.profile-photo{
                padding: 0;
                margin: 0 3px;

                &:after{
                    display: none;
                }

                & .profile-photo-small{
                    height: 40px;
                    width: 40px;
                }

                .ripple-container{
                    border-radius: 50%;
                }
            }
        }

        .dropdown-menu-right{
            transform-origin: 100% 0;
        }

        .nav-item.active .nav-link{
            &,
            &:hover,
            &:focus {
              background-color: rgba(255, 255, 255, 0.1);
            }
        }
    }

    .btn,
    .navbar-nav .nav-item .btn{
        margin-top: 0;
        margin-bottom: 0;
    }

    .navbar-toggler{
        cursor: pointer;

        .navbar-toggler-icon{
          position: relative;
          width: 22px;
          height: 2px;
          vertical-align: middle;
          outline: 0;
          display: block;
          border-radius: 1px;

            & + .navbar-toggler-icon{
                margin-top: 4px;
            }
        }
    }

    &.navbar-absolute{
        position: absolute;
        width: 100%;
        padding-top: 10px;
        z-index: 1029;
    }

    .navbar-wrapper{
        display: inline-flex;
        align-items: center;
    }

    // give correct size to ripple container
    .navbar-brand {
        position: relative;
        color: inherit;
        height: 50px;
        font-size: $navbar-brand-font-size - 0.125;
        line-height: 30px;
        padding: $padding-general-y 0;
    }

    &.bg-primary{
        @include navbar-colors($bg-primary, $white-color);
    }
    &.bg-info{
        @include navbar-colors($bg-info, $white-color);
    }

    &.bg-warning{
        @include navbar-colors($bg-warning, $white-color);
    }

    &.bg-rose{
        @include navbar-colors($bg-rose, $white-color);
    }

    &.bg-danger{
        @include navbar-colors($bg-danger, $white-color);
    }

    &.bg-success{
        @include navbar-colors($bg-success, $white-color);
    }
    &.bg-dark{
        @include navbar-colors($grey-900, $white-color);
    }

    &.navbar-transparent{
        background-color: transparent !important;
        box-shadow: none;
        padding-top: 25px;
        color: $white-color;
    }

}

// for demo
#navbar .navbar{
    border-radius: 0;
}
