show active state and add hover/focus state to tag

torchbox · Jul 27, 2023 · 1cd5d5b · 1cd5d5b
1 parent 5e81028
commit 1cd5d5b
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/tbx/static_src/sass/components/_tag.scss b/tbx/static_src/sass/components/_tag.scss
@@ -32,4 +32,16 @@
         border: 2px solid var(--color--coral-dark);
         color: var(--color--coral-dark);
     }
+
+    // Use text-decoration for states
+    @media (forced-colors: active) {
+        &--active {
+            text-decoration: underline;
+        }
+
+        &:focus,
+        &:hover {
+            filter: invert(1);
+        }
+    }
 }