@layer pages {
  .diff {
    & textarea {
      min-block-size: 10rem;
      max-block-size: 28lh;
    }

    & .version {
      min-inline-size: 0;
      padding-block: var(--space-20);
      padding-inline-start: var(--space-48);

      @media (max-width: 900px) {
        padding-inline-start: 0;
      }
    }

    & .wrapper > .error {
      margin-block: 0 var(--space-8);
    }

    & .changes {
      padding-block: var(--space-20) var(--space-8);
      border-block-start: 1px dotted var(--color-line-soft);
    }

    & .summary {
      margin-block: 0 var(--space-4);
      font-weight: var(--weight-subheading);

      &:empty {
        display: none;
      }
    }

    & .view {
      max-block-size: 40lh;
      margin-block-start: var(--space-12);
      overflow: auto;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    & :is(ins, del) {
      border-radius: var(--radius-inline);
      color: var(--color-ink);
    }

    & ins {
      background: var(--syntax-addition);
      text-decoration: underline 1px var(--color-green-deep);
      text-underline-offset: 0.2em;

      &::before {
        content: '' / 'добавлено: ';
      }

      &::after {
        content: '' / ' конец добавления';
      }
    }

    & del {
      background: var(--syntax-deletion);
      text-decoration: line-through 1px var(--color-danger);

      &::before {
        content: '' / 'удалено: ';
      }

      &::after {
        content: '' / ' конец удаления';
      }
    }

    & .space {
      color: var(--color-muted);
    }

    @media (forced-colors: active) {
      & :is(ins, del) {
        outline: 1px solid Highlight;
      }
    }
  }
}