/* Comment composer: collapsed prompts and the expanded Lexxy form. */

@layer components {
  /* Collapsed prompt + reply trigger: no editor is in the DOM until clicked,
     so the deal page boots zero Lexxy editors. */
  .composer-prompt {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    min-block-size: var(--tap);
    padding-inline: var(--inline-space);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-text-subtle);
    font-size: var(--text-small);

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

  /* Reply action in the comment footer, sized to sit beside the vote pill. */
  .comment__reply-trigger {
    display: inline-flex;
    align-items: center;
    min-block-size: 2rem;
    padding-inline: 0.75ch;
    border-radius: var(--radius-sm);
    font-size: var(--text-x-small);
    font-weight: 600;
    color: var(--color-text-subtle);

    @media (any-hover: hover) {
      &:hover {
        background: var(--tint-ink-10);
        color: var(--color-ink);
        text-decoration: none;
      }
    }
  }

  /* Expanded composer: composes .card (canvas + border + radius) so the
     borderless Lexxy editor blends in; re-skins .card's padding to a tighter
     inset via the custom-property API, so it wins regardless of load order. */
  .composer {
    --card-padding: 0.5rem 0.75ch;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    &:focus-within {
      border-color: var(--color-primary);
    }

    /* The container border above is the focus indicator; the editable area's own
       ring would double it and clip under the sticky toolbar. */
    [contenteditable]:focus-visible {
      outline: none;
    }
  }

  .composer__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--inline-space);
  }

  .composer__cancel {
    min-block-size: var(--tap);
    display: inline-flex;
    align-items: center;
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-text-subtle);

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

  .composer__send {
    min-block-size: var(--tap);
    padding-inline: 1.9ch;
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-small);
    font-weight: 600;

    @media (any-hover: hover) {
      &:hover {
        background: var(--color-primary-press);
      }
    }

    &:disabled {
      opacity: 0.6;
    }
  }
}