I/5829: Enhance restricted editing feature styling

theme/ckeditor5-restricted-editing/restrictedediting.css

@@ -5,6 +5,7 @@
 
 :root {
 	--ck-color-restricted-editing-exception-background: hsla(31, 100%, 65%, .2);
+	--ck-color-restricted-editing-exception-hover-background: hsla(31, 100%, 65%, .35);
 	--ck-color-restricted-editing-exception-brackets: hsla(31, 100%, 40%, .4);
 	--ck-color-restricted-editing-selected-exception-background: hsla(31, 100%, 65%, .5);
 	--ck-color-restricted-editing-selected-exception-brackets: hsla(31, 100%, 40%, .6);
@@ -24,6 +25,10 @@
 		var(--ck-color-restricted-editing-exception-brackets) 100%
 	) 1;
 
+	&:hover {
+		background: var(--ck-color-restricted-editing-exception-hover-background);
+	}
+
 	&.restricted-editing-exception_selected {
 		background-color: var(--ck-color-restricted-editing-selected-exception-background);
 		border-image: linear-gradient(
@@ -36,6 +41,9 @@
 	}
 
 	&.restricted-editing-exception_collapsed {
-		padding-left: 1em;
+		/* Single char is about 10px wide.
+		Value of 8px for collapsed element is because we have additional 2px in left/right borders.
+		Also less than 10px wide is hard to click on target. */
+		padding-left: 8px;
 	}
 }