.text-editor {
  display: flex;
  position: relative;
  flex-direction: column;

  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__content-container {
    position: relative;
  }

  .text-editor__content-sentinel {
    position: absolute;
    top: 0;
  }

  &:has(.text-editor__toolbar--is-sticky) {
    margin-top: calc(2.5rem + 2px);
  }

  .text-editor__toolbar--is-sticky {
    position: fixed;
    z-index: 100;
    top: calc(2.5rem + 2px);
    margin-left: -1px;

    transition: top 0.15s ease-out;

    background-color: var(--white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .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-12);

    pointer-events: all;
  }

  .text-editor__floating-menu {
    position: absolute;
    margin-top: var(--spacing-1);
    margin-left: var(--spacing-1);

    transition: top 0.15s ease-out;
  }

  .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;
    }
  }
}
