GN-4130: Add styles for data-editor-highlight

.changeset/eleven-grapes-greet.md

@@ -0,0 +1,8 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': minor
+---
+
+GN-4130: Move styles for `data-editor-highlight` 
+
+Styles that were applied to elements with the `data-editor-highlight` attribute (used by `citation-plugin`) moved from  
+[editor repository](https://github.com/lblod/ember-rdfa-editor/pull/1013) to this repo as part of the `citation-plugin`.

app/styles/citaten-plugin.scss

@@ -48,3 +48,41 @@
 .citaten--error-code {
   font-family: var(--au-font-tertiary);
 }
+
+// Start: Styling the highlight when detecting search term inside the editor
+@mixin hints($before, $after) {
+  .rdfa-annotations.show-rdfa-blocks [data-editor-highlight=true] {
+    &:before {
+      content: "#{$before}";
+    }
+
+    &:not([contenteditable=""]):after {
+      content: "#{$after}";
+    }
+  }
+}
+
+@include hints("Selecteer de juiste optie", "Actie nodig");
+
+[data--language=en], [lang=en] {
+  @include hints("Select the correct option", "Action required");
+}
+
+.rdfa-annotations {
+  [data-editor-highlight=true]:not([contenteditable=""]) {
+    background-color: var(--au-gray-100);
+    border-bottom: 0.2rem dotted var(--au-gray-300);
+    padding-bottom: 0.2rem;
+    transition: background-color var(--au-transition);
+
+    &::selection {
+      background-color: var(--au-gray-300);
+    }
+
+    &:hover {
+      background-color: var(--au-gray-200);
+    }
+  }
+}
+
+// End: Styling the highlight when detecting search term inside the editor