.root {
  hyphens: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*
  `word-wrap: break-word` is required for browsers that do not
  support automatic hyphenation (e.g. Edge on Windows as of
  2021-10) to prevent long words from causing horinzontal
  overflow. Mobile Safari (e.g. iPhone 11/iOS 13) does support
  `hyhens: auto`, but disables hyphenation if `word-wrap:
  break-word` is present. Since only Mobile Safari supports
  `-webkit-touch-callout` [1], we can use it to reset `word-wrap`
  for iOS only.

  [1] https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices
*/
@supports (-webkit-touch-callout: none) {
  .root {
    word-wrap: normal;
  }
}

.hyphens-manual {
  hyphens: manual;
  word-wrap: break-word;
}

.hyphens-none {
  hyphens: none;
  word-wrap: normal;
}

.textEffects {
  padding: var(--text-highlight-padding);
  line-height: var(--text-highlight-line-height);
  box-decoration-break: clone;
}

.textEffects:not(:has([data-slate-zero-width="n"])) {
  background-color: var(--text-highlight-background-color);
}

.textEffects > span {
  color: var(--background-clip-text-fallback-color);
  padding: var(--background-clip-text-padding);
  box-decoration-break: clone;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .textEffects > span {
    background: var(--background-clip-text-background);
    background-clip: var(--background-clip-text-background-clip);
    color: var(--background-clip-text-color);
    caret-color: var(--background-clip-text-fallback-color);
  }
}
