.navbar {
    contain: layout paint;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    font-size: 12px;

    .nav-menu {
        background-color: var(--color-off-white);
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--color-silver-gray);
        height: 40px;

        ul {
            display: flex;
            list-style-type: none;

            li {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 40px;
                width: 40px;
                position: relative;
                cursor: pointer;

                a {
                    display: block;
                    color: var(--color-medium-gray);
                    text-align: center;
                    text-decoration: none;

                    img {
                        width: 24px;
                        height: 24px;
                        transition: filter 0.3s;
                    }
                }

                &:hover a img {
                    filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(50%) contrast(90%);
                }

                &.active a img {
                    filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(50%) contrast(90%);
                }

                &.active::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 90%;
                    height: 3px;
                    background-color: var(--color-orange);
                    border-top-left-radius: 3px;
                    border-top-right-radius: 3px;
                }
            }
        }

        .nav-user-icon {
            background-color: var(--color-light-gray);
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;

            a {
                display: block;
                color: var(--color-medium-gray);
                text-align: center;
                text-decoration: none;

                img {
                    width: 24px;
                    height: 24px;
                    transition: filter 0.3s;
                }
            }

            &:hover a img {
                filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(50%) contrast(90%);
            }

            &.active a img {
                filter: brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(50%) contrast(90%);
            }

            &.active::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 90%;
                height: 3px;
                background-color: var(--color-orange);
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
            }
        }
    }
}