From f49e7f1945e8a9b013c6f1703d3474e775c9fe82 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 10 Jul 2024 10:45:08 +0200
Subject: [PATCH] fix: blind mode not working with highlight mode word

---
 frontend/src/styles/test.scss | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index 395e84b87..126bb2b78 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -295,6 +295,15 @@
         animation: var(--correct-letter-animation);
       }
     }
+    // &.highlight-word {
+    //   .word.typed.error,
+    //   .word.active:has(letter.incorrect) {
+    //     letter {
+    //       color: var(--correct-letter-color);
+    //       animation: var(--correct-letter-animation);
+    //     }
+    //   }
+    // }
   }
 
   &.flipped {
@@ -340,8 +349,8 @@
         animation: var(--correct-letter-animation);
       }
     }
-    .word.typed.error,
-    .word.active:has(letter.incorrect) {
+    &:not(.blind) .word.typed.error,
+    &:not(.blind) .word.active:has(letter.incorrect) {
       letter {
         color: var(--incorrect-letter-color);
         animation: var(--incorrect-letter-animation);
@@ -363,8 +372,8 @@
         animation: var(--correct-letter-animation);
       }
     }
-    .word.typed.error,
-    .word.active:has(letter.incorrect) {
+    &:not(.blind) .word.typed.error,
+    &:not(.blind) .word.active:has(letter.incorrect) {
       letter {
         color: var(--incorrect-letter-color);
         animation: var(--incorrect-letter-animation);
@@ -387,8 +396,8 @@
         animation: var(--correct-letter-animation);
       }
     }
-    .word.typed.error,
-    .word.active:has(letter.incorrect) {
+    &:not(.blind) .word.typed.error,
+    &:not(.blind) .word.active:has(letter.incorrect) {
       letter {
         color: var(--incorrect-letter-color);
         animation: var(--incorrect-letter-animation);
@@ -412,8 +421,8 @@
         animation: var(--correct-letter-animation);
       }
     }
-    .word.typed.error,
-    .word.active:has(letter.incorrect) {
+    &:not(.blind) .word.typed.error,
+    &:not(.blind) .word.active:has(letter.incorrect) {
       letter {
         color: var(--incorrect-letter-color);
         animation: var(--incorrect-letter-animation);