/* Comment thread: list, single comment, overflow menu, sort pills. */

@layer components {
  .comments {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-block-start: 1px solid var(--color-border-subtle);
    padding-block-start: 1rem;
  }

  .comments__heading {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    font-size: var(--text-medium);
    font-weight: 600;
  }

  .comments__count {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    color: var(--color-text-subtle);
  }

  .comments__signin {
    font-size: var(--text-small);
    color: var(--color-text-subtle);
  }

  .comments__empty {
    font-size: var(--text-small);
    color: var(--color-text-muted);
    padding-block: 0.5rem;
  }

  .comments__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .comment {
    display: flex;
    gap: var(--inline-space);
  }

  .comment__main {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .comment__head {
    display: flex;
    align-items: center;
    gap: 0.75ch;
  }

  .comment__user {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-ink);
  }

  .comment__time {
    font-size: var(--text-x-small);
    color: var(--color-text-muted);
  }

  .comment__body {
    font-size: var(--text-small);
    line-height: var(--leading-base);
    text-wrap: pretty;
  }

  /* The editor stores a trailing empty paragraph when you hit Enter after the
     last line; don't let it open a gap before the footer. */
  .comment__body .lexxy-content > p:last-child:has(> br:only-child) {
    display: none;
  }

  .comment__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75ch;
    margin-block-start: 0.25rem;
  }

  .comment__foot-right {
    margin-inline-start: auto;
  }

  .comment__action {
    list-style: none;
    cursor: pointer;
    font-size: var(--text-x-small);
    font-weight: 600;
    color: var(--color-text-subtle);

    &::-webkit-details-marker {
      display: none;
    }
  }

  .comment__reply {
    font-size: var(--text-x-small);
  }

  .comment__replies {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block-start: 0.75rem;
    padding-inline-start: 1.5ch;
    border-inline-start: 2px solid var(--tint-ink-10);

    &:empty {
      display: none;
    }
  }

  /* Comment "⋯" overflow menu */
  .comment-menu {
    position: relative;
    margin-inline-start: auto;
  }

  /* Adopts .menu__trigger (cursor + list-style + marker reset); keeps the
     round 32px hit-target box and its hover as deltas. */
  .comment-menu__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);

    @media (any-hover: hover) {
      &:hover {
        background: var(--tint-ink-5);
        color: var(--color-ink);
      }
    }
  }

  /* Adopts .menu (shell); keeps the offset + width deltas. */
  .comment-menu__items {
    inset-block-start: 100%;
    min-inline-size: 7.5rem;
  }

  .comment-menu__form {
    display: contents;
  }

  /* Adopts .menu__item (flex row + radius + size + text-align); re-skins it to a
     full-tap-height row by zeroing block padding via the --menu-item-padding
     custom property (not a padding re-declaration), so it wins over .menu__item
     regardless of stylesheet load order. */
  .comment-menu__item {
    --menu-item-padding: 0 var(--inline-space);
    inline-size: 100%;
    min-block-size: var(--tap);
    color: var(--color-text);
    background: none;
    cursor: pointer;

    @media (any-hover: hover) {
      &:hover {
        background: var(--tint-ink-5);
      }
    }

    &.comment-menu__item--danger {
      color: var(--color-down);

      @media (any-hover: hover) {
        &:hover {
          background: var(--color-down-surface);
        }
      }
    }
  }

  /* Comment sort */
  .comment-sort {
    display: flex;
    gap: var(--inline-space-half);
    margin-block-end: 1rem;
  }

  /* Adopts .pill-toggle (shape + 12px type) but re-skins it through the --pill-*
     variables: a light outlined pill instead of the sunken fill, with a taller
     tap target and mono uppercase. Setting variables (not re-declaring
     properties) means this wins over .pill-toggle regardless of load order, so
     no cascade layer is needed. */
  .comment-sort__pill {
    --pill-bg: var(--color-bg);
    --pill-padding: 0 var(--inline-space);
    min-block-size: var(--tap);
    border: 1px solid var(--color-border-subtle);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.02em;

    @media (any-hover: hover) {
      &:hover {
        border-color: var(--color-border);
        text-decoration: underline;
      }
    }

    /* Outlined-emphasis active state (ink border + ink text), readable on the
       light pill. The element no longer also carries .pill-toggle--on, so the
       ink fill is never applied. */
    &.comment-sort__pill--on {
      --pill-color: var(--color-ink);
      border-color: var(--color-ink);
    }
  }

  /* @mention chip, inline in rich-text comment bodies */
  .mention {
    font-weight: 600;
    color: var(--color-link);
    text-decoration: none;
    padding-inline: 0.15em;
    border-radius: var(--radius-sm);
    background: var(--tint-ink-5);

    @media (any-hover: hover) {
      &:hover {
        text-decoration: underline;
      }
    }
  }
}