@layer components {
    .preview-list {

        .preview-item {
            @apply flex flex-row items-start py-0;

            &:last-child {
                @apply border-b-0;
            }

            .form-check {
                @apply mt-2 mr-4;
            }

            .preview-thumbnail {
                @apply text-white relative;

                img,
                .preview-icon {
                    @apply w-9 h-9 rounded-full;
                }

                .preview-icon {
                    @apply p-1.5 text-center flex items-center justify-center;

                    i {
                        @apply text-xl m-0;
                    }
                }

                .badge {
                    @apply border-2 border-white rounded-full block absolute w-3.5 h-3.5 p-0;

                    bottom: 5px;
                    left: -5px;

                    &.badge-online {
                        @apply bg-green-500;
                    }

                    &.badge-offline {
                        @apply bg-blue-500;
                    }

                    &.badge-busy {
                        @apply bg-yellow-500;
                    }
                }
            }

            .preview-item-content {
                @apply leading-none pl-4;

                &:first-child {
                    @apply pl-0;
                }

                p {
                    @apply mb-0;

                    .content-category {
                        @apply font-semibold pr-4 border-r border-gray-300 text-gray-500;
                    }
                }
            }

            .preview-actions {
                @apply flex flex-row;

                i {
                    @apply w-7 h-7 text-gray-200 border-2 border-gray-200 rounded-full p-0.5 inline-block;

                    &:first-child {
                        @apply mr-2.5;
                    }
                }
            }
        }

        &.comment-preview {
            .preview-item {
                @apply py-0;

                &:first-child {
                    @apply pt-0;
                }

                p {
                    @apply leading-7;
                }
            }
        }

        &.bordered {
            .preview-item {
                @apply border-b border-gray-300;

                &:last-child {
                    @apply border-b-0;
                }
            }
        }
    }

    .notifications {
        @apply cursor-pointer;
    }
}