.list-item {
    display: flex;
    flex-direction: row;
    gap: var(--size-spacing-8);
    width: 100%;
    height: fit-content;
    align-items: center;
}

    .list-item .item {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: fit-content;
        box-sizing: border-box;
        padding: var(--size-spacing-6) var(--size-spacing-8);
        border: 1px solid transparent;
        border-radius: var(--size-spacing-8);
        background-color: rgb(var(--color-secondary-200-rgb));
        transition: background-color var(--transition-small), border-color var(--transition-small);
        box-shadow: 0 0 1px 0 var(--color-mask-shade-20), 0 2px 4px 0 var(--color-mask-shade-10);
    }

        .list-item .item:hover {
            background-color: rgb(var(--color-secondary-100-rgb));
        }

        .list-item .item:active{
            border-color: rgb(var(--color-primary-500-rgb));
        }


        .list-item .item.pressed {
            border-color: rgb(var(--color-primary-500-rgb));
            background-color: rgb(var(--color-secondary-50-rgb));
        }

        .list-item .item .list-item-content {
            display: flex;
            flex-direction: row;
            gap: var(--size-spacing-12);
            width: 100%;
            align-items: center;
        }

            .list-item .item .list-item-content .identification {
                display: flex;
                flex-direction: row;
                gap: var(--size-spacing-8);
                align-items: center;
            }

                .list-item .item .list-item-content .identification p {
                    color: rgb(var(--color-neutral-500-rgb));
                    font-weight: 600;
                }


            .list-item .item .list-item-content .name p {
                font-weight: 600;
            }
            .list-item .item .list-item-content .list-item-content-info {
                display: flex;
                flex-direction: column;
                gap: var(--size-spacing-4);
                flex: 1;
            }


            .list-item .item .list-item-content .list-item-content-notification {
                display: flex;
                justify-content: center;
                align-items: center;
                width: fit-content;
            }