/* The rich text editor (Lexxy's <lexxy-editor class="lexxy-content">,
/* content_form/fields/_rich_text) reads as a field, as base.css draws the
/* native ones: a gray-300 border that darkens on focus, its toolbar ruled
/* off across the top. Lexxy builds the DOM, so it can't carry classes. */
@layer components {
  lexxy-editor.lexxy-content {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    padding: 0 calc(var(--spacing) * 3) calc(var(--spacing) * 2);

    &:hover:not(:focus-within) {
      border-color: var(--color-gray-400);
    }

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

    lexxy-toolbar {
      border-block-end: 1px solid var(--color-gray-200);
      inline-size: calc(100% + calc(var(--spacing) * 6));
      margin-inline: calc(var(--spacing) * -3);
      max-inline-size: none;
      padding-inline: calc(var(--spacing) * 1.5);
    }

    .lexxy-editor__content {
      min-block-size: 6lh;
    }
  }
}