wagtail/client/src/components/Draftail/Draftail.scss

$draftail-editor-text: $color-input-text;
$draftail-placeholder-text: theme('colors.grey.400');
// w-body-text-large
$draftail-editor-font-size: theme('fontSize.18');
$draftail-editor-line-height: theme('lineHeight.normal');

$draftail-editor-chrome: theme('colors.primary.DEFAULT');
$draftail-editor-chrome-text: $color-white;
// This needs to remain a Sass value due to a limitation in Draftail.
// $draftail-editor-chrome-active: $color-white;
$draftail-editor-chrome-active: #fff;
$draftail-editor-chrome-accent: transparent;

$draftail-base-spacing: 0.375rem;
$draftail-editor-radius: 0;
$draftail-editor-border: 0;
$draftail-editor-padding: theme('spacing.[2.5]') theme('spacing.5');
$draftail-editor-background: $color-white;
$draftail-block-spacing: theme('spacing.[2.5]');
$draftail-toolbar-radius: theme('borderRadius.DEFAULT');
$draftail-toolbar-icon-size: 1em;

$draftail-trigger-additional-size: 30px;
$draftail-block-hoverable-area-offset: 40px;

$draftail-editor-font-family: $font-sans;

@import '../../../../node_modules/draft-js/dist/Draft';
@import '../../../../node_modules/draftail/src/index';

@import './Tooltip/Tooltip';
@import './CommentableEditor/CommentableEditor';
@import './EditorFallback/EditorFallback';

@import './decorators/TooltipEntity';

@import './blocks/MediaBlock';
@import './blocks/ImageBlock';
@import './blocks/EmbedBlock';

@include draftail-richtext-styles {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    // Overrides for heading styles of Wagtail itself.
    color: inherit;
    line-height: theme('lineHeight.tight');
    font-weight: theme('fontWeight.bold');
  }

  h1 {
    font-size: theme('fontSize.30');
  }

  h2 {
    font-size: theme('fontSize.24');
  }

  h3 {
    font-size: theme('fontSize.22');
  }

  h4 {
    font-size: theme('fontSize.18');
  }

  h5 {
    font-size: theme('fontSize.16');
  }

  h6 {
    font-size: theme('fontSize.14');
  }
}

.Draftail-Editor {
  @include input-base();
  // Number used inside a `calc` function, which doesn’t support unitless zero.
  // stylelint-disable-next-line length-zero-no-unit
  --draftail-offset-inline-start: 0px;

  &--focus {
    outline: $focus-outline-width solid $color-focus-outline;
  }
}

.Draftail-Editor__wrapper {
  // Ensure elements within the editor are positioned according to this container.
  position: relative;
  // Make fields take up the whole available width in their container.
  width: 100%;
}

.Draftail-Toolbar {
  border-width: 0;
  // Remove once we drop support for Safari 14.
  // stylelint-disable-next-line property-disallowed-list
  border-bottom-left-radius: 0;
  border-end-start-radius: 0;
  // Remove once we drop support for Safari 14.
  // stylelint-disable-next-line property-disallowed-list
  border-bottom-right-radius: 0;
  border-end-end-radius: 0;
  background-color: $draftail-editor-background;
  color: $draftail-placeholder-text;

  .Draftail-Editor--focus & {
    color: $draftail-editor-text;
    top: calc(theme('spacing.slim-header') * 2);

    @include media-breakpoint-up(sm) {
      top: theme('spacing.slim-header');
    }
  }
}

.Draftail-MetaToolbar {
  position: absolute;
  inset-inline-end: 0;
  visibility: hidden;
  background-color: transparent;

  &:empty {
    display: none;
  }

  // Make sure the toolbar is always visible for devices that do not hover.
  @media (hover: hover) {
    visibility: hidden;

    .Draftail-Editor:focus-within &,
    .Draftail-Editor:hover & {
      visibility: visible;
    }
  }
}

.Draftail-BlockToolbar {
  position: absolute;
  background: transparent;
  // Adds additional hoverable area so block trigger will be shown when hovering to the side of the field.
  width: $draftail-block-hoverable-area-offset;
  inset-inline-start: -$draftail-block-hoverable-area-offset;
  top: 0;
  height: 100%;
  display: flex;
  justify-content: center;
}

.Draftail-BlockToolbar__trigger {
  color: theme('colors.secondary.DEFAULT');
  width: theme('spacing.4');
  height: theme('spacing.4');
  margin-inline-end: 1px;

  @include media-breakpoint-up(sm) {
    width: theme('spacing.5');
    height: theme('spacing.5');
  }

  // Increase the hoverable area of the trigger button
  &::before {
    content: '';
    background: transparent;
    display: block;
    position: absolute;
    transform: translate(calc(var(--w-direction-factor) * -50%), -50%);
    inset-inline-start: 50%;
    top: 50%;
    width: $draftail-trigger-additional-size;
    height: $draftail-trigger-additional-size;
    border-radius: theme('borderRadius.DEFAULT');
    z-index: 1;
  }

  // Hide the trigger unless the editor is hovered, focused, or an element within it is focused.
  .Draftail-Editor:not(:hover, .Draftail-Editor--focus, :focus-within) & {
    // Hide even if the conditions to display it are met.
    // stylelint-disable-next-line declaration-no-important
    visibility: hidden !important;
  }

  &:hover,
  &:focus-visible {
    color: $color-white;
    background-color: $color-teal;
  }

  .icon {
    transition: transform 0.3s ease;
    width: theme('spacing.3');
    height: theme('spacing.3');
  }

  &[aria-expanded='true'] .icon {
    transform: rotate(45deg);
  }
}

.Draftail-ToolbarGroup::before {
  display: none;
}

.Draftail-ToolbarButton {
  height: 1.875rem;
  min-width: 1.875rem;
  padding: 0;
  margin-inline-end: 0.625rem;

  .Draftail-ToolbarGroup:last-of-type &:last-of-type {
    margin-inline-end: 0;
  }

  &[disabled] {
    opacity: 0.3;
  }

  &:hover,
  &:active {
    border: 1px solid $color-grey-3;
  }

  .icon {
    width: $draftail-toolbar-icon-size;
    height: $draftail-toolbar-icon-size;
    vertical-align: middle;
  }

  .icon-h1,
  .icon-h2,
  .icon-h3,
  .icon-h4,
  .icon-h5,
  .icon-h6 {
    width: 1.25 * $draftail-toolbar-icon-size;
    height: 1.25 * $draftail-toolbar-icon-size;
  }
}

.Draftail-ToolbarButton--pin {
  min-width: theme('spacing.6');
  height: theme('spacing.6');
  border: 1px solid theme('colors.primary.DEFAULT');

  &:hover {
    border-color: theme('colors.primary.DEFAULT');
  }

  .Draftail-Toolbar & {
    border-color: $color-input-border;
    background-color: theme('colors.grey.50');
    border-top-width: 0;
    border-inline-end-width: 0;

    .Draftail-Editor:hover & {
      border-color: $color-input-hover-border;
    }
  }
}

.Draftail-block--blockquote {
  border-inline-start: 0.25em solid $color-grey-3;
  color: $color-grey-2;
  margin: 1em 0;
  padding: 1em 2em;
}

.DraftEditor-editorContainer {
  border: 0;
}