1 files changed, 98 insertions, 0 deletions

diff --git a/src/objects/_overflow-button.scss b/src/objects/_overflow-button.scss
index 3920a37..d768492 100644
--- a/src/objects/_overflow-button.scss
+++ b/src/objects/_overflow-button.scss
@@ -37,6 +37,63 @@
                 --border: fn.global-color(--focus --fill),
                 --shadow: fn.global-color(--focus --shadow),
             ),
+
+            --red: (
+                --hover: (
+                    --bg:    fn.global-color(--red --quiet --bg),
+                    --label: fn.global-color(--red --quiet --fg),
+                ),
+                --active: (
+                    --bg:    fn.global-color(--red --quiet --obj),
+                    --label: fn.global-color(--red --quiet --fg-lo),
+                ),
+                --selected: (
+                    --bg:    fn.global-color(--red --quiet --bg),
+                    --label: fn.global-color(--red --quiet --fg),
+    
+                    --hover: (
+                        --label: fn.global-color(--red --quiet --fg-lo),
+                    ),
+                ),
+            ),
+
+            --blue: (
+                --hover: (
+                    --bg:    fn.global-color(--blue --quiet --bg),
+                    --label: fn.global-color(--blue --quiet --fg),
+                ),
+                --active: (
+                    --bg:    fn.global-color(--blue --quiet --obj),
+                    --label: fn.global-color(--blue --quiet --fg-lo),
+                ),
+                --selected: (
+                    --bg:    fn.global-color(--blue --quiet --bg),
+                    --label: fn.global-color(--blue --quiet --fg),
+    
+                    --hover: (
+                        --label: fn.global-color(--blue --quiet --fg-lo),
+                    ),
+                ),
+            ),
+
+            --green: (
+                --hover: (
+                    --bg:    fn.global-color(--green --quiet --bg),
+                    --label: fn.global-color(--green --quiet --fg),
+                ),
+                --active: (
+                    --bg:    fn.global-color(--green --quiet --obj),
+                    --label: fn.global-color(--green --quiet --fg-lo),
+                ),
+                --selected: (
+                    --bg:    fn.global-color(--green --quiet --bg),
+                    --label: fn.global-color(--green --quiet --fg),
+    
+                    --hover: (
+                        --label: fn.global-color(--green --quiet --fg-lo),
+                    ),
+                ),
+            )
         ),
     ), 'colors');
 
@@ -122,6 +179,47 @@
                 }
             }
         }
+
+        @each $color in 'red' 'blue' 'green' {
+            @include iro.bem-modifier($color) {
+                &:link,
+                &:visited,
+                &:enabled {
+                    &:hover {
+                        @include iro.bem-elem('inside') {
+                            background-color: fn.color(--#{$color} --hover --bg);
+                            color:            fn.color(--#{$color} --hover --label);
+                        }
+                    }
+            
+                    &:active {
+                        @include iro.bem-elem('inside') {
+                            background-color: fn.color(--#{$color} --active --bg);
+                            color:            fn.color(--#{$color} --active --label);
+                        }
+                    }
+                }
+        
+                @include iro.bem-is('selected') {
+                    &:link,
+                    &:visited,
+                    &:enabled {
+                        @include iro.bem-elem('inside') {
+                            background-color: fn.color(--#{$color} --selected --bg);
+                            color:            fn.color(--#{$color} --selected --label);
+                        }
+                
+                        &:hover,
+                        &:active {
+                            @include iro.bem-elem('inside') {
+                                background-color: fn.color(--#{$color} --selected --bg);
+                                color:            fn.color(--#{$color} --selected --hover --label);
+                            }
+                        }
+                    }
+                }
+            }
+        }
     
         @include iro.bem-at-theme('keyboard') {
             &:focus {