.comments {
  --avatar-size: 2.33em;
  --comment-padding-block: 1.2em;
  --comment-padding-inline: 1.5em;

  font-size: clamp(1rem, 1.6cqi, 2rem);
  max-inline-size: 70ch;
  row-gap: var(--comment-padding-block);

  > :first-child {
    margin-block-start: var(--comment-padding-block);
  }
}

.comment__avatar {
  margin-block-start: calc(var(--comment-padding-block) * 0.5);
  margin-inline: auto calc(var(--comment-padding-inline) * -0.75);
  position: relative;
  z-index: 1;

  .comment--mine & {
    margin-inline: calc(var(--comment-padding-inline) * -0.75) auto;
  }
}

.comment__body {
  p {
    &:first-child {
      margin-block-start: 0;
    }

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

.comment__content {
  margin-inline: 0 var(--avatar-size);
  padding: var(--comment-padding-block) var(--comment-padding-inline);

  .comment--mine & {
    background-color: var(--color-selected);
    margin-inline: var(--avatar-size) 0;
  }

  .comment:has(+ .event-summary) & {
    padding-block-end: calc(var(--comment-padding-block) * 1.5);
  }
}

.comment--mine {
  flex-direction: row-reverse;

  .comment__author {
    flex-direction: row-reverse;
  }

  .input {
    &::placeholder {
      color: var(--color-ink);
      opacity: 0.5;
    }

    &::selection {
      background-color: var(--color-selected-dark);
    }
  }
}

.comment__timestamp {
  color: var(--color-ink);
  opacity: 0.5;
}

.event-summary {
  font-weight: 600;
  margin-block: calc(var(--comment-padding-block) * -1);
  padding: calc(var(--comment-padding-block) * 0.5) var(--comment-padding-inline);
  gap: 0.5ch;
}