.diffSummary {
  border: rem(1px) solid
    light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
  border-radius: rem(10px);
  padding: rem(12px);
  background: light-dark(
    var(--mantine-color-gray-0),
    var(--mantine-color-dark-7)
  );
}

:global(.history-diff-added) {
  background: light-dark(#e1f3f2, #01654a) !important;
  color: light-dark(#007b69, #cafff7) !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

:global(.history-diff-deleted) {
  text-decoration: line-through;
  color: light-dark(var(--mantine-color-red-7), var(--mantine-color-red-4));
  background: light-dark(var(--mantine-color-red-0), rgba(255, 0, 0, 0.1));
  border-radius: rem(2px);
  padding: 0 rem(2px);
}

:global(.history-diff-node-added) {
  outline: rem(2px) solid light-dark(var(--mantine-color-teal-5), var(--mantine-color-teal-7));
  outline-offset: rem(2px);
  border-radius: rem(4px);
}

:global(.history-diff-node-deleted) {
  opacity: 0.5;
  outline: rem(2px) dashed light-dark(var(--mantine-color-red-4), var(--mantine-color-red-6));
  outline-offset: rem(4px);
  border-radius: rem(4px);
}
