.text-editor {
  position: relative;

  border: var(--form-border);
  border-radius: var(--form-border-radius);

  &:focus-within {
    border: var(--form-border-focus-ring);

    box-shadow: var(--form-box-shadow);
  }

  .text-editor__overlay {
    display: flex;
    position: absolute;
    z-index: 1000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;

    background-color: var(--white-alpha-11);

    pointer-events: all;
  }

  .text-editor__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    padding: var(--spacing-1) var(--spacing-3);

    border-bottom: 1px solid #ccc;

    .text-editor__divider {
      width: 1px;
      height: 20px;
      margin: 0 4px;

      background-color: #ccced1;
    }

    .text-editor__button,
    .text-editor__select {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: var(--spacing-6);
      height: var(--spacing-6);
      padding: var(--spacing-1);

      transition: background-color 0.2s ease, border-color 0.2s ease;

      border: 1px solid transparent;
      border-radius: var(--radius-small-2);

      cursor: pointer;

      &:hover,
      &:active {
        background-color: var(--slate-3);
      }

      &:focus {
        border: 1px solid var(--blue-8);
        outline: none;
      }
    }

    .text-editor__button--active {
      background-color: var(--blue-2);

      color: var(--blue-9);
      font-weight: bold;

      &:hover {
        background-color: var(--blue-1);
      }
    }

    .text-editor__button svg {
      width: var(--font-size-3);
      height: var(--font-size-3);

      fill: currentColor;
    }
  }

  .text-editor__content {
    padding: var(--spacing-1);

    outline: none;

    p {
      margin-bottom: var(--spacing-4);

      line-height: var(--line-height-2);
    }

    h1, h2, h3, h4, h5, h6 {
      line-height: 1.25em;
    }

    h1 {
      margin: var(--spacing-3) 0;

      font-size: var(--font-size-8);
      font-weight: var(--font-weight-heavy);
    }

    h2 {
      margin: var(--spacing-3) 0;

      font-size: var(--font-size-7);
      font-weight: var(--font-weight-heavy);
    }

    h3 {
      margin: var(--spacing-2) 0;

      font-size: var(--font-size-6);
      font-weight: var(--font-weight-medium);
    }

    h4 {
      margin: var(--spacing-2) 0;

      font-size: var(--font-size-5);
      font-weight: var(--font-weight-medium);
    }

    h5 {
      margin: var(--spacing-1) 0;

      font-size: var(--font-size-4);
      font-weight: var(--font-weight-medium);
    }

    h6 {
      margin: var(--spacing-1) 0;

      font-size: var(--font-size-3);
      font-weight: var(--font-weight-medium);
    }

    blockquote {
      margin: var(--spacing-5) var(--spacing-6) var(--spacing-5) 0;
      padding-left: var(--spacing-3);

      border-left: var(--spacing-1) solid var(--slate-10);
    }

    ul,
    ol {
      margin: 0 0 var(--spacing-5);
      padding-left: var(--spacing-6);
      list-style-type: disc;
    }

    ol {
      list-style-type: decimal;
    }

    li {
      margin: 0 0 var(--spacing-2);
    }

    strong {
      font-weight: var(--font-weight-heavy);
    }

    em {
      font-style: italic;
    }

    a {
      color: var(--blue-11);
      text-decoration: underline;

      cursor: pointer;
    }
  }
}
