Added interactive badge, larger indent for blockquotes

1 files changed, 38 insertions, 1 deletions

diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 86d5ad2..f12ec1c 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -22,10 +22,23 @@
         --colors: (
             --bg:    fn.global-color(--obj-hi),
             --label: fn.global-color(--fg-lo),
+            --hover: (
+                --bg: fn.global-color(--obj),
+            ),
+            --active: (
+                --bg: fn.global-color(--obj-lo),
+            ),
+
             --accent: (
                 --bg:    fn.global-color(--accent --primary --bg),
                 --label: fn.global-color(--accent --primary --fg),
-            )
+                --hover: (
+                    --bg: fn.global-color(--accent --primary --obj),
+                ),
+                --active: (
+                    --bg: fn.global-color(--accent --primary --obj-lo),
+                ),
+            ),
         ),
     ), 'colors');
 
@@ -37,10 +50,34 @@
         color:            fn.color(--label);
         font-size:        fn.dim(--font-size);
         text-align:       center;
+
+        &:link,
+        &:visited,
+        &:enabled {
+            &:hover {
+                background-color: fn.color(--hover --bg);
+            }
+
+            &:active {
+                background-color: fn.color(--active --bg);
+            }
+        }
     
         @include iro.bem-modifier('accent') {
             background-color: fn.color(--accent --bg);
             color:            fn.color(--accent --label);
+
+            &:link,
+            &:visited,
+            &:enabled {
+                &:hover {
+                    background-color: fn.color(--accent --hover --bg);
+                }
+
+                &:active {
+                    background-color: fn.color(--accent --active --bg);
+                }
+            }
         }
     
         @include iro.bem-modifier('fixed-100') {