Update

1 files changed, 16 insertions, 15 deletions

diff --git a/src/objects/_overflow-button.scss b/src/objects/_overflow-button.scss
index d768492..4a794a7 100644
--- a/src/objects/_overflow-button.scss
+++ b/src/objects/_overflow-button.scss
@@ -4,9 +4,9 @@
 @include iro.props-namespace('overflow-button') {
     @include iro.props-store((
         --dims: (
-            --pad-x:   fn.global-dim(--size --125),
-            --pad-y:   fn.global-dim(--size --125),
-            --spacing: fn.global-dim(--size --50),
+            --pad-x:   calc(fn.global-dim(--size --125) - 1px),
+            --pad-y:   calc(fn.global-dim(--size --125) - 1px),
+            --spacing: fn.global-dim(--size --50)
         ),
     ), 'dims');
 
@@ -109,7 +109,7 @@
         @include iro.bem-elem('inside') {
             display:         inline-block;
             padding:         fn.dim(--pad-y) fn.dim(--pad-x);
-            border:          1px solid transparent;
+            border:          2px solid transparent;
             border-radius:   100em;
             line-height:     1;
             text-align:      center;
@@ -153,17 +153,18 @@
         }
     
         @include iro.bem-is('selected') {
+            @include iro.bem-elem('inside') {
+                border-color: fn.color(--selected --bg);
+                color:        fn.color(--selected --label);        
+            }
+        
             &:link,
             &:visited,
             &:enabled {
-                @include iro.bem-elem('inside') {
-                    background-color: fn.color(--selected --bg);
-                    color:            fn.color(--selected --label);
-                }
-        
                 &:hover,
                 &:active {
                     @include iro.bem-elem('inside') {
+                        border-color:     transparent;
                         background-color: fn.color(--selected --bg);
                         color:            fn.color(--selected --hover --label);
                     }
@@ -201,14 +202,14 @@
                 }
         
                 @include iro.bem-is('selected') {
+                    @include iro.bem-elem('inside') {
+                        border-color: fn.color(--#{$color} --selected --bg);
+                        color:        fn.color(--#{$color} --selected --label);
+                    }
+
                     &: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') {
@@ -225,7 +226,7 @@
             &:focus {
                 @include iro.bem-elem('inside') {
                     border-color: fn.color(--key-focus --border);
-                    box-shadow:   inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
+                    box-shadow:   fn.color(--key-focus --shadow);
                 }
             }
         }