.comments {
  --avatar-size: 2.33em;
  --comment-padding-block: var(--block-space);
  --comment-padding-inline: var(--inline-space-double);

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

  @media (min-width: 150ch) {
    padding-inline: calc(var(--tray-size) + var(--inline-space) * 1.5);
  }
}

.comment {
  margin-inline: auto;
  max-inline-size: 80ch;
  position: relative;
}

.comment--new,
.comment--edit {
  house-md-toolbar {
    border-block-end: 1px solid var(--color-subtle-dark);
  }
}

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

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

.comment__edit {
  display: none;

  .comment--mine & {
    display: grid;
  }
}

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

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

.comment__content {
  background-color: var(--color-subtle-light);
  border-radius: 0.2em;
  padding: var(--comment-padding-block) var(--comment-padding-inline);
  
  .comment--mine_ & {
    margin-inline: 0 calc(var(--comment-padding-inline) * 2);
  }
}

.comment__input {
  --input-border-size: 0;
  --input-padding: 0;

  line-height: inherit;
  min-block-size: calc(9lh + (2 * var(--comment-padding-block)));
  min-inline-size: 100%;

  @supports (field-sizing: content) {
    field-sizing: content;
    min-block-size: calc(9lh + (2 * var(--comment-padding-block)));
  }
}

.comment--mine_ {
  flex-direction: row-reverse;
  margin-inline: auto 0;

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

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

.comment__timestamp {
  color: var(--color-subtle-dark);
}

.event-summary {
  max-inline-size: 80ch;

  &::before{
    content: "";
    display: flex;
    inline-size: calc(var(--comment-padding-inline) * 0.75);
  }
}