@layer components {
    .comments {
        --avatar-size: 2.33em;
        --comment-padding-block: var(--block-space-half);
        --comment-padding-inline: var(--inline-space-double);
        --comment-max: 70ch;
        --reaction-size: 2.25rem;

        display: flex;
        flex-direction: column;
        padding-inline: var(--inline-space);
        place-items: center;
        text-align: center;

        @media (min-width: 160ch) {
            padding-inline: var(--tray-size);
        }

        @media (min-width: 640px) {
            --reaction-size: 1.6875rem;
        }
    }

    .comments__subscribers {
        max-inline-size: var(--comment-max);
        padding-inline: calc(var(--comment-padding-block) + var(--inline-space-double));
    }

    .comment {

        /* Distinguish from the .comment class used for code formatting without extra specificity */
        &:where(.comments &) {
            display: flex;
            margin-inline: auto;
            max-inline-size: var(--comment-max);
            position: relative;
        }

        .comment-by-system & {
            --comment-padding-block: var(--block-space-half);

            text-align: center;

            &::before {
                /* Make up space for lack of avatar */
                content: "";
                display: flex;
                inline-size: calc(var(--comment-padding-inline) * 0.9);
            }

            .comment__avatar {
                display: none;
            }

            .comment__author {
                a {
                    margin: 0 auto;
                }

                h3 {
                    margin-inline: auto;
                }

                strong {
                    display: none;
                }
            }

            .comment__body {
                padding: 0;
                text-align: center;
            }

            .comment__content {
                --stripe-color: var(--color-ink-lightest);

                background-image: repeating-linear-gradient(45deg in srgb,
                        var(--color-canvas) 0 1px,
                        var(--stripe-color) 1px 10px);
                padding-inline: var(--comment-padding-inline);

                .comments--system-expanded .comment-by-system & {
                    --stripe-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
                }
            }

            .reactions {
                display: none !important;
            }
        }

        .reactions {
            margin-block-start: var(--block-space-half);
            margin-inline: calc(var(--column-gap) / -1);
        }
    }

    .comment__author {
        .btn {
            font-weight: inherit;
        }
    }

    .comment__avatar {
        margin: calc(var(--comment-padding-block) * 0.75) calc(var(--comment-padding-inline) * -0.75);
        z-index: 1;
    }

    .comment__body {
        text-align: start;

        .action-text-content {
            >action-text-attachment:first-child figure {
                margin-block-start: 0.5ch;
            }

            > :last-child {
                margin-block-end: 0;
            }
        }

        &:not:has(lexxy-editor) {
            padding-inline-end: var(--reaction-size);
        }

        /* Add an empty space so the last line of text doesn't overlap with the reaction button */
        .action-text-content>p:last-child::after {
            content: "";
            display: inline-block;
            inline-size: var(--reaction-size);
        }
    }

    .comment__content {
        --btn-icon-size: 1.2rem;
        --btn-size: var(--reaction-size);
        --comment-bg-color: var(--color-ink-lightest);
        --lexxy-bg-color: var(--comment-bg-color);

        background-color: var(--comment-bg-color);
        border-radius: 0.2em;
        max-inline-size: calc(100% - calc(var(--comment-padding-inline) * 0.75));
        padding:
            var(--comment-padding-block) calc(var(--comment-padding-inline) / 2) calc(var(--comment-padding-block) * 1.5) var(--comment-padding-inline);
        word-wrap: break-word;
    }

    .comment__edit {
        background-color: var(--color-ink-lightest);

        &:hover {
            z-index: 1;
        }
    }

    .comment__permalink-title {
        color: currentColor;
        opacity: 0.66;
        text-decoration: none;
        text-transform: capitalize;

        @media (max-width: 639px) {
            line-height: 1.5lh;
        }
    }

    .comment__history {
        background-color: transparent;
        display: none;
        inset: var(--comment-padding-block) var(--comment-padding-block) auto auto;
        translate: 2px -2px;
        /* Align baseline with time stamp */
        position: absolute;

        @media (any-hover: hover) {
            &:hover {
                background-color: var(--stripe-color);
            }
        }
    }

    .comment-by-system {
        display: none;
        transition: var(--dialog-duration) allow-discrete;
        transition-property: display;

        .comments--system-expanded & {
            display: contents;
        }
    }

    /* Show the first system comment */
    :nth-child(1 of .comment-by-system) {
        display: contents;

        .comment__history {
            display: inline-flex;
        }
    }

    /* Hide the "Show history" button if there's only one system comment */
    :nth-last-child(1 of .comment-by-system):nth-child(1 of .comment-by-system) {
        .comment__history {
            display: none;
        }
    }



    .comment__references {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25em;
        margin-block-start: var(--block-space-half);
    }

    .badge--reference {
        display: inline-flex;
        align-items: center;
        gap: 0.25em;
        padding: 0.15em 0.5em;
        border-radius: 1em;
        background-color: var(--color-ink-lightest);
        color: inherit;
        font-size: 0.8em;
        text-decoration: none;
        white-space: nowrap;

        &:hover {
            background-color: var(--color-ink-lighter);
        }
    }

    .comment-by-inspection {
        display: contents;

        .comment {
            --comment-padding-block: var(--block-space-half);

            text-align: center;

            &::before {
                /* Make up space for lack of avatar */
                content: "";
                display: flex;
                inline-size: calc(var(--comment-padding-inline) * 0.9);
            }

            .comment__body {
                padding: 0;
                text-align: center;
            }

            .comment__content {
                --stripe-color: oklch(var(--lch-blue-lightest));

                background-image: repeating-linear-gradient(45deg in srgb,
                        var(--color-canvas) 0 1px,
                        var(--stripe-color) 1px 10px);
                padding-inline: var(--comment-padding-inline);
            }

            .comment__author {
                h3 {
                    margin-inline: auto;
                }
            }
        }
    }

    .comment--new {
        .comment__content {
            --trix-toolbar-bg: var(--comment-bg-color);
            z-index: 0;
        }

        trix-toolbar {
            margin-inline: calc(var(--comment-padding-inline) * -1);
            padding-inline: calc(var(--comment-padding-inline) - 0.25em);
        }

        trix-editor {
            border: 0;
            margin-inline: calc(var(--comment-padding-inline) * -1);
            min-block-size: calc(5lh + 1em);
            padding: 0.6em var(--comment-padding-inline);
        }
    }

    .comment__submit {
        --btn-padding: 0.35em 1em;
        font-size: var(--text-small);
    }

    .comment-compose__references {
        color: var(--color-ink-dark);

        summary {
            cursor: pointer;

            &:hover {
                color: var(--color-ink);
            }
        }
    }

    .comment-references {
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.25em;
        }

        li {
            display: flex;
            align-items: center;
            gap: 0.5em;
            flex-wrap: wrap;
        }

        label {
            cursor: pointer;
        }
    }

    .comment-references__select {
        font-size: 0.85em;
        padding: 0.15em 0.3em;
        border: 1px solid var(--color-ink-lighter);
        border-radius: 0.2em;
        background: var(--color-canvas);
    }
}