.item {
    height: 48px;
    display: flex;
    padding: 0 8px;
    user-select: none;
    border-radius: 6px;
    margin-bottom: 2px;

    gap: 8px;
    align-items: center;
    flex-direction: row;
    
    cursor: pointer;
    font-size: 16px;
    transition: .1s ease-in-out background-color;

    color: var(--tertiary-foreground);

    &.normal {
        height: 42px;
    }

    &.compact {
        height: 32px;

        &[data-mobile="true"] { // TOFIX: make sure this works on mobile 
            height: 50px;
        }
    }

    &.user {
        opacity: 0.4;
        cursor: pointer;
        transition: .15s ease opacity;

        &[data-online="true"],
        &:hover {
            opacity: 1;
        }
    }

    &:hover {
        background: var(--hover);
    }

    div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        transition: color .1s ease-in-out;

        &.content {
            gap: 8px;
            flex-grow: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            flex-direction: row;

            svg {
                flex-shrink: 0;
            }

            span {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }

        &.avatar {
            display: flex;
            flex-shrink: 0;
        }

        &.name {
            flex-grow: 1;
            display: flex;
            font-weight: 600;
            font-size: .90625rem;
            flex-direction: column;

            .subText {
                margin-top: -1px;
                font-weight: 500;
                font-size: .6875rem;
                color: var(--tertiary-foreground);
            }
        }

        &.button {
            flex-shrink: 0;

            svg {
                opacity: 0;
                display: none;
                transition: .1s ease-in-out opacity;
            }
        }
    }

    &:not(.compact):hover {
        div.button .alert {
            display: none;
        }

        div.button svg {
            opacity: 1;
            display: block;
        }
    }

    &[data-active="true"] {
        cursor: default;
        background: var(--hover);

        .unread {
            display: none;
        }
    }

    &[data-alert="true"], &[data-active="true"], &:hover {
        color: var(--foreground);

        .subText {
            color: var(--secondary-foreground) !important;
        }
    }
}

.alert {
    width: 6px;
    height: 6px;
    margin: 9px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--foreground);

    display: grid;
    font-size: 10px;
    font-weight: 600;
    place-items: center;

    &[data-style="mention"] {
        width: 16px;
        height: 16px;
        color: white;
        background: var(--error);
    }
}