/* A word diff (PendingChangesHelper#approvals_word_diff): inside a changed
   text, the words taken out (<del>) on the live side and the words put in
   (<ins>) on the proposed side. A visualization shadcn/ui has no component
   for — the comparison is otherwise the kit's (outline Items), and these marks
   are the one place it needs colour to be read: which words this change
   alters. Reads only the kit's tokens. */
@layer components {
  .approvals__value {
    del {
      background-color: color-mix(in oklch, var(--destructive) 15%, transparent);
      border-radius: var(--radius-sm);
      color: var(--destructive);
      text-decoration: line-through;
    }

    ins {
      background-color: color-mix(in oklch, var(--success) 15%, transparent);
      border-radius: var(--radius-sm);
      color: color-mix(in oklch, var(--success) 75%, var(--foreground));
      text-decoration: none;
    }
  }
}