@layer pages {
  .text-tool {
    & .source {
      min-block-size: 8rem;
      max-block-size: 28lh;
      font: var(--text-code) / var(--leading-code) var(--font-mono);
      unicode-bidi: isolate;

      &[data-format='plain'] {
        font: inherit;
      }
    }

    & .formats {
      margin-block-start: var(--space-16);
    }

    & pre {
      max-block-size: 28lh;

      & code {
        unicode-bidi: isolate;

        &[data-format='plain'] {
          font: var(--text-ui) / var(--leading-ui) var(--font-text);
        }
      }
    }

    &[data-state='stale'] pre {
      opacity: 0.5;
    }

    @media (prefers-reduced-motion: no-preference) {
      & pre {
        transition: opacity var(--transition-state);
      }
    }

    & .warnings {
      padding-inline-start: var(--space-20);
    }
  }
}