/* TODO */
.nav {
    display: none;
}

@media (max-width: 768px) {
    .nav {
        display: flex;
        flex-direction: row;
        justify-content: center;

        user-select: none;
        
        height: 5em;
        width: calc(100% - 4em);
        padding: 0 2em;
        gap: 5%;

        background-color: #252c36;
        
        .nav-item {
            display: flex;
            flex: 0 0 auto;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 4em;
            padding: 1em;
            background-color: #252c36;

            transition: background-color 150ms ease;

            img, svg {
                width: 2em;
                height: 2em;
                border-radius: 2em;
                flex: 0 0;
            }
            p {
                padding: 0;
                margin: 0;
            }

            &.selected {
                background-color: #3c4656;
            }

            &:is(.messages, .channels) img {
                filter: invert();
            }

            &.friends img {
                filter: brightness(5);
            }
        }
    }
}