/* A text of the editor (rich-text.js), where it is read and where it is written. The marks of the toolbar come with the
   text; this sheet gives its blocks the rhythm of the site. The HTML comes from the sanitiser of the API, which keeps
   nothing else. Checked by design/_tools/check_web_css.py as a component's sheet is. */
.rich-text p,
.rich-text h2,
.rich-text h3,
.rich-text ul,
.rich-text ol,
.rich-text blockquote {
  margin: 0;
  padding: 0;
}

.rich-text p:not(:last-child),
.rich-text ul:not(:last-child),
.rich-text ol:not(:last-child),
.rich-text blockquote:not(:last-child),
.rich-text table:not(:last-child) {
  margin-block-end: var(--rich-text-block-gap);
}

.rich-text h2,
.rich-text h3 {
  margin-block-end: var(--rich-text-block-gap);
}

.rich-text h2 {
  font: var(--text-25-bold);
}

.rich-text h3 {
  font: var(--text-20-bold);
}

.rich-text ul,
.rich-text ol {
  padding-inline-start: var(--rich-text-indent);
}

.rich-text blockquote {
  padding-inline-start: var(--rich-text-block-gap);
  border-inline-start: var(--border-2) solid var(--color-gray-80);
  color: var(--color-gray-55);
}

.rich-text a {
  color: var(--color-primary);
  text-decoration: underline;
}

.rich-text img {
  max-inline-size: 100%;
  block-size: auto;
}

.rich-text hr {
  border: 0;
  border-block-start: var(--border-1) solid var(--color-gray-80);
}

.rich-text table {
  inline-size: 100%;
  border-collapse: collapse;
}

.rich-text th,
.rich-text td {
  padding: var(--rich-text-cell);
  border: var(--border-1) solid var(--color-gray-80);
}

/* The editor: the field of the panel, right to left. */
.rich-text-field .note-editor.note-frame {
  border-color: var(--color-gray-80);
  border-radius: var(--radius-md);
}

.rich-text-field.invalid .note-editor.note-frame {
  border-color: var(--color-danger);
}

.rich-text-field .note-editor .note-editing-area .note-editable {
  min-block-size: var(--rich-text-editor-height);
  background: var(--color-white);
  font: var(--text-17-regular);
  text-align: start;
}

.rich-text-field .note-toolbar {
  border-start-start-radius: var(--radius-md);
  border-start-end-radius: var(--radius-md);
}

@media (max-width: 767.98px) {
  .mobile .rich-text h2 {
    font: var(--text-17-bold);
  }

  .mobile .rich-text h3 {
    font: var(--text-15-bold);
  }

  .mobile .rich-text-field .note-editor .note-editing-area .note-editable {
    font: var(--text-13-regular);
  }
}