@layer components {
  .comments {
    --comment-column-gap: 0.66ch;
    --comment-row-gap: 1px;
    --comment-space: 0.66em;
  }

  .comments--message {
    --comment-space: 0.5em;

    .comment__avatar {
      --avatar-box-shadow: var(--color-body);
    }

    .comment__body-content {
      --comment-background: var(--color-canvas);
    }
  }

  .comment {
    --content-padding-block: var(--block-space-half);
    --content-padding-inline: calc(var(--inline-space) * 1.5);
    container-type: inline-size;
    column-gap: var(--comment-column-gap);
    display: grid;
    grid-auto-columns: var(--inline-space-double) 1fr min-content;
    grid-auto-rows: min-content;
    grid-template-areas:
      "sep sep sep"
      "avatar body body";
    position: relative;
    row-gap: var(--comment-row-gap);

    + .comment--first-in-thread {
      margin-block-start: var(--comment-space);
    }

    .comment__boost-inline {
      display: none;
    }

    &:has([open]) {
      z-index: 1;

      .comment__actions-btn {
        --hover-size: 0;
        opacity: 1;
        background-color: var(--color-ink-lighter);
      }
    }

    &:last-of-type {
      &:has(.boost__reactions) {
        .comment__body {
          padding-block-end: 3.2rem;
        }
      }
    }

    &:has(.boost-item) {
      .comment__boost-inline {
        display: inline-flex;
      }
    }

    &:has(trix-editor) {
      .boosts {
        display: none !important;
      }
    }
  }

  .comment__date-separator {
    align-items: center;
    display: none;
    font-size: 0.8rem;
    font-weight: 600;
    grid-area: sep;
    grid-template-columns: 1fr auto 1fr;
    inline-size: 100%;
    margin-block: var(--comment-space);
    text-align: center;
    text-transform: uppercase;
    visibility: hidden;

    time,
    span {
      padding: 0.66em 2.33ch;
      background-color: var(--color-canvas);
    }

    &::after,
    &::before {
      border-block-start: 2px solid var(--color-ink-lighter);
      content: "";
    }

    .comment--first-of-day & {
      display: grid;
      visibility: visible;
    }
  }

  .comment__avatar {
    --avatar-border-radius: 50%;
    --avatar-border-size: 1px;
    --avatar-size: 3.5ch;
    --avatar-box-shadow: var(--color-body);
    grid-area: avatar;
    z-index: 2;
    box-shadow: 0 0 0 var(--hover-size) var(--avatar-box-shadow);
    aspect-ratio: 1;
    border-radius: var(--avatar-border-radius);
    display: none;
    inline-size: var(--avatar-size, 5ch);
    margin: 0;
    place-items: center;

    .avatar {
      block-size: var(--avatar-size, 5ch);
    }

    .comment--first-in-thread &,
    .comment--first-of-day & {
      display: grid;
    }
  }

  .comment__meta {
    align-items: center;
    column-gap: calc(var(--comment-column-gap) / 2);
    display: flex;
    justify-content: start;
    line-height: 1.5;
    min-inline-size: 0;
    margin: 0;
    padding-inline-end: calc(var(--btn-size) / 2);

    .comment__heading {
      align-items: center;
      column-gap: calc(var(--comment-column-gap) / 2);
      display: inline-flex;
      margin: 0;
      min-inline-size: 0;
    }

    .comment__actions {
      @media (max-width: 100ch) {
        .comment__actions-btn {
          --btn-padding: 0 0.5em;
          aspect-ratio: unset;
          block-size: auto;
          border-radius: 0.3em;
        }
      }

      @media (min-width: 100ch) {
        inset-block-start: 50%;
        inset-inline-start: calc(100% + var(--comment-column-gap) / 2);
        position: absolute;
        transform: translate(0, -50%);
      }
    }
  }

  .comment__author {
    font-size: 0.8rem;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: none;

    .comment--first-in-thread &,
    .comment--first-of-day & {
      display: inherit;
    }
  }

  .comment__permalink {
    color: var(--color-text);
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.5;
    text-decoration: none;
    white-space: nowrap;
  }

  /* Make room for the boost popup */
  .comment__body {
    --popup-min-size: 20ch;
    column-gap: var(--inline-space-half);
    display: flex;
    grid-area: body;
    max-inline-size: min(80ch, calc(100cqi - var(--popup-min-size) - var(--inline-space-double)));
    position: relative;

    .comment--me & {
      flex-direction: row-reverse;
    }

    @media (max-width: 100ch) {
      max-inline-size: 100%;
    }
  }

  .comment__body-content {
    background-color: var(--comment-background, var(--color-ink-body));
    border-radius: 0.5em;
    color: var(--comment-color, var(--color-ink));
    font-weight: 400;
    inline-size: fit-content;
    margin-block-end: var(--comment-row-gap);
    max-inline-size: 100%;
    padding: var(--content-padding-block) var(--content-padding-inline);
    position: relative;
    word-break: break-word;

    p {
      &:first-of-type {
        margin-block-start: 0;
      }

      &:last-of-type {
        margin-block-end: 0;
      }
    }

    blockquote {
      --blockquote-margin: 0 var(--inline-space) var(--block-space);
    }
  }

  .comment__action-btn {
    --btn-background: transparent;
    --btn-border-color: transparent;
    --outline-offset: 0;
    --width: 33%;
    flex-basis: var(--width);
    font-size: 0.8rem;

    @media (hover: hover) and (pointer: fine) {
      &:where(:not(:active):hover) {
        --btn-background: var(--color-border-dark);
        --hover-size: 0;

        opacity: 1;
      }
    }

    &:where(:not(:active)):focus-visible {
      opacity: 1;
    }
  }

  .comment__actions-btn {
    @media (hover: hover) and (pointer: fine) {
      opacity: 0;
      transition: opacity 150ms ease-in-out;
      transition-delay: 150ms;

      .comment:hover & {
        opacity: 1;
      }
    }

    @media (hover: none) and (pointer: coarse) {
      opacity: 0.5;

      & [open] {
        opacity: 1;
      }
    }
  }

  .comment__actions-menu {
    --boost-border-color: var(--color-selected-dark);
    inset-block-start: calc(0.5 * var(--btn-size));
    inset-inline-start: calc(0.5 * var(--btn-size));
    transform: translateX(-50%);
    transform-origin: top left;

    @media (max-width: 100ch) {
      inset-block-start: calc(var(--btn-size) / 1.5);
    }

    .popup-orientation-top & {
      inset-block-end: calc(0.5 * var(--btn-size));
      inset-block-start: auto;
      transform-origin: bottom left;

      @media (max-width: 100ch) {
        inset-block-end: calc(var(--btn-size) / 1.5);
      }
    }
  }

  /* Me */
  .comment--me {
    grid-auto-columns: min-content 1fr var(--inline-space-double);
    grid-template-areas:
      "sep sep sep"
      "body body avatar";

    :is(.comment__body, .comment__meta, .comment__heading) {
      justify-self: end;
    }

    :is(.comment__meta, .comment__heading) {
      flex-direction: row-reverse;
      justify-content: end;
    }

    .comment__meta {
      padding-inline: calc(var(--btn-size) / 2) 0;
    }

    .comment__avatar {
      margin-inline: calc(var(--content-padding-inline) * -1) 0;
    }

    .comment__actions {
      justify-content: end;

      @media (min-width: 100ch) {
        inset-inline: auto calc(100% + var(--comment-column-gap) / 2);
      }
    }

    .comment__actions-menu {
      inset-inline: auto calc(0.5 * var(--btn-size));
      transform-origin: top right;

      .popup-orientation-top & {
        transform-origin: bottom right;
      }
    }
  }

  .comment-count {
    --bg-color: var(--color-theme);

    background: var(--bg-color);
    border-radius: 0.5em;
    border-bottom-right-radius: 0;
    block-size: var(--btn-size);
    color: var(--color-ink-inverted);
    display: grid;
    font-weight: 800;
    inline-size: var(--btn-size);
    place-items: center;
    position: relative;

    &:before {
      block-size: 0;
      border-block-start: 0.5rem solid var(--bg-color);
      border-inline-start: 0.5rem solid transparent;
      content: "";
      inline-size: 0;
      inset-block-end: -0.5rem;
      inset-inline-end: 0;
      position: absolute;
    }
  }
}