From 8c602f1513041feeee1f0a8673819972df1e70ec Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Wed, 28 Aug 2024 03:05:11 +0300
Subject: [PATCH] refactoring...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 experiments/outline-editor/editor.css | 34 +++++++++++++++++----------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/experiments/outline-editor/editor.css b/experiments/outline-editor/editor.css
index d0c972a..9643f37 100755
--- a/experiments/outline-editor/editor.css
+++ b/experiments/outline-editor/editor.css
@@ -583,22 +583,32 @@
 
 :host .outline,
 .editor .outline {
+	--highlight-color: yellow;
+	--highlight-focus-color: rgb(253, 218, 13);
+	--highlight-hover-color: rgba(253, 218, 13, 0.5);
+	--highlight-focus-hover-color: rgba(253, 218, 13, 0.7);
+	
 	.highlight {
 		font-weight: bold;
 		background: yellow;
 	}
-	.XXX>.view {
-		background: yellow;
-	}
-	.XXX:hover>.view {
-		background: rgb(253, 218, 13, 0.5) !important;
-	}
-	.focused.XXX>.view {
-		/* XXX can we avoid !important here??? */
-		background: rgb(253, 218, 13) !important;
-	}
-	.focused.XXX:hover>.view {
-		background: rgb(253, 218, 13, 0.7) !important;
+	.XXX {
+		&>.view {
+			background: var(--highlight-color);
+		}
+		&:hover>.view {
+			background: var(--highlight-hover-color) !important;
+		}
+		&.focused {
+			&>.view,
+			&>.text {
+				/* XXX can we avoid !important here??? */
+				background: var(--highlight-focus-color) !important;
+			}
+			&:hover>.view {
+				background: var(--highlight-focus-hover-color) !important;
+			}
+		}
 	}
 }