fizzy/app/assets/stylesheets/comments.css

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

      &:not(:has(.reaction)) {
        inset-block-end: var(--comment-padding-block);
        inset-inline-end: calc(var(--comment-padding-inline) / 2);
        margin: 0;
        position: absolute;

        @media (max-width: 640px) {
          inset-inline-end: calc(var(--comment-padding-inline) / 3);
        }
      }
    }
  }

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

    @media (max-width: 639px) {
      margin-block-end: calc(var(--block-space-half) / 2);

      h3 {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.4em;
      }
    }
  }

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

  .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) {
      font-size: var(--text-small);
    }
  }

  .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 last system comment */
  :nth-last-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-child(1 of .comment-by-system) {
    .comment__history {
      display: none;
    }
  }

  .comment-by-system--account-limit {
    --stripe-color: oklch(var(--lch-blue-lightest));

    .comment__content {
      padding: 3ch;
    }
  }
}