.richtext {
  --focus-outline-offset: 0;
  --focus-outline-width: 3px;
  --focus-outline-color: var(--richtext-focus-outline-color, var(--form-focus-color));

  background-color: var(--richtext-background-color, var(--color-white));
  border-color: var(--richtext-border-color, var(--form-color));
  border-style: solid;
  border-width: 2px;
  color: var(--richtext-color, var(--text-color));

  &:has(:not(.richtext__toolbar-dialog-input, .richtext__toolbar-button):focus-visible) {
    @include use-focus-outline();
  }
}

.richtext__toolbar {
  background-color: var(--richtext-toolbar-background-color, var(--color-midnight-50));
  border-block-end: 1px solid var(--richtext-toolbar-border-color, var(--color-midnight-100));
}

.richtext__toolbar-buttons {
  display: flex;
  flex-wrap: wrap;
  padding-inline: 1.2rem;
}

.richtext__toolbar-button {
  align-items: center;
  color: var(--richtext-toolbar-color, var(--color-midnight-900));
  display: flex;
  flex-shrink: 0;
  font-size: 2rem;
  gap: 0.8rem;
  justify-content: center;
  padding: 0.8rem;
  transition-property: background-color;

  &:is(:hover, :focus-visible, [data-trix-active]) {
    background-color: var(--richtext-toolbar-background-color, var(--color-midnight-100));
  }
}

.richtext__toolbar-button-text {
  font-size: 1.6rem;
}

.richtext__toolbar-dialog .richtext__toolbar-button {
  background-color: var(--color-midnight-100);
  padding: 1.6rem;

  &:is(:hover, :focus-visible, [data-trix-active]) {
    background-color: var(--color-midnight-200);
  }

  &:not(:first-of-type) {
    border-inline-start: 1px solid var(--color-midnight-300);
  }
}

.richtext__toolbar-dialog {
  border-block: 1px solid var(--richtext-toolbar-border-color, var(--color-midnight-300));
  display: none;
  margin-block-end: -1px;

  &:is([data-trix-active]) {
    display: flex !important;
  }
}

.richtext__toolbar-dialog-input {
  --focus-outline-offset: -3px;

  flex-grow: 1;
  padding-block: 1.6rem;
  padding-inline: 2.4rem;
}

.richtext__input {
  --focus-outline-color: transparent;
  --focus-outline-width: 0;

  font-size: 1.8rem;
  line-height: 2.4rem;
  max-block-size: calc(10lh + 2.4rem);
  min-block-size: calc(3lh + 2.4rem);
  overflow: auto;
  padding-block: 1.2rem;
  padding-inline: 2rem;

  > * + * {
    margin-block-start: 1.5rem;
  }

  :is(h2) {
    font-size: 1.3em;
    font-weight: bold;
  }

  :is(h3) {
    font-size: 1.1em;
    font-weight: bold;
  }

  :is(blockquote) {
    border-inline-start: 0.5rem solid currentColor;
    padding-inline-start: 1.5rem;
  }

  :is(ul, ol) {
    padding-inline-start: 2rem;
  }

  :is(pre) {
    font-family: monospace;
    white-space: nowrap;
  }

  :is(hr) {
    border-block-start: 1px solid currentColor;
  }

  :is(a) {
    color: var(--hyperlink-color);
    text-decoration-color: var(--hyperlink-color);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
  }
}