.comment {
  margin-inline-end: calc(var(--block-space) * 1.5);
  padding:
      calc(var(--block-space) * 1.5)
      calc(var(--inline-space) * 2)
      calc(var(--block-space) * 2)
      var(--inline-space);

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

  .avatar {
    margin-block-start: -0.5em;
    margin-inline-start: calc(-2.65em + var(--inline-space));
  }

  &:is(.comment--mine) {
    background-color: var(--color-selected);
    flex-direction: row-reverse;
    margin-inline: calc(var(--block-space) * 1.5) auto;
    padding:
        calc(var(--block-space) * 1.5)
        var(--inline-space)
        calc(var(--block-space) * 2)
        calc(var(--inline-space) * 2);

    .avatar {
      margin-inline: auto calc(-2.65em + var(--inline-space));
    }

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

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

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

.boost {
  margin-block: calc(var(--block-space) * -2);
  padding: var(--block-space) var(--block-space-double);
  z-index: 1;

  + .boost,
  &:has( + .boost) {
    margin-block: 0;
  }
}