/*
 * Customizations of the Trix editor chrome (the remaining defaults live in
 * actiontext.css). The stock `trix-editor` base rule was deleted there, so the
 * editor box is ours now: border width, min-height and focus outline come from
 * the rules below, while padding and radius come from the utility classes the
 * form builder and the admin forms put on the element.
 * Behavior counterparts live in app/javascript/application.js.
*/

trix-editor.rich-text-editor {
  display: block;
  min-height: 40px;
  overflow: auto;
  resize: vertical;
  border-width: 1px;
}

/* Drop focus affordances, the way @tailwindcss/forms does for native inputs.
   Transparent rather than `none` to keep a visible ring in forced-colors mode. */
trix-editor.rich-text-editor:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Controls we don't want content managers to use (see also application.js,
   where the corresponding attributes are removed). */
trix-toolbar .trix-button--icon-strike,
trix-toolbar .trix-button--icon-code,
trix-toolbar .trix-button--icon-number-list,
trix-toolbar .trix-button--icon-decrease-nesting-level,
trix-toolbar .trix-button--icon-increase-nesting-level {
  display: none;
}

/* The stock icon-only heading button is replaced by labelled H2/H3 text
   buttons injected in application.js. */
trix-toolbar .trix-button--icon-heading-1 {
  display: none;
}

/* Icon buttons are sized with `font-size: inherit` while text buttons get
   0.75em, so divide by 0.75 to end up with the same rendered dimensions. */
trix-toolbar .trix-button[data-trix-attribute="heading1"]:not(.trix-button--icon),
trix-toolbar .trix-button[data-trix-attribute="heading2"] {
  width: calc(2.6em / 0.75);
  height: calc(1.6em / 0.75);
  padding: 0;
  line-height: calc(1.6em / 0.75);
  text-align: center;
}

trix-toolbar .trix-input--dialog[name="href"] {
  background-color: #fff;
}

trix-toolbar .trix-input--dialog[name="href"].validate:invalid {
  background-color: #fff;
  border-color: #dc2626;
}