From 5515add2d9e5236a46abbbdbc13e72928df8f1df Mon Sep 17 00:00:00 2001
From: Vince <vinceliuice@hotmail.com>
Date: Sun, 16 Jan 2022 14:04:08 +0800
Subject: [PATCH] Fixed issues

---
 src/main/gtk-4.0/gtk-dark.css  | 65 ++++++++++++++++++++++------------
 src/main/gtk-4.0/gtk-light.css | 65 ++++++++++++++++++++++------------
 src/main/gtk-4.0/gtk.css       | 65 ++++++++++++++++++++++------------
 src/sass/_variables.scss       |  4 +++
 src/sass/gtk/_common-4.0.scss  | 53 ++++++++++++++++++++-------
 5 files changed, 174 insertions(+), 78 deletions(-)

diff --git a/src/main/gtk-4.0/gtk-dark.css b/src/main/gtk-4.0/gtk-dark.css
index 50aa5e74..308b48e9 100644
--- a/src/main/gtk-4.0/gtk-dark.css
+++ b/src/main/gtk-4.0/gtk-dark.css
@@ -125,7 +125,8 @@ window.assistant .sidebar label.highlight {
   color: white;
 }
 
-.osd popover.background > arrow,
+.osd .scale-popup > arrow,
+.osd .scale-popup > contents, .osd popover.background > arrow,
 .osd popover.background > contents, popover.background.touch-selection > arrow,
 popover.background.touch-selection > contents, popover.background.magnifier > arrow,
 popover.background.magnifier > contents, .osd {
@@ -134,18 +135,45 @@ popover.background.magnifier > contents, .osd {
   background-clip: padding-box;
   border-radius: 6px;
   border: none;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.1);
 }
 
 .osd {
   padding: 6px;
   margin: 6px;
-  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
 }
 
 .osd.circular {
   border-radius: 9999px;
 }
 
+/**********
+ * Toasts *
+ **********/
+toast {
+  margin: 12px;
+  margin-bottom: 24px;
+  border-radius: 9999px;
+  border-spacing: 6px;
+  padding: 6px;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.1), 0 4px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 10px 0 rgba(0, 0, 0, 0.1);
+  background-color: #212121;
+  color: white;
+  border: none;
+}
+
+toast:dir(ltr) {
+  padding-left: 12px;
+}
+
+toast:dir(rtl) {
+  padding-right: 12px;
+}
+
+toast > label {
+  margin: 0 6px;
+}
+
 /*********************
  * Spinner Animation *
  *********************/
@@ -427,19 +455,19 @@ editablelabel > stack > text {
   }
 }
 
