/* -- Comment Form (website) -----------------------------------------
   Collects a new comment or a reply: the writer's avatar beside a Textarea
   that grows with its text (field-sizing), optional name / email fields for
   guests, a hint and the submit Button. Native validation (required,
   minlength) - :user-invalid marks the field only after an attempt. */

@layer components {
  .mk-comment-form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;

    & > .avatar {
      margin-block-start: 0.25rem;
    }
    /* without an avatar the form takes the full row */
    &:not(:has(> .avatar)) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .mk-comment-form-main {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;

    & .textarea {
      field-sizing: content;
      min-height: 5.5rem;
      max-height: 20rem;
      resize: none;
    }
  }

  /* guest fields: name + email side by side */
  .mk-comment-form-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 0.625rem;

    & > div {
      display: flex;
      flex-direction: column;
      gap: 0.375rem;
    }
  }

  .mk-comment-form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .mk-comment-form-hint {
    margin: 0 auto 0 0;
    color: var(--muted-foreground);
    font-size: 0.75rem;
  }

  /* a formatting row above the text (a Toggle Group, a Separator, Buttons) */
  .mk-comment-form-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
  }

  /* framed: toolbar, text and footer in one bordered box - the textarea
     loses its own border, the box takes the focus ring */
  .mk-comment-form[data-variant="framed"] .mk-comment-form-main {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--input);
    border-radius: var(--radius-lg);
    background: var(--background);
    transition:
      border-color 120ms,
      box-shadow 120ms;

    &:focus-within {
      border-color: var(--ring);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent);
    }
    & .mk-comment-form-toolbar {
      padding: 0.375rem;
      border-block-end: 1px solid var(--border);
      background: color-mix(in oklch, var(--muted) 50%, transparent);
    }
    & .textarea {
      border: 0;
      border-radius: 0;
      box-shadow: none;
      outline: none;
      background: transparent;
    }
    & .mk-comment-form-footer {
      padding: 0.5rem 0.625rem;
      border-block-start: 1px solid var(--border);
    }
    & .tabs {
      gap: 0;
    }
    & .tab-content {
      padding: 0;
    }
  }

  /* reply: compact, under a comment */
  .mk-comment-form[data-variant="reply"] {
    gap: 0.5rem;

    & .mk-comment-form-main .textarea {
      min-height: 3.5rem;
      font-size: 0.875rem;
    }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-comment-form[data-variant="framed"] .mk-comment-form-main {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    .mk-comment-form-hint {
      color: var(--foreground);
    }
  }

  @media (forced-colors: active) {
    .mk-comment-form-main .textarea {
      border: 1px solid CanvasText;
    }
  }
}