.diff-view {
  font-family: var(--typography-font-sans);
  font-size: var(--font-size-medium-16);
  line-height: var(--line-height-small-22);
  color: var(--color-subtle);
  min-width: 0;
}

.diff-view[data-shape='line'] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--spacing-4);
  padding-inline-start: var(--spacing-16);
  overflow-wrap: anywhere;
}

.diff-view[data-shape='line'] > .diff-content {
  flex: 1 1 0px;
}

.diff-view[data-shape='box'] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-4);
}

.diff-view .diff-box {
  border: var(--border-width-base) solid var(--border-color-subtle);
  border-radius: var(--border-radius-base);
  padding: var(--spacing-16);
  max-height: var(--size-256);
  overflow: auto;
  min-width: 0;
}

.diff-view .diff-lines {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.diff-view .diff-row {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-8);
  min-height: var(--line-height-small-22);
}

.diff-view .diff-box:has(> .diff-lines) {
  padding: 0;
}

.diff-view .diff-box > .diff-lines > .diff-row {
  padding-inline-start: var(--spacing-8);
}

.diff-view .diff-sign {
  flex-shrink: 0;
  width: 1ch;
  white-space: pre;
  user-select: none;
}

.diff-view .diff-content {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.diff-view .diff-box[data-passage-linked='true'] .diff-row {
  min-height: var(--passage-line-height, 0px);
}

.diff-view .diff-box[data-passage-wrap='false'] .diff-lines {
  width: max-content;
  min-width: 100%;
}

.diff-view .diff-box[data-passage-wrap='false'] .diff-content {
  white-space: pre;
  overflow-wrap: normal;
  flex-shrink: 0;
}

.diff-view .diff-gap {
  padding-inline-start: calc(1ch + var(--spacing-8));
  user-select: none;
}

.diff-view .diff-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px);
  white-space: nowrap;
}

.diff-view .diff-note {
  font-style: italic;
  margin: 0;
}

.diff-view .diff-old .diff-changed {
  color: var(--color-red);
}

.diff-view .diff-new .diff-changed {
  color: var(--color-green);
}

.diff-view .diff-old .diff-changed[data-blank='true'] {
  background-color: var(--background-color-red-subtle);
}

.diff-view .diff-new .diff-changed[data-blank='true'] {
  background-color: var(--background-color-green-subtle);
}

.diff-view .diff-changed-break {
  display: inline-block;
  width: 1ch;
  height: 1em;
  vertical-align: text-bottom;
}

.diff-view .diff-row[data-diff-line='removed'] {
  background-color: var(--background-color-red-subtle);
  color: var(--color-base);
}

.diff-view .diff-row[data-diff-line='inserted'] {
  background-color: var(--background-color-green-subtle);
  color: var(--color-base);
}

.diff-view .diff-row[data-diff-line='removed'] .diff-changed {
  background-color: var(--background-color-red);
  color: var(--color-on-solid);
  border-radius: var(--border-radius-minimal);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.diff-view .diff-row[data-diff-line='inserted'] .diff-changed {
  background-color: var(--background-color-green);
  color: var(--color-on-solid);
  border-radius: var(--border-radius-minimal);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.diff-view .diff-arrow {
  display: inline-block;
  padding-inline: var(--spacing-4);
}

.diff-view .diff-arrow:dir(rtl) {
  transform: scaleX(-1);
}

.diff-view[data-diff-mode='code'] .diff-box {
  font-family: var(--typography-font-mono);
  font-size: var(--font-size-medium-16);
  line-height: var(--line-height-small-22);
}

.diff-view[data-diff-mode='code'] .diff-row {
  min-height: var(--line-height-small-22);
}

.diff-view[data-diff-mode='rendered'] .diff-box {
  font-family: var(--typography-font-serif);
  font-size: var(--font-size-medium-16);
  line-height: var(--line-height-medium-26);
}

.diff-view[data-diff-mode='rendered'] .diff-row {
  min-height: var(--line-height-medium-26);
}

.diff-view [data-role='heading'], .diff-view [data-role='speaker'] {
  font-weight: var(--font-weight-semi-bold);
}

.diff-view [data-role='stage'] {
  font-style: italic;
}

.diff-view [data-role^='forme'], .diff-view [data-role='page'], .diff-view .diff-figure, .diff-view .diff-break {
  font-family: var(--typography-font-sans);
  font-size: var(--font-size-medium-16);
}

.diff-view .diff-figure {
  font-style: italic;
}

.diff-view [data-style~='italic'] {
  font-style: italic;
}

.diff-view [data-style~='bold'] {
  font-weight: var(--font-weight-bold);
}

.diff-view [data-style~='underline'] {
  text-decoration: underline;
}

.diff-view [data-style~='smallcaps'] {
  font-variant-caps: small-caps;
}

.diff-view [data-style~='sub'] {
  vertical-align: sub;
  font-size: 0.75em;
  line-height: 0;
}

.diff-view [data-style~='sup'] {
  vertical-align: super;
  font-size: 0.75em;
  line-height: 0;
}