-infobar.warning > revealer > box button, infobar.warning:backdrop > revealer > box button, popover.background.touch-selection button, popover.background.magnifier button, headerbar.selection-mode button:not(.suggested-action):not(.destructive-action) {
+infobar.warning > revealer > box button, infobar.warning:backdrop > revealer > box button, popover.background.touch-selection button, popover.background.magnifier button, headerbar.selection-mode button:not(.suggested-action):not(.destructive-action), toast button, toast button.circular.flat {
   color: rgba(255, 255, 255, 0.7);
 }
 
-infobar.warning > revealer > box button:focus, popover.background.touch-selection button:focus, popover.background.magnifier button:focus, headerbar.selection-mode button:focus:not(.suggested-action):not(.destructive-action), infobar.warning > revealer > box button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, headerbar.selection-mode button:hover:not(.suggested-action):not(.destructive-action), infobar.warning > revealer > box button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, headerbar.selection-mode button:active:not(.suggested-action):not(.destructive-action), infobar.warning > revealer > box button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, headerbar.selection-mode button:checked:not(.suggested-action):not(.destructive-action) {
+infobar.warning > revealer > box button:focus, popover.background.touch-selection button:focus, popover.background.magnifier button:focus, headerbar.selection-mode button:focus:not(.suggested-action):not(.destructive-action), toast button:focus, toast button.circular.flat:focus, infobar.warning > revealer > box button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, headerbar.selection-mode button:hover:not(.suggested-action):not(.destructive-action), toast button:hover, toast button.circular.flat:hover, infobar.warning > revealer > box button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, headerbar.selection-mode button:active:not(.suggested-action):not(.destructive-action), toast button:active, toast button.circular.flat:active, infobar.warning > revealer > box button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, headerbar.selection-mode button:checked:not(.suggested-action):not(.destructive-action), toast button:checked, toast button.circular.flat:checked {
   color: white;
 }
 
-infobar.warning > revealer > box button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, headerbar.selection-mode button:disabled:not(.suggested-action):not(.destructive-action) {
+infobar.warning > revealer > box button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, headerbar.selection-mode button:disabled:not(.suggested-action):not(.destructive-action), toast button:disabled, toast button.circular.flat:disabled {
   color: rgba(255, 255, 255, 0.3);
 }
 
-infobar.warning > revealer > box button:checked:disabled, popover.background.touch-selection button:checked:disabled, popover.background.magnifier button:checked:disabled, headerbar.selection-mode button:checked:disabled:not(.suggested-action):not(.destructive-action) {
+infobar.warning > revealer > box button:checked:disabled, popover.background.touch-selection button:checked:disabled, popover.background.magnifier button:checked:disabled, headerbar.selection-mode button:checked:disabled:not(.suggested-action):not(.destructive-action), toast button:checked:disabled {
   color: rgba(255, 255, 255, 0.5);
 }
 
@@ -895,7 +923,7 @@ spinbutton:not(.vertical) > text {
 }
 
 spinbutton:not(.vertical) > button {
-  border: solid 6px transparent;
+  border: 6px solid transparent;
 }
 
 spinbutton:not(.vertical) > button:focus:not(:hover):not(:active):not(:disabled) {
@@ -948,15 +976,16 @@ spinbutton.vertical > button.down {
   margin: 0 3px;
 }
 
-treeview spinbutton:not(.vertical), row spinbutton:not(.vertical) {
-  min-height: 0;
-  border-style: none;
-  border-radius: 0;
+treeview spinbutton:not(.vertical) > button, row spinbutton:not(.vertical) > button {
+  margin: 6px;
 }
 
-treeview spinbutton:not(.vertical) > text, row spinbutton:not(.vertical) > text {
-  min-height: 0;
-  padding: 1px 2px;
+treeview spinbutton:not(.vertical) > button.up:dir(ltr), treeview spinbutton:not(.vertical) > button.down:dir(rtl), row spinbutton:not(.vertical) > button.up:dir(ltr), row spinbutton:not(.vertical) > button.down:dir(rtl) {
+  margin-left: 3px;
+}
+
+treeview spinbutton:not(.vertical) > button.up:dir(rtl), treeview spinbutton:not(.vertical) > button.down:dir(ltr), row spinbutton:not(.vertical) > button.up:dir(rtl), row spinbutton:not(.vertical) > button.down:dir(ltr) {
+  margin-right: 3px;
 }
 
 /**************
@@ -1952,14 +1981,6 @@ popover.background button.model {
   background-color: transparent;
 }
 
-.osd popover.background > arrow,
-.osd popover.background > contents, popover.background.touch-selection > arrow,
-popover.background.touch-selection > contents, popover.background.magnifier > arrow,
-popover.background.magnifier > contents {
-  border: none;
-  box-shadow: none;
-}
-
 magnifier {
   background-color: #2C2C2C;
 }
diff --git a/src/main/gtk-4.0/gtk-light.css b/src/main/gtk-4.0/gtk-light.css
index 81232320..2c12d81c 100644
--- a/src/main/gtk-4.0/gtk-light.css
+++ b/src/main/gtk-4.0/gtk-light.css
@@ -125,7 +125,8 @@ window.assistant .sidebar label.highlight {
   color: rgba(0, 0, 0, 0.87);
 }
 
-.osd popover.background > arrow,
+.osd .scale-popup > arrow,
+.osd .scale-popup > contents, .osd popover.background > arrow,
 .osd popover.background > contents, popover.background.touch-selection > arrow,
 popover.background.touch-selection > contents, popover.background.magnifier > arrow,
 popover.background.magnifier > contents, .osd {
@@ -134,18 +135,45 @@ popover.background.magnifier > contents, .osd {
   background-clip: padding-box;
   border-radius: 6px;
   border: none;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15);
 }
 
 .osd {
   padding: 6px;
   margin: 6px;
-  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
 }
 
 .osd.circular {
   border-radius: 9999px;
 }
 
+/**********
+ * Toasts *
+ **********/
+toast {
+  margin: 12px;
+  margin-bottom: 24px;
+  border-radius: 9999px;
+  border-spacing: 6px;
+  padding: 6px;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.1), 0 4px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 10px 0 rgba(0, 0, 0, 0.1);
+  background-color: #212121;
+  color: white;
+  border: none;
+}
+
+toast:dir(ltr) {
+  padding-left: 12px;
+}
+
+toast:dir(rtl) {
+  padding-right: 12px;
+}
+
+toast > label {
+  margin: 0 6px;
+}
+
 /*********************
  * Spinner Animation *
  *********************/
@@ -427,19 +455,19 @@ editablelabel > stack > text {
   }
 }
 
-infobar.warning > revealer > box button, infobar.warning:backdrop > revealer > box button, popover.background.touch-selection button, popover.background.magnifier button, headerbar.selection-mode button:not(.suggested-action):not(.destructive-action) {
+infobar.warning > revealer > box button, infobar.warning:backdrop > revealer > box button, popover.background.touch-selection button, popover.background.magnifier button, headerbar.selection-mode button:not(.suggested-action):not(.destructive-action), toast button, toast button.circular.flat {
   color: rgba(255, 255, 255, 0.7);
 }
 
-infobar.warning > revealer > box button:focus, popover.background.touch-selection button:focus, popover.background.magnifier button:focus, headerbar.selection-mode button:focus:not(.suggested-action):not(.destructive-action), infobar.warning > revealer > box button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, headerbar.selection-mode button:hover:not(.suggested-action):not(.destructive-action), infobar.warning > revealer > box button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, headerbar.selection-mode button:active:not(.suggested-action):not(.destructive-action), infobar.warning > revealer > box button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, headerbar.selection-mode button:checked:not(.suggested-action):not(.destructive-action) {
+infobar.warning > revealer > box button:focus, popover.background.touch-selection button:focus, popover.background.magnifier button:focus, headerbar.selection-mode button:focus:not(.suggested-action):not(.destructive-action), toast button:focus, toast button.circular.flat:focus, infobar.warning > revealer > box button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, headerbar.selection-mode button:hover:not(.suggested-action):not(.destructive-action), toast button:hover, toast button.circular.flat:hover, infobar.warning > revealer > box button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, headerbar.selection-mode button:active:not(.suggested-action):not(.destructive-action), toast button:active, toast button.circular.flat:active, infobar.warning > revealer > box button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, headerbar.selection-mode button:checked:not(.suggested-action):not(.destructive-action), toast button:checked, toast button.circular.flat:checked {
   color: white;
 }
 
-infobar.warning > revealer > box button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, headerbar.selection-mode button:disabled:not(.suggested-action):not(.destructive-action) {
+infobar.warning > revealer > box button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, headerbar.selection-mode button:disabled:not(.suggested-action):not(.destructive-action), toast button:disabled, toast button.circular.flat:disabled {
   color: rgba(255, 255, 255, 0.3);
 }
 
-infobar.warning > revealer > box button:checked:disabled, popover.background.touch-selection button:checked:disabled, popover.background.magnifier button:checked:disabled, headerbar.selection-mode button:checked:disabled:not(.suggested-action):not(.destructive-action) {
+infobar.warning > revealer > box button:checked:disabled, popover.background.touch-selection button:checked:disabled, popover.background.magnifier button:checked:disabled, headerbar.selection-mode button:checked:disabled:not(.suggested-action):not(.destructive-action), toast button:checked:disabled {
   color: rgba(255, 255, 255, 0.5);
 }
 
@@ -895,7 +923,7 @@ spinbutton:not(.vertical) > text {
 }
 
 spinbutton:not(.vertical) > button {
-  border: solid 6px transparent;
+  border: 6px solid transparent;
 }
 
 spinbutton:not(.vertical) > button:focus:not(:hover):not(:active):not(:disabled) {
@@ -948,15 +976,16 @@ spinbutton.vertical > button.down {
   margin: 0 3px;
 }
 
-treeview spinbutton:not(.vertical), row spinbutton:not(.vertical) {
-  min-height: 0;
-  border-style: none;
-  border-radius: 0;
+treeview spinbutton:not(.vertical) > button, row spinbutton:not(.vertical) > button {
+  margin: 6px;
 }
 
-treeview spinbutton:not(.vertical) > text, row spinbutton:not(.vertical) > text {
-  min-height: 0;
-  padding: 1px 2px;
+treeview spinbutton:not(.vertical) > button.up:dir(ltr), treeview spinbutton:not(.vertical) > button.down:dir(rtl), row spinbutton:not(.vertical) > button.up:dir(ltr), row spinbutton:not(.vertical) > button.down:dir(rtl) {
+  margin-left: 3px;
+}
+
+treeview spinbutton:not(.vertical) > button.up:dir(rtl), treeview spinbutton:not(.vertical) > button.down:dir(ltr), row spinbutton:not(.vertical) > button.up:dir(rtl), row spinbutton:not(.vertical) > button.down:dir(ltr) {
+  margin-right: 3px;
 }
 
 /**************
@@ -1960,14 +1989,6 @@ popover.background button.model {
   background-color: transparent;
 }
 
-.osd popover.background > arrow,
-.osd popover.background > contents, popover.background.touch-selection > arrow,
-popover.background.touch-selection > contents, popover.background.magnifier > arrow,
-popover.background.magnifier > contents {
-  border: none;
-  box-shadow: none;
-}
-
 magnifier {
   background-color: #FFFFFF;
 }
diff --git a/src/main/gtk-4.0/gtk.css b/src/main/gtk-4.0/gtk.css
index 0c8db200..b94da158 100644
--- a/src/main/gtk-4.0/gtk.css
+++ b/src/main/gtk-4.0/gtk.css
@@ -125,7 +125,8 @@ window.assistant .sidebar label.highlight {
   color: rgba(0, 0, 0, 0.87);
 }
 
-.osd popover.background > arrow,
+.osd .scale-popup > arrow,
+.osd .scale-popup > contents, .osd popover.background > arrow,
 .osd popover.background > contents, popover.background.touch-selection > arrow,
 popover.background.touch-selection > contents, popover.background.magnifier > arrow,
 popover.background.magnifier > contents, .osd {
@@ -134,18 +135,45 @@ popover.background.magnifier > contents, .osd {
   background-clip: padding-box;
   border-radius: 6px;
   border: none;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.15);
 }
 
 .osd {
   padding: 6px;
   margin: 6px;
-  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.15), 0 4px 3px 0 rgba(0, 0, 0, 0.18), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
 }
 
 .osd.circular {
   border-radius: 9999px;
 }
 
+/**********
+ * Toasts *
+ **********/
+toast {
+  margin: 12px;
+  margin-bottom: 24px;
+  border-radius: 9999px;
+  border-spacing: 6px;
+  padding: 6px;
+  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.1), 0 4px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 10px 0 rgba(0, 0, 0, 0.1);
+  background-color: #212121;
+  color: white;
+  border: none;
+}
+
+toast:dir(ltr) {
+  padding-left: 12px;
+}
+
+toast:dir(rtl) {
+  padding-right: 12px;
+}
+
+toast > label {
+  margin: 0 6px;
+}
+
 /*********************
  * Spinner Animation *
  *********************/
@@ -427,19 +455,19 @@ editablelabel > stack > text {
   }
 }
 
-infobar.warning > revealer > box button, infobar.warning:backdrop > revealer > box button, popover.background.touch-selection button, popover.background.magnifier button, headerbar.selection-mode button:not(.suggested-action):not(.destructive-action) {
+infobar.warning > revealer > box button, infobar.warning:backdrop > revealer > box button, popover.background.touch-selection button, popover.background.magnifier button, headerbar.selection-mode button:not(.suggested-action):not(.destructive-action), toast button, toast button.circular.flat {
   color: rgba(255, 255, 255, 0.7);
 }
 
-infobar.warning > revealer > box button:focus, popover.background.touch-selection button:focus, popover.background.magnifier button:focus, headerbar.selection-mode button:focus:not(.suggested-action):not(.destructive-action), infobar.warning > revealer > box button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, headerbar.selection-mode button:hover:not(.suggested-action):not(.destructive-action), infobar.warning > revealer > box button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, headerbar.selection-mode button:active:not(.suggested-action):not(.destructive-action), infobar.warning > revealer > box button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, headerbar.selection-mode button:checked:not(.suggested-action):not(.destructive-action) {
+infobar.warning > revealer > box button:focus, popover.background.touch-selection button:focus, popover.background.magnifier button:focus, headerbar.selection-mode button:focus:not(.suggested-action):not(.destructive-action), toast button:focus, toast button.circular.flat:focus, infobar.warning > revealer > box button:hover, popover.background.touch-selection button:hover, popover.background.magnifier button:hover, headerbar.selection-mode button:hover:not(.suggested-action):not(.destructive-action), toast button:hover, toast button.circular.flat:hover, infobar.warning > revealer > box button:active, popover.background.touch-selection button:active, popover.background.magnifier button:active, headerbar.selection-mode button:active:not(.suggested-action):not(.destructive-action), toast button:active, toast button.circular.flat:active, infobar.warning > revealer > box button:checked, popover.background.touch-selection button:checked, popover.background.magnifier button:checked, headerbar.selection-mode button:checked:not(.suggested-action):not(.destructive-action), toast button:checked, toast button.circular.flat:checked {
   color: white;
 }
 
-infobar.warning > revealer > box button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, headerbar.selection-mode button:disabled:not(.suggested-action):not(.destructive-action) {
+infobar.warning > revealer > box button:disabled, popover.background.touch-selection button:disabled, popover.background.magnifier button:disabled, headerbar.selection-mode button:disabled:not(.suggested-action):not(.destructive-action), toast button:disabled, toast button.circular.flat:disabled {
   color: rgba(255, 255, 255, 0.3);
 }
 
-infobar.warning > revealer > box button:checked:disabled, popover.background.touch-selection button:checked:disabled, popover.background.magnifier button:checked:disabled, headerbar.selection-mode button:checked:disabled:not(.suggested-action):not(.destructive-action) {
+infobar.warning > revealer > box button:checked:disabled, popover.background.touch-selection button:checked:disabled, popover.background.magnifier button:checked:disabled, headerbar.selection-mode button:checked:disabled:not(.suggested-action):not(.destructive-action), toast button:checked:disabled {
   color: rgba(255, 255, 255, 0.5);
 }
 
@@ -895,7 +923,7 @@ spinbutton:not(.vertical) > text {
 }
 
 spinbutton:not(.vertical) > button {
-  border: solid 6px transparent;
+  border: 6px solid transparent;
 }
 
 spinbutton:not(.vertical) > button:focus:not(:hover):not(:active):not(:disabled) {
@@ -948,15 +976,16 @@ spinbutton.vertical > button.down {
   margin: 0 3px;
 }
 
-treeview spinbutton:not(.vertical), row spinbutton:not(.vertical) {
-  min-height: 0;
-  border-style: none;
-  border-radius: 0;
+treeview spinbutton:not(.vertical) > button, row spinbutton:not(.vertical) > button {
+  margin: 6px;
 }
 
-treeview spinbutton:not(.vertical) > text, row spinbutton:not(.vertical) > text {
-  min-height: 0;
-  padding: 1px 2px;
+treeview spinbutton:not(.vertical) > button.up:dir(ltr), treeview spinbutton:not(.vertical) > button.down:dir(rtl), row spinbutton:not(.vertical) > button.up:dir(ltr), row spinbutton:not(.vertical) > button.down:dir(rtl) {
+  margin-left: 3px;
+}
+
+treeview spinbutton:not(.vertical) > button.up:dir(rtl), treeview spinbutton:not(.vertical) > button.down:dir(ltr), row spinbutton:not(.vertical) > button.up:dir(rtl), row spinbutton:not(.vertical) > button.down:dir(ltr) {
+  margin-right: 3px;
 }
 
 /**************
@@ -1969,14 +1998,6 @@ popover.background button.model {
   background-color: transparent;
 }
 
-.osd popover.background > arrow,
-.osd popover.background > contents, popover.background.touch-selection > arrow,
-popover.background.touch-selection > contents, popover.background.magnifier > arrow,
-popover.background.magnifier > contents {
-  border: none;
-  box-shadow: none;
-}
-
 magnifier {
   background-color: #FFFFFF;
 }
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index 50175c12..a7c9ba19 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -75,6 +75,10 @@ $shadow-z5:
   0 2px 3px -1px rgba(black, 0.05),
   0 4px 6px 0 rgba(black, 0.06),
   0 1px 10px 0 rgba(black, 0.05);
+$shadow-z6:
+  0 2px 3px -1px rgba(black, 0.1),
+  0 4px 6px 0 rgba(black, 0.12),
+  0 1px 10px 0 rgba(black, 0.1);
 $shadow-z12:
   0 7px 5px -4px rgba(black, 0.2),
   0 12px 10px 2px rgba(black, 0.14),
diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss
index 534dee71..253a8f15 100644
--- a/src/sass/gtk/_common-4.0.scss
+++ b/src/sass/gtk/_common-4.0.scss
@@ -157,18 +157,44 @@ window.assistant {
   background-clip: padding-box;
   border-radius: $corner-radius;
   border: none;
+  box-shadow: $shadow-z4, inset 0 1px highlight($surface);
 }
 
 .osd {
   @extend %osd;
   padding: $space-size;
   margin: $space-size;
-  box-shadow: $shadow-z4;
 
   &.circular { border-radius: $circular-radius; }
 }
 
 
+/**********
+ * Toasts *
+ **********/
+
+toast {
+  margin: $space-size * 2;
+  margin-bottom: $space-size * 4;
+  border-radius: $circular-radius;
+  border-spacing: $space-size;
+  padding: $space-size;
+  box-shadow: $shadow-z6;
+  background-color: $osd;
+  color: on($osd);
+  border: none;
+
+  &:dir(ltr) { padding-left: $space-size * 2; }
+  &:dir(rtl) { padding-right: $space-size * 2; }
+
+  > label {
+    margin: 0 $space-size;
+  }
+
+  button, button.circular.flat { @extend %button-on-dark; }
+}
+
+
 /*********************
  * Spinner Animation *
  *********************/
@@ -769,7 +795,7 @@ spinbutton {
       @extend %small-button;
 
       // margin: $space-size;
-      border: solid $space-size transparent;
+      border: $space-size solid transparent;
 
       // Remove unwanted focus indicator
       &:focus:not(:hover):not(:active):not(:disabled) {
@@ -827,13 +853,14 @@ spinbutton {
   // Misc
   treeview &:not(.vertical),
   row &:not(.vertical) {
-    min-height: 0;
-    border-style: none;
-    border-radius: 0;
+    > button {
+      margin: $space-size;
 
-    > text {
-      min-height: 0;
-      padding: 1px 2px;
+      &.up:dir(ltr),
+      &.down:dir(rtl) { margin-left: $space-size / 2; }
+
+      &.up:dir(rtl),
+      &.down:dir(ltr) { margin-right: $space-size / 2; }
     }
   }
 }
@@ -1775,9 +1802,6 @@ popover.background {
     > arrow,
     > contents {
       @extend %osd;
-
-      border: none;
-      box-shadow: none;
     }
   }
 
@@ -3932,7 +3956,12 @@ colorchooser .popover.osd {
 }
 
 .scale-popup {
-  // .osd & { @extend %osd; }
+  .osd & {
+    > arrow,
+    > contents {
+      @extend %osd;
+    }
+  }
 
   // .osd & button.flat { // FIXME: quick hack, redo properly
   // }