.mobile-nav {
    display: flex;
    justify-content: space-evenly;
    height: 80px;
    padding: 13px 20px;
    background: var(--mobile-nav-bg);
}

.mobile-nav li {
    padding: 0;
    width: 52px;
    height: 52px;
}

.mobile-nav li a {
    width: 100%;
    height: 100%;
    font-size: 0;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 12px;
    transition: all 0.3s ease-in-out;

    &.account::before {
        background: url("/img/icons/login--black.svg") no-repeat center center;
    }

    &.subscription::before {
        background: url("/img/icons/SketchLogo-black.svg") no-repeat center center;
    }

    &.alerts::before {
        background: url("/img/icons/notifications-black.svg") no-repeat center center;
    }

    &.uisettings::before {
        background: url("/img/icons/settings-black.svg") no-repeat center center;
    }
}

.mobile-nav li.active a {
    background: var(--color-blue);
}



.mobile-nav li a::before {
    content: "";
    display: inline-block;
    background-size: cover !important;
    width: 28px;
    height: 28px;
    transition: all 0.3s ease-in-out;
    filter: invert(1);
    opacity: 0.5;
}

html[theme=light] .mobile-nav li:not(.active) a::before {
    filter: none;

}

.mobile-nav li.active a::before {
    opacity: 1;
}