diff --git a/gtk-3.20/scss/widgets/_choosers.scss b/gtk-3.20/scss/widgets/_choosers.scss
index 661785d..803329b 100644
--- a/gtk-3.20/scss/widgets/_choosers.scss
+++ b/gtk-3.20/scss/widgets/_choosers.scss
@@ -4,85 +4,159 @@
 
 @include exports("colorchooser") {
     colorswatch {
-        &, &:selected {
-            border: 1px solid alpha($black, .1);
-            border-radius: $roundness - 1px;
-            background-color: transparent;
-            background-clip: border-box;
+        // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
+        // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
+        // applied to the overlay box.
 
-            &:hover { border-color: alpha($black, .3); }
-        }
+        &:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state
 
-        &.color-light:selected:hover, &.color-dark:selected:hover { background-image: none; }
+        $_colorswatch_radius: $roundness;
 
-        &.left, &:first-child {
-            border-top-left-radius: $roundness;
-            border-bottom-left-radius: $roundness;
-        }
-
-        &.right, &:last-child {
-            border-top-right-radius: $roundness;
-            border-bottom-right-radius: $roundness;
-        }
-
-        &:only-child { border-radius: $roundness; }
+        // base color corners rounding
+        // to avoid the artifacts caused by rounded corner anti-aliasing the base color
+        // sports a bigger radius.
+        // nth-child is needed by the custom color strip.
 
         &.top {
-            border-top-left-radius: $roundness;
-            border-top-right-radius: $roundness;
+            border-top-left-radius: $_colorswatch_radius + .5px;
+            border-top-right-radius: $_colorswatch_radius + .5px;
+
+            overlay {
+                border-top-left-radius: $_colorswatch_radius;
+                border-top-right-radius: $_colorswatch_radius;
+            }
         }
 
         &.bottom {
-            border-bottom-left-radius: $roundness;
-            border-bottom-right-radius: $roundness;
-        }
+            border-bottom-left-radius: $_colorswatch_radius + .5px;
+            border-bottom-right-radius: $_colorswatch_radius + .5px;
 
-        coloreditor & {
-            border-radius: $roundness;
-
-            &.color-dark:hover, &.color-light:hover {
-                background-image: none;
-                border-color: alpha($black, .3);
-            }
-        }
-    }
-
-    GtkColorChooserWidget #add-color-button {
-        background-clip: padding-box;
-        border-color: alpha($black, .1);
-        background-color: shade($bg_color, .95);
-        color: $fg_color;
-
-        &:hover {
-            border-color: alpha($black, .3);
-            background-color: shade($bg_color, .9);
-            color: $fg_color;
-        }
-    }
-
-    .color-active-badge {
-        &, &:selected {
-            border-width: 2px;
-            border-style: solid;
-            background-color: transparent;
-        }
-
-        &.color-light {
-            &, &:hover {
-                border-color: alpha($black, .3);
-                color: alpha($black, .3);
+            overlay {
+                border-bottom-left-radius: $_colorswatch_radius;
+                border-bottom-right-radius: $_colorswatch_radius;
             }
         }
 
-        &.color-dark {
-            &, &:hover {
-                border-color: alpha($white, .3);
-                color: alpha($white, .3);
+        &.left,
+        &:first-child:not(.top) {
+            border-top-left-radius: $_colorswatch_radius + .5px;
+            border-bottom-left-radius: $_colorswatch_radius + .5px;
+
+            overlay {
+                border-top-left-radius: $_colorswatch_radius;
+                border-bottom-left-radius: $_colorswatch_radius;
             }
         }
+
+        &.right,
+        &:last-child:not(.bottom) {
+            border-top-right-radius: $_colorswatch_radius + .5px;
+            border-bottom-right-radius: $_colorswatch_radius + .5px;
+
+            overlay {
+                border-top-right-radius: $_colorswatch_radius;
+                border-bottom-right-radius: $_colorswatch_radius;
+            }
+        }
+
+        &.dark overlay {
+            color: $selected_fg_color;
+
+            &:hover { border-color: if($variant == 'light', transparentize($black, .2), $borders_color); }
+
+            &:backdrop { color: $backdrop_selected_fg_color; }
+        }
+
+        &.light overlay {
+            color: $text_color;
+
+            &:hover { border-color: if($variant == 'light', transparentize($black, .5), $borders_color); }
+
+            &:backdrop { color: $backdrop_text_color; }
+        }
+
+        &:drop(active) {
+            box-shadow: none;
+
+            &.light overlay {
+                border-color: $drop_target_color;
+                box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
+                            inset 0 0 0 1px $drop_target_color;
+            }
+
+            &.dark overlay {
+                border-color: $drop_target_color;
+                box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize($black, .7), $borders_color),
+                            inset 0 0 0 1px $drop_target_color;
+            }
+        }
+
+        overlay {
+            border: 1px solid if($variant == 'light', transparentize($black, .7), $borders_color);
+
+            &:hover {
+                box-shadow: inset 0 1px transparentize($white, .6),
+                            inset 0 -1px transparentize($black, .8);
+            }
+
+            &:backdrop,
+            &:backdrop:hover {
+                border-color: if($variant == 'light', transparentize($black, .7), $borders_color);
+                box-shadow: none;
+            }
+        }
+
+        &:disabled {
+            opacity: .5;
+
+            overlay {
+                border-color: transparentize($black, .4);
+                box-shadow: none;
+            }
+        }
+
+        row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
+
+        &#add-color-button {
+            border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;
+
+            &:only-child { border-radius: $_colorswatch_radius; }
+
+            overlay {
+                background-color: shade($bg_color, .95);
+                color: $fg_color;
+
+                &:hover { background-color: shade($bg_color, .9); }
+
+                &:backdrop { background-color: shade($backdrop_bg_color, .95); }
+            }
+        }
+
+        &#editor-color-sample {
+            border-radius: $_colorswatch_radius;
+
+            overlay { border-radius: $_colorswatch_radius + .5px; }
+       }
+    }
+
+    button.color {
+        padding: $spacing;
+
+        colorswatch:only-child {
+            &, overlay { border-radius: 0; }
+
+            @if $variant == 'light' { box-shadow: 0 1px _text_shadow_color(); }
+        }
+
+        @if $variant == 'light' {
+            &:disabled,
+            &:backdrop,
+            &:active,
+            &:checked { colorswatch:only-child { box-shadow: none; } }
+        }
     }
 
-    GtkColorButton.button { padding: $spacing; }
+    colorchooser .popover.osd { border-radius: $roundness; }
 }