@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;
        }
    }

    .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__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__permalink-title {
        color: currentColor;
        font-family: var(--font-data);
        font-size: var(--text-x-small);
        letter-spacing: 0.02em;
        opacity: 0.66;
        text-decoration: none;
        text-transform: uppercase;

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

    /* Author-only edit/delete on a comment (#220). Deliberately always
       rendered rather than hover-revealed: hover-only affordances are
       unreachable on touch, which is most of the shop floor. They sit back at
       reduced opacity and come forward on hover or keyboard focus. */
    /* In the ~320px activity pane the cluster would otherwise split
       "SEP 1, 11:49" across two lines. */
    .comment__author:has(.comment__actions) {
        flex-wrap: wrap;

        .comment__permalink-title {
            white-space: nowrap;
        }
    }

    .comment__actions {
        opacity: 0.5;
        transition: opacity 100ms ease-out;

        /* Icon-only, so trim .btn--subtle's text-button side padding — that
           buys back the ~13px that otherwise wraps the cluster onto its own
           line next to a short author name. Long names still wrap, which is
           why the row above is allowed to. Set on the button, not the
           cluster: .btn--subtle declares --btn-padding on itself, and a
           property set on the element beats one inherited from its parent. */
        .btn--subtle {
            --btn-padding: 0.18rem 0.3rem;
        }

        .icon {
            --icon-size: 1em;
        }

        &:focus-within {
            opacity: 1;
        }

        @media (any-hover: hover) {
            .comment:hover & {
                opacity: 1;
            }
        }

        /* No hover on touch — leave them legible. */
        @media (any-hover: none) {
            opacity: 0.8;
        }
    }

    /* The editor stands in for the card inside the same frame, so it inherits
       the card's chrome and only needs the composer's breathing room. */
    .comment--editing {
        .comment__content {
            padding-inline-end: var(--comment-padding-inline);
        }
    }

    .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--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);
    }
}