/* -- Comment Item (website) -----------------------------------------
   One comment: avatar, author (+ a role Badge), the timestamp (a permalink
   to the comment's own id), the text and its actions (reply, like) - and
   its replies, nested on a thread line. A comment reached by its permalink
   (:target) or marked data-highlighted lights up. */

@layer components {
  .mk-comment-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 0.75rem;
    padding-block: 0.875rem;
    scroll-margin-block-start: 5rem;

    & > .avatar {
      grid-row: span 2;
    }
  }

  .mk-comment-item-main {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
  }

  .mk-comment-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    font-size: 0.875rem;
  }

  .mk-comment-item-author {
    color: var(--foreground);
    font-weight: 600;
    text-decoration: none;

    &:is(a):hover {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }
  }

  .mk-comment-item-time {
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
      border-radius: var(--radius-sm);
    }
  }

  .mk-comment-item-body {
    font-size: 0.9375rem;
    line-height: 1.6;
    overflow-wrap: anywhere;

    & > * {
      margin: 0;
    }
    & > * + * {
      margin-block-start: 0.5em;
    }
    & a {
      color: var(--primary);
      text-underline-offset: 0.2em;
    }
    & blockquote {
      padding-inline-start: 0.75em;
      border-inline-start: 2px solid var(--border);
      color: var(--muted-foreground);
    }
  }

  .mk-comment-item-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem;
    margin-inline-start: -0.5rem;
    color: var(--muted-foreground);
  }

  /* replies: nested comments on a thread line */
  .mk-comment-item-replies {
    grid-column: 2;
    margin: 0.25rem 0 0;
    padding: 0 0 0 1rem;
    border-inline-start: 2px solid var(--border);
    list-style: none;

    & > li > .mk-comment-item:last-child {
      padding-block-end: 0;
    }
  }

  /* reached by its permalink, or marked */
  .mk-comment-item:target,
  .mk-comment-item[data-highlighted] {
    margin-inline: -0.75rem;
    padding-inline: 0.75rem;
    border-radius: var(--radius-lg);
    background: color-mix(in oklch, var(--primary) 8%, transparent);
    animation: mk-comment-item-flash 1.6s ease-out;
  }

  /* compact: a tighter thread */
  .mk-comment-item[data-variant="compact"] {
    padding-block: 0.5rem;

    & .mk-comment-item-body {
      font-size: 0.875rem;
    }
    & .mk-comment-item-head {
      font-size: 0.8125rem;
    }
  }

  /* deleted: the text is gone, the thread stays */
  .mk-comment-item[data-variant="deleted"] .mk-comment-item-body {
    color: var(--muted-foreground);
    font-style: italic;
  }

  /* the ⋯ menu (a Dropdown trigger) at the end of the head */
  .mk-comment-item-menu {
    margin-inline-start: auto;
  }

  /* reactions: emoji chips - toggle buttons (aria-pressed), an add button */
  .mk-comment-item-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-block-start: 0.125rem;

    & button {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      height: 1.625rem;
      padding: 0 0.5rem;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: transparent;
      color: var(--muted-foreground);
      font: inherit;
      font-size: 0.75rem;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
      transition:
        background-color 120ms,
        border-color 120ms,
        color 120ms;

      &:hover {
        background: var(--accent);
        color: var(--accent-foreground);
      }
      &[aria-pressed="true"] {
        border-color: color-mix(in oklch, var(--primary) 45%, transparent);
        background: color-mix(in oklch, var(--primary) 10%, transparent);
        color: var(--foreground);
      }
      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 1px;
      }
      & svg {
        width: 0.875rem;
        height: 0.875rem;
      }
    }
  }

  /* voted: a score column (up / count / down) instead of the avatar column */
  .mk-comment-item-votes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    grid-row: span 2;
    color: var(--muted-foreground);
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;

    & output {
      color: var(--foreground);
    }
    & button[aria-pressed="true"] {
      color: var(--primary);
    }
  }
  .mk-comment-item[data-variant="voted"] {
    grid-template-columns: auto auto minmax(0, 1fr);

    & > .avatar {
      grid-row: auto;
      align-self: start;
    }
    & > .mk-comment-item-replies {
      grid-column: 3;
    }
  }

  /* accepted: the answer - a green rail and a check badge */
  .mk-comment-item[data-variant="accepted"] {
    padding-inline: 0.875rem;
    margin-inline: -0.875rem;
    border-inline-start: 3px solid oklch(0.62 0.15 150);
    border-radius: var(--radius-md);
    background: color-mix(in oklch, oklch(0.62 0.15 150) 7%, transparent);
  }

  /* collapsible replies: a native <details> - "Show 3 replies" */
  .mk-comment-item-thread {
    grid-column: 2;

    & > summary {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      margin-block-start: 0.375rem;
      padding: 0.25rem 0.5rem;
      margin-inline-start: -0.5rem;
      border-radius: var(--radius-sm);
      color: var(--primary);
      font-size: 0.8125rem;
      font-weight: 600;
      cursor: pointer;
      list-style: none;

      &::-webkit-details-marker {
        display: none;
      }
      &::before {
        content: "";
        width: 0.375rem;
        height: 0.375rem;
        border-inline-end: 1.5px solid currentColor;
        border-block-end: 1.5px solid currentColor;
        rotate: -45deg;
        transition: rotate 150ms;
      }
      &:hover {
        background: var(--accent);
      }
      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 1px;
      }
    }
    &[open] > summary::before {
      rotate: 45deg;
    }
    & > .mk-comment-item-replies {
      grid-column: auto;
    }
  }

  @keyframes mk-comment-item-flash {
    from {
      background: color-mix(in oklch, var(--primary) 22%, transparent);
    }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-comment-item:target,
    .mk-comment-item[data-highlighted] {
      animation: none;
    }
    .mk-comment-item-reactions button,
    .mk-comment-item-thread > summary::before {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    .mk-comment-item-time,
    .mk-comment-item-actions {
      color: var(--foreground);
    }
    .mk-comment-item-replies {
      border-inline-start-color: var(--foreground);
    }
  }

  @media (forced-colors: active) {
    .mk-comment-item:target,
    .mk-comment-item[data-highlighted] {
      outline: 2px solid Highlight;
    }
  }
}