@layer components {
    .ui-comment {
        font-size: var(--font-size-lg);
        --comment-inline-block-spacing: var(--spaceing-lg);

        display: block;
        position: relative;
        padding: var(--comment-inline-block-spacing) var(--spaceing-md) var(--comment-inline-block-spacing) calc(3 * var(--spaceing-lg));

        &:after {
            content: "";
            display: block;
            height: 1px;
            background-color: var(--border-color-light);
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
        }

        &:last-child:after {
            display: none;
        }

        &:first-of-type:before {
            content: "";
            display: block;
            height: 1px;
            background-color: var(--border-color-light);
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
        }

        header {
            .comment-meta-data {
                color: var(--text-700);
                display: block;
                inline-size: auto;
                text-transform: capitalize;
                white-space: nowrap;
            }

            .comment-author {
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .comment-avatar {
            position: absolute;
            inset-block-start: var(--comment-inline-block-spacing);
            inset-inline-start: 0;
        }

        .ui-document-rich-content {
            min-height: unset;
        }

        .comment-action {
            position: absolute;
            inset-block-start: var(--spaceing);
            right: 0;
        }

    }

    @media (min-width: 600px) {
        .ui-comment {
            --comment-inline-block-spacing: var(--spaceing-xl);
            padding: var(--comment-inline-block-spacing) var(--spaceing-md) var(--comment-inline-block-spacing) calc(8 * var(--spaceing-lg));

            header {
                .comment-meta-data {
                    display: flex;
                    flex-direction: column;
                    position: absolute;
                    inset-block-start: var(--comment-inline-block-spacing);
                    inset-inline-start: 0;
                    inline-size: var(--spaceing-xxl);
                    white-space: normal;
                }
            }

            .comment-avatar {
                inset-block-start: var(--comment-inline-block-spacing);
                inset-inline-start: calc(4 * var(--spaceing-lg));
            }
        }
    }
}