diff --git a/install.sh b/install.sh
index 60e66796..7b3334e4 100755
--- a/install.sh
+++ b/install.sh
@@ -557,6 +557,17 @@ link_libadwaita() {
   ln -sf "${THEME_DIR}/gtk-4.0/gtk-dark.css"                                    "${HOME}/.config/gtk-4.0/gtk-dark.css"
 }
 
+install_libadwaita() {
+  rm -rf "${HOME}/.config/gtk-4.0/"{assets,gtk.css,gtk-dark.css}
+
+  echo -e "\nInstalling theme into '${HOME}/.config/gtk-4.0' for libadwaita..."
+
+  mkdir -p                                                                      "${HOME}/.config/gtk-4.0"
+  cp -r "${SRC_DIR}/assets/gtk/assets"                                          "${HOME}/.config/gtk-4.0"
+  cp -r "${SRC_DIR}/assets/gtk/symbolics/"*'.svg'                               "${HOME}/.config/gtk-4.0/assets"
+  sassc $SASSC_OPT "${SRC_DIR}/main/libadwaita/libadwaita.scss"                 "${HOME}/.config/gtk-4.0/gtk.css"
+}
+
 link_theme() {
   for theme in "${themes[@]}"; do
     for color in "${lcolors[@]}"; do
@@ -660,7 +671,7 @@ if [[ "$uninstall" == 'true' ]]; then
 else
   install_package && tweaks_temp && gnome_shell_version && install_theme
   if [[ "$libadwaita" == 'true' ]]; then
-    uninstall_link && link_theme
+    uninstall_link && install_libadwaita
   fi
 fi
 
diff --git a/src/assets/gtk/symbolics/menu-radio-symbolic.svg b/src/assets/gtk/symbolics/menu-radio-symbolic.svg
new file mode 100644
index 00000000..a70839a2
--- /dev/null
+++ b/src/assets/gtk/symbolics/menu-radio-symbolic.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" version="1.1" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+ <path d="m7 4c1.6569 0 3 1.3431 3 3s-1.3431 3-3 3-3-1.3431-3-3 1.3431-3 3-3z"/>
+</svg>
diff --git a/src/assets/gtk/symbolics/menu-radio-symbolic@2.svg b/src/assets/gtk/symbolics/menu-radio-symbolic@2.svg
new file mode 100644
index 00000000..f55ed393
--- /dev/null
+++ b/src/assets/gtk/symbolics/menu-radio-symbolic@2.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" version="1.1" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
+ <path d="m14 8c3.3137 0 6 2.6863 6 6s-2.6863 6-6 6-6-2.6863-6-6 2.6863-6 6-6z"/>
+</svg>
diff --git a/src/main/libadwaita/libadwaita.scss b/src/main/libadwaita/libadwaita.scss
new file mode 100644
index 00000000..77f57b0a
--- /dev/null
+++ b/src/main/libadwaita/libadwaita.scss
@@ -0,0 +1,13 @@
+$contrast: 'normal';
+$variant: 'light';
+$topbar: 'light';
+
+@import '../../sass/colors';
+@import '../../sass/libadwaita/palette';
+@import '../../sass/libadwaita/functions';
+@import '../../sass/libadwaita/variables';
+@import '../../sass/libadwaita/colors';
+@import '../../sass/libadwaita/drawing';
+@import '../../sass/libadwaita/common';
+@import '../../sass/libadwaita/defaults';
+@import '../../sass/libadwaita/compat-colors';
diff --git a/src/sass/gnome-shell/common/_notifications.scss b/src/sass/gnome-shell/common/_notifications.scss
index 3e51c5e9..f82e7b47 100644
--- a/src/sass/gnome-shell/common/_notifications.scss
+++ b/src/sass/gnome-shell/common/_notifications.scss
@@ -5,7 +5,6 @@
   width: 34em;
   min-height: 64px;
   margin: 12px 5px 8px;
-  border-radius: $base_radius;
   color: $text-secondary;
   background-color: $popover;
   text-shadow: none;
diff --git a/src/sass/gnome-shell/widgets-46-0/_calendar.scss b/src/sass/gnome-shell/widgets-46-0/_calendar.scss
index a9c0b92f..ccb92bf8 100644
--- a/src/sass/gnome-shell/widgets-46-0/_calendar.scss
+++ b/src/sass/gnome-shell/widgets-46-0/_calendar.scss
@@ -26,6 +26,10 @@
   padding: $base_padding / 2;
 }
 
+.datemenu-popover {
+  border-radius: $base_radius + $base_padding * 2 !important;
+}
+
 // Calendar menu side column
 .datemenu-calendar-column {
   spacing: $base_spacing;
diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss
index cedbf702..effd20fd 100644
--- a/src/sass/gtk/_common-4.0.scss
+++ b/src/sass/gtk/_common-4.0.scss
@@ -1740,19 +1740,20 @@ headerbar {
     box-shadow: none;
     border: none;
     outline: none;
-    background-image: image($titlebar);
-  
-    &:backdrop {
-      background-image: image($titlebar-backdrop);
-    }
 
     windowcontrols {
-      button,
-      menubutton {
-        min-width: 16px;
-        min-height: 16px;
-        margin: 0;
-        padding: 0;
+      > button {
+        @if $window_button == 'mac' {
+          min-width: 16px;
+          min-height: 16px;
+          margin: 0 $space-size - 2px;
+          padding: 0;
+        } @else {
+          min-width: 22px;
+          min-height: 22px;
+          margin: 0 $space-size - 2px;
+          padding: 0;
+        }
       }
 
       menubutton button {
@@ -2952,11 +2953,6 @@ switch {
 
   &:disabled { opacity: 0.5; }
 
-  // hide on/off icons for >=3.24.5
-  image {
-    margin: -8px;
-  }
-
   > slider {
     transition: all $duration $ease-out;
     min-width: $small-size - 6px;
@@ -3747,7 +3743,6 @@ row {
     background-repeat: no-repeat;
     background-position: center;
     background-size: 1000% 1000%;
-    outline: none;
 
     &:focus {
       color: $text;
diff --git a/src/sass/libadwaita/_apps.scss b/src/sass/libadwaita/_apps.scss
new file mode 100644
index 00000000..6cae7066
--- /dev/null
+++ b/src/sass/libadwaita/_apps.scss
@@ -0,0 +1,4 @@
+@import 'apps/nautilus';
+@import 'apps/editor';
+@import 'apps/builder';
+@import 'apps/other';
diff --git a/src/sass/libadwaita/_colors.scss b/src/sass/libadwaita/_colors.scss
new file mode 100644
index 00000000..83ef4a04
--- /dev/null
+++ b/src/sass/libadwaita/_colors.scss
@@ -0,0 +1,133 @@
+$border_opacity: 0.12;
+$thin_border_opacity: 0.05;
+$focus_border_opacity: 0.45;
+
+// Colors from _drawing.scss
+
+$text_color: currentColor;
+$secondary_text_color: gtkalpha(currentColor, 0.75);
+$disabled_text_color: gtkalpha(currentColor, 0.45);
+$secondary_disabled_text_color: gtkalpha(currentColor, 0.35);
+
+$button_color: gtkalpha(currentColor, 0.05);
+$button_hover_color: gtkalpha(currentColor, 0.12);
+$button_active_color: gtkalpha(currentColor, 0.2);
+$button_checked_color: gtkalpha(currentColor, 0.1);
+$button_checked_hover_color: gtkalpha(currentColor, 0.15);
+$button_checked_active_color: gtkalpha(currentColor, 0.2);
+
+// Colors from _defaults.scss
+
+$accent_bg_color: gtkcolor(accent_bg_color);
+$accent_fg_color: gtkcolor(accent_fg_color);
+$accent_color: gtkcolor(accent_color);
+
+$destructive_bg_color: gtkcolor(destructive_bg_color);
+$destructive_fg_color: gtkcolor(destructive_fg_color);
+$destructive_color: gtkcolor(destructive_color);
+
+$success_bg_color: gtkcolor(success_bg_color);
+$success_fg_color: gtkcolor(success_fg_color);
+$success_color: gtkcolor(success_color);
+
+$warning_bg_color: gtkcolor(warning_bg_color);
+$warning_fg_color: gtkcolor(warning_fg_color);
+$warning_color: gtkcolor(warning_color);
+
+$error_bg_color: gtkcolor(error_bg_color);
+$error_fg_color: gtkcolor(error_fg_color);
+$error_color: gtkcolor(error_color);
+
+$window_bg_color: gtkcolor(window_bg_color);
+$window_fg_color: gtkcolor(window_fg_color);
+
+$view_bg_color: gtkcolor(view_bg_color);
+$view_fg_color: gtkcolor(view_fg_color);
+
+$headerbar_bg_color: gtkcolor(headerbar_bg_color);
+$headerbar_fg_color: gtkcolor(headerbar_fg_color);
+$headerbar_border_color: gtkalpha(gtkcolor(headerbar_border_color), $border_opacity);
+$headerbar_backdrop_color: gtkcolor(headerbar_backdrop_color);
+$headerbar_shade_color: gtkcolor(headerbar_shade_color);
+$headerbar_darker_shade_color: gtkcolor(headerbar_darker_shade_color);
+
+$sidebar_bg_color: gtkcolor(sidebar_bg_color);
+$sidebar_fg_color: gtkcolor(sidebar_fg_color);
+$sidebar_backdrop_color: gtkcolor(sidebar_backdrop_color);
+$sidebar_border_color: gtkalpha(currentColor, 0.1);
+$sidebar_shade_color: gtkcolor(sidebar_shade_color);
+
+$secondary_sidebar_bg_color: gtkcolor(secondary_sidebar_bg_color);
+$secondary_sidebar_fg_color: gtkcolor(secondary_sidebar_fg_color);
+$secondary_sidebar_backdrop_color: gtkcolor(secondary_sidebar_backdrop_color);
+$secondary_sidebar_border_color: gtkcolor(secondary_sidebar_border_color);
+$secondary_sidebar_shade_color: gtkcolor(secondary_sidebar_shade_color);
+
+$card_bg_color: gtkcolor(card_bg_color);
+$card_fg_color: gtkcolor(card_fg_color);
+$card_shade_color: gtkcolor(card_shade_color);
+
+$dialog_bg_color: gtkcolor(dialog_bg_color);
+$dialog_fg_color: gtkcolor(dialog_fg_color);
+
+$popover_bg_color: gtkcolor(popover_bg_color);
+$popover_fg_color: gtkcolor(popover_fg_color);
+$popover_shade_color: gtkcolor(popover_shade_color);
+
+$thumbnail_bg_color: gtkcolor(thumbnail_bg_color);
+$thumbnail_fg_color: gtkcolor(thumbnail_fg_color);
+
+$shade_color: gtkcolor(shade_color);
+$scrollbar_outline_color: gtkcolor(scrollbar_outline_color);
+
+// Other colors
+
+$border_color: gtkalpha(currentColor, $border_opacity);
+$thin_border_color: gtkalpha(currentColor, $thin_border_opacity);
+$link_color: $accent_color;
+$link_visited_color: gtkmix($accent_color, $view_fg_color, 80%);
+
+$hover_color: gtkalpha(currentColor, .07);
+$active_color: gtkalpha(currentColor, .16);
+$selected_color: gtkalpha(currentColor, .1);
+$selected_hover_color: gtkalpha(currentColor, .13);
+$selected_active_color: gtkalpha(currentColor, .19);
+
+$view_hover_color: gtkalpha(currentColor, .04);
+$view_active_color: gtkalpha(currentColor, .08);
+$view_selected_color: gtkalpha($accent_bg_color, .25);
+$view_selected_hover_color: gtkalpha($accent_bg_color, .32);
+$view_selected_active_color: gtkalpha($accent_bg_color, .39);
+
+$trough_color: gtkalpha(currentColor, .15);
+$trough_hover_color: gtkalpha(currentColor, .2);
+$trough_active_color: gtkalpha(currentColor, .25);
+
+$fill_color: $accent_bg_color;
+$fill_text_color: $accent_fg_color;
+
+$slider_color: gtkmix(white, $view_bg_color, 80%);
+$slider_hover_color: white;
+
+$osd_fg_color: transparentize(white, .1);
+$osd_text_color: white;
+$osd_bg_color: transparentize(black, 0.3);
+$osd_fill_bg_color: transparentize(white, .25);
+$osd_fill_fg_color: transparentize(black, .25);
+$osd_focus_color: transparentize(white, .5);
+$osd_link_color: gtkmix($accent_bg_color, $osd_text_color, 50%);
+$osd_link_visited_color: gtkmix($accent_bg_color, $osd_text_color, 75%);
+
+$tooltip_border_color: transparentize(white, 0.9);
+$shadow_color: transparentize(black, 0.9);
+
+$drop_target_color: $accent_bg_color;
+
+$window_outline_color: transparentize(white, .92);
+
+//special cased widget colors
+$focus_border_color:  gtkalpha($accent_color, $focus_border_opacity);
+$dim_label_opacity: 0.55;
+$dimmer_opacity: 0.3;
+$disabled_opacity: 0.45;
+$strong_disabled_opacity: 0.3;
diff --git a/src/sass/libadwaita/_common.scss b/src/sass/libadwaita/_common.scss
new file mode 100644
index 00000000..8a1b4140
--- /dev/null
+++ b/src/sass/libadwaita/_common.scss
@@ -0,0 +1,94 @@
+
+.background {
+  color: $window_fg_color;
+  background-color: $window_bg_color;
+}
+
+dnd {
+  color: $window_fg_color;
+}
+
+.normal-icons {
+  -gtk-icon-size: 16px;
+}
+
+.large-icons {
+  -gtk-icon-size: 32px;
+}
+
+%osd,
+.osd {
+  color: $osd_fg_color;
+  border: none;
+  background-color: $osd_bg_color;
+  background-clip: padding-box;
+}
+
+/* Text selection */
+
+selection {
+  background-color: gtkalpha($view_fg_color, 0.1);
+  color: transparent;
+
+  &:focus-within {
+    background-color: gtkalpha($accent_bg_color, 0.3);
+  }
+}
+
+:not(window):drop(active):focus,
+:not(window):drop(active) { // FIXME needs to be done widget by widget, this wildcard should really die
+  border-color: $drop_target_color;
+  box-shadow: inset 0 0 0 1px $drop_target_color;
+  caret-color: $drop_target_color;
+}
+
+.navigation-sidebar,
+placessidebar,
+stackswitcher,
+expander-widget {
+  :not(window):drop(active):focus,
+  :not(window):drop(active) {
+    box-shadow: none;
+  }
+}
+
+/* Outline for low res icons */
+.lowres-icon {
+    -gtk-icon-shadow: 0 -1px rgba(0,0,0,0.05),
+      1px 0 rgba(0,0,0,0.1),
+      0 1px rgba(0,0,0,0.3),
+      -1px 0 rgba(0,0,0,0.1);
+}
+
+/* Drop shadow for large icons */
+.icon-dropshadow {
+  -gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05),
+      0 -1px rgba(0,0,0,0.05),
+      1px 0 rgba(0,0,0,0.1),
+      0 1px rgba(0,0,0,0.3),
+      -1px 0 rgba(0,0,0,0.1);
+}
+
+@keyframes needs_attention {
+  from { background-image: radial-gradient(farthest-side, $accent_color 0%, transparent 0%); }
+  to { background-image: radial-gradient(farthest-side, $accent_color 95%, transparent); }
+}
+
+%needs_attention {
+  // the dot is drawn by using two radial gradient, the first one is the actual dot, the other
+  // simulates the shadow labels and icons normally have in buttons.
+  animation: needs_attention 150ms ease-in;
+
+  background-image: radial-gradient(farthest-side, $accent_color 96%, transparent);
+  background-size: 6px 6px;
+  background-repeat: no-repeat;
+
+  background-position: right 3px;
+
+  &:dir(rtl) {
+    background-position: left 3px;
+  }
+}
+
+@import 'widgets';
+@import 'apps';
diff --git a/src/sass/libadwaita/_compat-colors.scss b/src/sass/libadwaita/_compat-colors.scss
new file mode 100644
index 00000000..dd0a65de
--- /dev/null
+++ b/src/sass/libadwaita/_compat-colors.scss
@@ -0,0 +1,33 @@
+// Sass thinks we're using the colors in the variables as strings and may shoot
+// warning, it's innocuous and can be defeated by using #{$var}.
+
+/* Public colors from Default */
+
+@define-color theme_bg_color #{$window_bg_color};
+@define-color theme_fg_color #{$window_fg_color};
+
+@define-color theme_base_color #{$view_bg_color};
+@define-color theme_text_color #{$view_fg_color};
+
+@define-color theme_selected_bg_color #{$accent_bg_color};
+@define-color theme_selected_fg_color #{$accent_fg_color};
+
+@define-color insensitive_bg_color #{gtkmix($window_bg_color, $view_bg_color, 60%)};
+@define-color insensitive_fg_color #{gtkalpha($window_fg_color, .5)};
+
+@define-color insensitive_base_color #{$view_bg_color};
+
+@define-color borders #{$border_color};
+
+@define-color theme_unfocused_bg_color #{$window_bg_color};
+@define-color theme_unfocused_fg_color #{$window_fg_color};
+
+@define-color theme_unfocused_base_color #{$view_bg_color};
+@define-color theme_unfocused_text_color #{$view_fg_color};
+
+@define-color theme_unfocused_selected_bg_color #{$accent_bg_color};
+@define-color theme_unfocused_selected_fg_color #{$accent_fg_color};
+
+@define-color unfocused_insensitive_color #{gtkcolor(insensitive_bg_color)};
+
+@define-color unfocused_borders #{$border_color};
diff --git a/src/sass/libadwaita/_defaults.scss b/src/sass/libadwaita/_defaults.scss
new file mode 100644
index 00000000..29113312
--- /dev/null
+++ b/src/sass/libadwaita/_defaults.scss
@@ -0,0 +1,83 @@
+/* GTK NAMED COLORS
+   ----------------
+   use responsibly! */
+
+// Sass thinks we're using the colors in the variables as strings and may shoot
+// warning, it's innocuous and can be defeated by using #{$var}.
+
+// These are the colors apps are can override. We define the defaults here and
+// define variables for them in _colors.scss
+
+// // The main accent color and the matching text value
+// @define-color accent_bg_color #{$primary};
+// @define-color accent_fg_color #{on($primary)};
+// @define-color accent_color #{$primary};
+
+// // destructive-action buttons
+// @define-color destructive_bg_color #{if($variant == 'dark', "@red_4", "@red_3")};
+// @define-color destructive_fg_color white;
+// @define-color destructive_color #{if($variant == 'dark', #ff7b63, "@red_4")};
+
+// // Levelbars, entries, labels and infobars. These don't need text colors
+// @define-color success_bg_color #{if($variant == 'dark', "@green_5", "@green_4")};
+// @define-color success_fg_color white;
+// @define-color success_color #{if($variant == 'dark', "@green_1", "#1b8553")};
+
+// @define-color warning_bg_color #{if($variant == 'dark', #cd9309, "@yellow_5")};
+// @define-color warning_fg_color #{transparentize(black, .2)};
+// @define-color warning_color #{if($variant == 'dark', "@yellow_2", #9c6e03)};
+
+// @define-color error_bg_color #{if($variant == 'dark', "@red_4", "@red_3")};
+// @define-color error_fg_color white;
+// @define-color error_color #{if($variant == 'dark', #ff7b63, "@red_4")};
+
+// // Window
+// @define-color window_bg_color #{if($variant == 'light', #fafafa, #242424)};
+// @define-color window_fg_color #{if($variant == 'light', transparentize(black, .2), white)};
+
+// // Views - e.g. text view or tree view
+// @define-color view_bg_color #{if($variant == 'light', #ffffff, #1e1e1e)};
+// @define-color view_fg_color #{if($variant == 'light', transparentize(black, .2), white)};
+
+// // Header bar, search bar, tab bar
+// @define-color headerbar_bg_color #{if($variant == 'light', #ffffff, #303030)};
+// @define-color headerbar_fg_color #{if($variant == 'light', transparentize(black, .2), white)};
+// @define-color headerbar_border_color #{if($variant == 'light', transparentize(black, .2), white)};
+// @define-color headerbar_backdrop_color @window_bg_color;
+// @define-color headerbar_shade_color #{if($variant == 'light', transparentize(black, .88), transparentize(black, .64))};
+// @define-color headerbar_darker_shade_color #{if($variant == 'light', transparentize(black, .88), transparentize(black, .1))};
+
+// // Split pane views
+// @define-color sidebar_bg_color #{if($variant == 'light', #ebebeb, #303030)};
+// @define-color sidebar_fg_color #{if($variant == 'light', transparentize(black, .2), white)};
+// @define-color sidebar_backdrop_color #{if($variant == 'light', #f2f2f2, #2a2a2a)};
+// @define-color sidebar_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))};
+// @define-color sidebar_border_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .64))};
+
+// @define-color secondary_sidebar_bg_color #{if($variant == 'light', #f3f3f3, #2a2a2a)};
+// @define-color secondary_sidebar_fg_color #{if($variant == 'light', transparentize(black, .2), white)};
+// @define-color secondary_sidebar_backdrop_color #{if($variant == 'light', #f6f6f6, #272727)};
+// @define-color secondary_sidebar_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))};
+// @define-color secondary_sidebar_border_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .64))};
+
+// // Cards, boxed lists
+// @define-color card_bg_color #{if($variant == 'light', #ffffff, transparentize(white, .92))};
+// @define-color card_fg_color #{if($variant == 'light', transparentize(black, .2), white)};
+// @define-color card_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .64))};
+
+// // Dialogs
+// @define-color dialog_bg_color #{if($variant == 'light', #fafafa, #383838)};
+// @define-color dialog_fg_color #{if($variant == 'light', transparentize(black, .2), white)};
+
+// // Popovers
+// @define-color popover_bg_color #{if($variant == 'light', #ffffff, #383838)};
+// @define-color popover_fg_color #{if($variant == 'light', transparentize(black, .2), white)};
+// @define-color popover_shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))};
+
+// // Thumbnails
+// @define-color thumbnail_bg_color #{if($variant == 'light', #ffffff, #383838)};
+// @define-color thumbnail_fg_color #{if($variant == 'light', transparentize(black, .2), white)};
+
+// // Miscellaneous
+// @define-color shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .75))};
+// @define-color scrollbar_outline_color #{if($variant == 'light', white, transparentize(black, .5))};
diff --git a/src/sass/libadwaita/_drawing.scss b/src/sass/libadwaita/_drawing.scss
new file mode 100644
index 00000000..e5022d66
--- /dev/null
+++ b/src/sass/libadwaita/_drawing.scss
@@ -0,0 +1,394 @@
+// Drawing mixins
+
+// generic drawing of more complex things
+
+//
+// Ripple keyframes
+//
+
+@keyframes ripple {
+  to {
+    background-size: 1000% 1000%;
+  }
+}
+
+@keyframes ripple-on-slider {
+  to {
+    background-size: auto, 1000% 1000%;
+  }
+}
+
+@keyframes ripple-on-headerbar {
+  from {
+    background-image: radial-gradient(circle, $accent_color 0%, transparent 0%);
+  }
+
+  to {
+    background-image: radial-gradient(circle, $accent_color 100%, transparent 100%);
+  }
+}
+
+//
+// Helper mixin for drawing visible focus rings
+//
+// If $target is specified, the focus ring is applied to the specified child element.
+// If $outer is true, the focus ring extends outward. Otherwise, it extends inward.
+// If $within is true, use focus-within instead of focus:focus-visible
+//
+@mixin focus-ring($target: null, $width: 2px, $offset: -$width, $outer: false, $focus-state: ':focus:focus-visible', $fc: $focus_border_color, $transition: null) {
+  & #{$target} {
+    outline: 0 solid transparent;
+    outline-offset: if($outer, $offset + 4px, $offset + $width + 4px);
+    transition: $focus_transition, $transition;
+  }
+
+  &#{$focus-state} #{$target} {
+    outline-color: $fc;
+    outline-width: $width;
+    outline-offset: $offset;
+  }
+}
+
+@mixin entry($t, $fc: $accent_color) {
+//
+// entry
+//
+// $t: entry type
+// $fc: focus color
+//
+
+  @if $t == normal {
+    transition: $transition,
+                outline $ripple_fade_out_duration $ease_out,
+                box-shadow $ripple_fade_out_duration $ease_out;
+    box-shadow: inset 0 0 0 2px transparent;
+    background-color: if($fc == $accent_color, $button_color, rgba($fc, 0.1));
+    color: if($fc == $accent_color, $secondary_text_color, rgba($fc, 0.75));
+    outline: 0 solid transparent;
+    outline-offset: 2px;
+  }
+
+  @if $t == hover {
+    transition: $transition,
+                box-shadow $ripple_fade_out_duration $ease_out;
+    background-color: $button_hover_color;
+    box-shadow: inset 0 0 0 2px $button_hover_color;
+    color: if($fc == $accent_color, $text_color, $fc);
+    outline: 0 solid transparent;
+    outline-offset: 2px;
+  }
+
+  @if $t == focus {
+    background-color: $button_focus_color;
+    box-shadow: inset 0 0 0 2px transparent;
+    color: if($fc == $accent_color, $text_color, $fc);
+    outline: 2px solid if($fc == $accent_color, $track, $fc);
+    outline-offset: -2px;
+  }
+
+  @if $t == checked {
+    transition: $transition,
+                outline $ripple_fade_out_duration $ease_out,
+                box-shadow $ripple_fade_out_duration $ease_out;
+    background-color: if($fc == $accent_color, $button_color, rgba($fc, 0.1));
+    box-shadow: inset 0 0 0 2px transparent;
+    color: if($fc == $accent_color, $text_color, $fc);
+    outline: 2px solid if($fc == $accent_color, $accent_color, $fc);
+    outline-offset: -2px;
+  }
+
+  @if $t == disabled {
+    box-shadow: inset 0 0 0 2px transparent;
+    background-color: if($fc == $accent_color, $button_color, rgba($fc, 0.1));
+    color: if($fc == $accent_color, $disabled_text_color, rgba($fc, 0.35));
+    outline: none;
+  }
+
+  @if $t == raised-normal {
+    transition: $transition, box-shadow $ripple_fade_out_duration $ease_out;
+    border-image: none;
+    box-shadow: inset 0 0 0 2px transparent;
+    background-color: if($fc == $accent_color, $surface, $fc);
+    color: if($fc == $accent_color, $text, on($fc));
+  }
+
+  @if $t == raised-hover {
+    box-shadow: inset 0 0 0 2px $button_hover_color;
+  }
+
+  @if $t == raised-focus {
+    border-image: none;
+    box-shadow: inset 0 0 0 2px if($fc == $accent_color, $accent_color, $fc);
+  }
+
+  @if $t == raised-disabled {
+    box-shadow: inset 0 0 0 2px transparent;
+    background-color: $base-alt;
+    color: $disabled_text_color;
+  }
+}
+
+
+@mixin button($t) {
+//
+// button
+//
+// $t: button type
+//
+
+  @if $t == normal {
+    transition: $transition,
+                background-size $ripple_fade_out_duration $ease_out,
+                background-image $ripple-fade-out-opacity-duration $ease_out,
+                outline $ripple_fade_out_duration $ease_out;
+    background-color: $button_color;
+    background-image: radial-gradient(circle, transparent 10%, transparent 0%);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 1000% 1000%;
+    outline: 0 solid transparent;
+    outline-offset: 2px;
+    color: $text_color;
+  }
+
+  @if $t == hover {
+    background-color: $button_hover_color;
+    color: $text_color;
+    outline: 0 solid transparent;
+  }
+
+  @if $t == focus {
+    outline: 2px solid gtkalpha($accent_color, 0.35);
+    outline-offset: 0;
+  }
+
+  @if $t == active {
+    transition: $transition,
+                background-size 0ms,
+                background-image 0ms,
+                border 0ms;
+    animation: ripple $ripple_fade_in_duration $ease_out forwards;
+    background-image: radial-gradient(circle, $button_hover_color 10%, transparent 0%);
+    background-size: 0% 0%;
+    background-color: $button_hover_color;
+    color: $text_color;
+    outline: 0 solid transparent;
+  }
+
+  @if $t == disabled {
+    background-color: $button_color;
+    color: $disabled_text_color;
+    outline-color: transparent;
+  }
+
+  @if $t == checked {
+    background-color: $accent_color;
+    color: $accent_fg_color;
+  }
+
+  @if $t == checked-hover {
+    outline-color: transparent;
+    background-color: gtkmix($accent_fg_color, $accent_color, 5%);
+    color: $accent_fg_color;
+  }
+
+  @if $t == checked-active {
+    animation: none;
+    outline-color: transparent;
+    background-color: gtkmix($accent_fg_color, $accent_color, 12%);
+    background-image: none;
+    color: $accent_fg_color;
+  }
+
+  @if $t == checked-disabled {
+    outline-color: transparent;
+    background-color: gtkalpha($accent_color, 0.35);
+    color: gtkalpha($accent_fg_color, 0.35);
+  }
+
+  @if $t == flat-normal {
+    transition: $transition,
+                border-image $ripple_fade_in_duration $ease_out,
+                background-size $ripple_fade_out_duration $ease_out,
+                background-image $ripple_fade_out_opacity_duration $ease_out,
+                outline $ripple_fade_out_duration $ease_out;
+    background-image: radial-gradient(circle, transparent 10%, transparent 0%);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 1000% 1000%;
+    background-color: transparent;
+    outline: 0 solid transparent;
+    outline-offset: 2px;
+    color: $secondary_text_color;
+  }
+
+  @if $t == flat-hover {
+    background-color: $button_hover_color;
+    color: $text_color;
+  }
+
+  @if $t == flat-focus {
+    color: $text_color;
+    outline: 2px solid $button_color;
+    outline-offset: -2px;
+  }
+
+  @if $t == flat-active {
+    transition: $transition,
+                border-image $ripple_fade_in_duration $ease_out,
+                background-size 0ms,
+                background-image 0ms;
+    animation: ripple $ripple_fade_in_duration $ease_out forwards;
+    background-image: radial-gradient(circle, $button_hover_color 10%, transparent 0%);
+    background-size: 0% 0%;
+    background-color: $button_hover_color;
+    color: $text_color;
+  }
+
+  @if $t == flat-disabled {
+    color: $secondary_disabled_text_color;
+    background-color: transparent;
+  }
+
+  @if $t == flat-checked {
+    background-color: $button_checked_color;
+    color: $text_color;
+  }
+
+  @if $t == flat-checked-hover {
+    background-color: $button_checked_hover_color;
+    color: $text_color;
+  }
+
+  @if $t == flat-checked-active {
+    animation: none;
+    outline-color: transparent;
+    background-color: $button_checked_active_color;
+    background-image: none;
+    color: $text_color;
+  }
+
+  @if $t == flat-checked-disabled {
+    background-color: $button_checked_color;
+    color: $disabled_text_color;
+  }
+}
+
+@mixin undershoot($p, $c: $shade_color, $neighbor: false, $style: default) {
+//
+// undershoot
+//
+// $p: position
+// $c: shade color
+// $neighbor: use ~ instead of >
+//
+// possible $p values:
+// top, bottom, right, left
+//
+
+  $_border_pos: '';
+  $_direction: '';
+  $_selector: if($neighbor, '~', '>');
+
+  @if $p==top {
+    $_direction: bottom;
+    $_border_pos: 0 1px;
+  } @else if $p==bottom {
+    $_direction: top;
+    $_border_pos: 0 -1px;
+  } @else if $p==left {
+    $_direction: right;
+    $_border_pos: 1px 0;
+  } @else if $p==right {
+    $_direction: left;
+    $_border_pos: -1px 0;
+  } @else {
+    @error "Unknown position #{$p}"
+  }
+
+  #{$_selector} undershoot.#{$p} {
+    @if $style==default {
+      box-shadow: none;
+    } @else if $style==frame {
+      box-shadow: inset $_border_pos $border_color;
+    }
+
+    background: linear-gradient(to $_direction, gtkalpha($c, .75), transparent 6px);
+  }
+}
+
+@mixin overshoot($p) {
+//
+// overshoot
+//
+// $p: position
+//
+// possible $p values:
+// top, bottom, right, left
+//
+
+  $_small_gradient_length: 3%;
+  $_big_gradient_length: 50%;
+
+  $_small_gradient_size: 100% $_small_gradient_length;
+  $_big_gradient_size: 100% $_big_gradient_length;
+
+  @if $p==right or $p==left {
+    $_small_gradient_size: $_small_gradient_length 100%;
+    $_big_gradient_size: $_big_gradient_length 100%;
+  }
+
+  $_small_gradient: radial-gradient(farthest-side at $p,
+                                    gtkalpha(currentColor, 0.12) 85%,
+                                    gtkalpha(currentColor, 0));
+
+  $_big_gradient: radial-gradient(farthest-side at $p,
+                                  gtkalpha(currentColor, 0.05),
+                                  gtkalpha(currentColor, 0));
+
+  background-image: $_small_gradient, $_big_gradient;
+  background-size: $_small_gradient_size, $_big_gradient_size;
+
+  background-repeat: no-repeat;
+  background-position: $p;
+
+  background-color: transparent; // reset some properties to be sure to not inherit them somehow
+  border: none;                  //
+  box-shadow: none;              //
+}
+
+@mixin background-shadow($direction, $color) {
+  background-image:
+    linear-gradient($direction,
+                    gtkalpha($color, 0.7),
+                    gtkalpha($color, 0.14) 40px,
+                    gtkalpha($color, 0) 56px),
+    linear-gradient($direction,
+                    gtkalpha($color, 0.4),
+                    gtkalpha($color, 0.14) 7px,
+                    gtkalpha($color, 0) 24px);
+}
+
+@mixin transition-shadows($color) {
+  > dimming {
+    background: $color;
+  }
+
+  @if $contrast == 'high' {
+    > border {
+      min-width: 1px;
+      min-height: 1px;
+      background: $border_color;
+    }
+  }
+
+  > shadow {
+    min-width: 56px;
+    min-height: 56px;
+
+    &.left  { @include background-shadow(to right,  $color); }
+    &.right { @include background-shadow(to left,   $color); }
+    &.up    { @include background-shadow(to bottom, $color); }
+    &.down  { @include background-shadow(to top,    $color); }
+  }
+}
diff --git a/src/sass/libadwaita/_functions.scss b/src/sass/libadwaita/_functions.scss
new file mode 100644
index 00000000..c4af658b
--- /dev/null
+++ b/src/sass/libadwaita/_functions.scss
@@ -0,0 +1,16 @@
+@function gtkalpha($c,$a) {
+  @return unquote("alpha(#{$c},#{$a})");
+}
+
+@function gtkmix($c1,$c2,$r) {
+  $ratio: 1 -  $r / 100%; // match SCSS mix()
+  @return unquote("mix(#{$c1},#{$c2},#{$ratio})");
+}
+
+@function gtkshade($c,$s) {
+  @return unquote("shade(#{$c},#{$s})");
+}
+
+@function gtkcolor($c) {
+  @return unquote("@#{$c}");
+}
diff --git a/src/sass/libadwaita/_palette.scss b/src/sass/libadwaita/_palette.scss
new file mode 100644
index 00000000..dd59a710
--- /dev/null
+++ b/src/sass/libadwaita/_palette.scss
@@ -0,0 +1,94 @@
+$blue_1: #99c1f1;
+$blue_2: #62a0ea;
+$blue_3: #3584e4;
+$blue_4: #1c71d8;
+$blue_5: #1a5fb4;
+$green_1: #8ff0a4;
+$green_2: #57e389;
+$green_3: #33d17a;
+$green_4: #2ec27e;
+$green_5: #26a269;
+$yellow_1: #f9f06b;
+$yellow_2: #f8e45c;
+$yellow_3: #f6d32d;
+$yellow_4: #f5c211;
+$yellow_5: #e5a50a;
+$orange_1: #ffbe6f;
+$orange_2: #ffa348;
+$orange_3: #ff7800;
+$orange_4: #e66100;
+$orange_5: #c64600;
+$red_1: #f66151;
+$red_2: #ed333b;
+$red_3: #e01b24;
+$red_4: #c01c28;
+$red_5: #a51d2d;
+$purple_1: #dc8add;
+$purple_2: #c061cb;
+$purple_3: #9141ac;
+$purple_4: #813d9c;
+$purple_5: #613583;
+$brown_1: #cdab8f;
+$brown_2: #b5835a;
+$brown_3: #986a44;
+$brown_4: #865e3c;
+$brown_5: #63452c;
+$light_1: #ffffff;
+$light_2: #f6f5f4;
+$light_3: #deddda;
+$light_4: #c0bfbc;
+$light_5: #9a9996;
+$dark_1: #77767b;
+$dark_2: #5e5c64;
+$dark_3: #3d3846;
+$dark_4: #241f31;
+$dark_5: #000000;
+
+// Sass thinks we're using the colors in the variables as strings and may shoot
+// warning, it's innocuous and can be defeated by using #{$var}.
+
+@define-color blue_1 #{$blue_1};
+@define-color blue_2 #{$blue_2};
+@define-color blue_3 #{$blue_3};
+@define-color blue_4 #{$blue_4};
+@define-color blue_5 #{$blue_5};
+@define-color green_1 #{$green_1};
+@define-color green_2 #{$green_2};
+@define-color green_3 #{$green_3};
+@define-color green_4 #{$green_4};
+@define-color green_5 #{$green_5};
+@define-color yellow_1 #{$yellow_1};
+@define-color yellow_2 #{$yellow_2};
+@define-color yellow_3 #{$yellow_3};
+@define-color yellow_4 #{$yellow_4};
+@define-color yellow_5 #{$yellow_5};
+@define-color orange_1 #{$orange_1};
+@define-color orange_2 #{$orange_2};
+@define-color orange_3 #{$orange_3};
+@define-color orange_4 #{$orange_4};
+@define-color orange_5 #{$orange_5};
+@define-color red_1 #{$red_1};
+@define-color red_2 #{$red_2};
+@define-color red_3 #{$red_3};
+@define-color red_4 #{$red_4};
+@define-color red_5 #{$red_5};
+@define-color purple_1 #{$purple_1};
+@define-color purple_2 #{$purple_2};
+@define-color purple_3 #{$purple_3};
+@define-color purple_4 #{$purple_4};
+@define-color purple_5 #{$purple_5};
+@define-color brown_1 #{$brown_1};
+@define-color brown_2 #{$brown_2};
+@define-color brown_3 #{$brown_3};
+@define-color brown_4 #{$brown_4};
+@define-color brown_5 #{$brown_5};
+@define-color light_1 #{$light_1};
+@define-color light_2 #{$light_2};
+@define-color light_3 #{$light_3};
+@define-color light_4 #{$light_4};
+@define-color light_5 #{$light_5};
+@define-color dark_1 #{$dark_1};
+@define-color dark_2 #{$dark_2};
+@define-color dark_3 #{$dark_3};
+@define-color dark_4 #{$dark_4};
+@define-color dark_5 #{$dark_5};
diff --git a/src/sass/libadwaita/_variables.scss b/src/sass/libadwaita/_variables.scss
new file mode 100644
index 00000000..dbe0fe83
--- /dev/null
+++ b/src/sass/libadwaita/_variables.scss
@@ -0,0 +1,96 @@
+@import '../tweaks-temp';
+
+$asset_suffix: if($variant == 'dark', '-dark', '');
+
+//
+// Sizes
+//
+
+$base_padding: if($compact == 'false', 6px, 4px);
+$menu_margin: 6px; //margin around menuitems & sidebar items
+$menu_padding: 12px; //inner menuitem padding
+
+$small_size: if($compact == 'false', 24px, 22px);
+$medium_size: if($compact == 'false', 36px, 32px);
+$large_size: if($compact == 'false', 48px, 40px);
+
+$menuitem_size: if($compact == 'false', 28px, 24px);
+
+//
+// Radiuses
+//
+
+$button_radius: 6px;
+$card_radius: $button_radius + 6px;
+$menuitem_radius: $button_radius;
+$window_radius: $button_radius + $base_padding;
+$popover_radius: $menuitem_radius + $base_padding;
+$circular_radius: 9999px;
+
+//
+// Durations
+//
+
+$duration: 75ms;
+$ripple_fade_in_duration: 225ms;
+$ripple_fade_out_duration: 300ms;
+$ripple_fade_out_opacity_duration: 1200ms;
+
+//
+// Timing functions
+//
+
+$ease: cubic-bezier(0.4, 0.0, 0.2, 1);
+$ease_out: cubic-bezier(0.0, 0.0, 0.2, 1);
+$ease_in: cubic-bezier(0.4, 0.0, 1, 1);
+$ease_in_out: cubic-bezier(0.4, 0.0, 0.6, 1);
+$ease_out_quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
+//
+// Transition shorthands
+//
+
+$transition: all $duration $ease_out;
+$transition_shadow: box-shadow 200ms ease-out;
+$backdrop_transition: 200ms ease-out;
+$focus_transition: outline-color 200ms $ease_out_quad,
+                   outline-width 200ms $ease_out_quad,
+                   outline-offset 200ms $ease_out_quad;
+$button_transition: background 200ms $ease_out_quad,
+                    box-shadow 200ms $ease_out_quad;
+//
+// Shadows
+//
+
+$shadow-z1:
+  0 2px 3px -2px rgba(black, 0.3),
+  0 1px 2px -1px rgba(black, 0.24),
+  0 1px 2px -1px rgba(black, 0.17);
+$shadow-z2:
+  0 4px 3px -3px rgba(black, 0.2),
+  0 2px 2px -1px rgba(black, 0.24),
+  0 1px 3px 0 rgba(black, 0.12);
+$shadow-z3:
+  0 3px 3px -2px rgba(black, 0.05),
+  0 2px 3px -1px rgba(black, 0.06),
+  0 1px 4px 0 rgba(black, 0.05);
+$shadow-z4:
+  0 1px 2px 0 rgba(black, 0.15),
+  0 3px 3px 0 rgba(black, 0.18),
+  0 3px 6px 0 rgba(black, 0.12);
+$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),
+  0 5px 13px 4px rgba(black, 0.12);
+$shadow-z16:
+  0 1px 3px 0 rgba(black, 0.2),
+  0 15px 16px 2px rgba(black, 0.14),
+  0 6px 18px 5px rgba(black, 0.12);
diff --git a/src/sass/libadwaita/_widgets.scss b/src/sass/libadwaita/_widgets.scss
new file mode 100644
index 00000000..471d0a90
--- /dev/null
+++ b/src/sass/libadwaita/_widgets.scss
@@ -0,0 +1,42 @@
+@import 'widgets/avatar';
+@import 'widgets/bottom-sheet';
+@import 'widgets/buttons';
+@import 'widgets/calendar';
+@import 'widgets/checks';
+@import 'widgets/color-chooser';
+@import 'widgets/column-view';
+@import 'widgets/dialogs';
+@import 'widgets/deprecated';
+@import 'widgets/dropdowns';
+@import 'widgets/emoji-chooser';
+@import 'widgets/entries';
+@import 'widgets/expanders';
+@import 'widgets/file-chooser';
+@import 'widgets/header-bar';
+@import 'widgets/labels';
+@import 'widgets/level-bar';
+@import 'widgets/linked';
+@import 'widgets/links';
+@import 'widgets/lists';
+@import 'widgets/menus';
+@import 'widgets/message-dialog';
+@import 'widgets/misc';
+@import 'widgets/notebook';
+@import 'widgets/paned';
+@import 'widgets/popovers';
+@import 'widgets/preferences';
+@import 'widgets/progress-bar';
+@import 'widgets/scale';
+@import 'widgets/scrolling';
+@import 'widgets/shortcuts-window';
+@import 'widgets/sidebars';
+@import 'widgets/spinner';
+@import 'widgets/spin-button';
+@import 'widgets/switch';
+@import 'widgets/tab-view';
+@import 'widgets/text-selection';
+@import 'widgets/toolbars';
+@import 'widgets/tooltip';
+@import 'widgets/views';
+@import 'widgets/view-switcher';
+@import 'widgets/window';
diff --git a/src/sass/libadwaita/apps/_builder.scss b/src/sass/libadwaita/apps/_builder.scss
new file mode 100644
index 00000000..420098cc
--- /dev/null
+++ b/src/sass/libadwaita/apps/_builder.scss
@@ -0,0 +1,104 @@
+//
+// Builder
+//
+
+popover.background.global-search {
+  > arrow, > contents { padding: 0; }
+}
+
+panelresizer .top-bar {
+  box-shadow: inset 0 -1px $border_color;
+}
+
+.frameheader.header {
+  min-height: $large_size;
+  padding: 0;
+  border: none;
+  border-bottom: 1px solid $border_color;
+  background-color: $headerbar_backdrop_color;
+
+  &:backdrop {
+    background-color: $headerbar_bg_color;
+  }
+
+  tabbar.inline {
+    tabbox > tabboxchild {
+      margin: 0;
+    }
+  }
+}
+
+panelframeswitcher {
+  &.frameheader.header { padding: 0 $base_padding; }
+
+  > button.toggle.image-button {
+    border: none;
+    margin: $base_padding 0;
+  }
+}
+
+panelstatusbar {
+  box-shadow: inset 0 1px $border_color;
+
+  > menubutton > button,
+  > paneltogglebutton button {
+    border-radius: 0;
+    @extend %button_basic_flat;
+  }
+}
+
+panelwidget entry.statusbar {
+  background-color: $window_bg_color;
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+  border-top: 1px solid $border_color;
+
+  &:focus-within {
+    outline: none;
+  }
+}
+
+.IdeTweaksWindow,
+.org-gnome-Builder {
+  .boxed-list {
+    box-shadow: inset 0 0 0 1px gtkalpha(currentColor, 0.08);
+  }
+}
+
+// Setting window
+.style-variant {
+  padding: 0 $base_padding * 2;
+
+  button.toggle {
+    padding: 0;
+
+    &, &:hover, &:focus, &:active, &:checked {
+      background: none;
+      outline: none;
+      border: none;
+      box-shadow: none;
+    }
+
+    > stylevariantpreview > .wallpaper {
+      border-radius: $button_radius;
+      outline-color: transparent;
+      outline-width: 3px;
+      outline-offset: $base_padding / 2;
+      outline-style: solid;
+      box-shadow: none;
+    }
+
+    &:hover > stylevariantpreview > .wallpaper {
+      outline-color: gtkalpha(currentColor, 0.05);
+    }
+
+    &:active > stylevariantpreview > .wallpaper {
+      outline-color: gtkalpha(currentColor, 0.15);
+    }
+
+    &:checked > stylevariantpreview > .wallpaper {
+      outline-color: $accent_color;
+    }
+  }
+}
diff --git a/src/sass/libadwaita/apps/_calculator.scss b/src/sass/libadwaita/apps/_calculator.scss
new file mode 100644
index 00000000..7e9381aa
--- /dev/null
+++ b/src/sass/libadwaita/apps/_calculator.scss
@@ -0,0 +1,1595 @@
+
+//
+// Nautilus
+//
+.nautilus-window {
+  placesview {
+    label { color: $text-secondary; }
+  }
+
+  .nautilus-grid-view {
+    child.activatable {
+      @extend %row_activatable;
+    }
+  }
+
+  .floating-bar {
+    min-height: 32px;
+    padding: 0;
+    margin: $space-size;
+    border-style: none;
+    border-radius: $corner-radius;
+    background-color: $primary;
+    color: on($primary);
+    box-shadow: $shadow-z3;
+
+    button {
+      margin: (32px - $small-size) / 2;
+      color: on($primary);
+
+      @extend %small-button;
+    }
+  }
+}
+
+#NautilusQueryEditor { // search entry
+  > menubutton > button.image-button {
+    min-width: 24px;
+    min-height: 24px;
+  }
+
+  > text, > box, > menubutton > button.image-button {
+    margin: $space-size 0;
+  }
+}
+
+#NautilusQueryEditorTag {
+  background-color: $divider;
+
+  > button.image-button {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+#NautilusPathBar {
+  background-color: $titlebar-fill;
+  border-radius: $corner-radius;
+  margin: $space-size 0;
+
+  .content-pane & {
+    background-color: $fill;
+  }
+}
+
+#NautilusPathButton {
+  margin: 0 $space-size / 2;
+  border-radius: $corner-radius;
+
+  &.current-dir {
+    color: $titlebar-text;
+
+    &:hover, &:active {
+      background: none;
+      box-shadow: none;
+    }
+  }
+
+  .content-pane &.current-dir {
+    color: $text;
+  }
+
+  &:first-child { margin-left: 0; }
+}
+
+#NautilusViewCell {
+  clamp box {
+    margin: 0;
+    border-spacing: 0;
+  }
+}
+
+navigation-view-page {
+  > toolbarview > scrolledwindow > viewport > clamp > box.medium > box > stack > button {
+    margin-top: $space-size * 2;
+  }
+}
+
+//
+// Gnome Control Center
+//
+
+window.dialog {
+  > box > stack > box > box {
+    > notebook.frame {
+      border-width: 0 0 0 1px;
+      border-radius: 0;
+    }
+  }
+}
+
+.background-thumbnail {
+  > button.remove-button {
+    margin: $space-size;
+  }
+}
+
+//
+// Calculator
+//
+
+.display-container {
+  .small &.card {
+    border-radius: 0;
+    box-shadow: none;
+    border-width: 0 0 1px 0;
+  }
+
+  .history-view { background-color: $base; }
+
+  #displayitem {
+    padding: 0 12px 8px 0;
+    font-size: 1.4em;
+    border-top: 1px solid $border;
+  }
+}
+
+.math-buttons button {
+  font-size: 1.1em;
+  padding: 2px $space-size;
+
+  &.text-button {
+    padding-left: $space-size * 2 + 4px;
+    padding-right: $space-size * 2 + 4px;
+  }
+}
+
+leaflet {
+  button.number-button {
+    background-color: rgba($text, 0.1);
+
+    &:hover {
+      background-color: rgba($text, 0.2);
+    }
+
+    &:active {
+      background-color: rgba($text, 0.3);
+    }
+  }
+}
+
+//
+// Calendar
+//
+
+// labels
+label {
+  &.primary-label, &.month-name, &.secondary-label {
+    font-size: 16pt;
+    font-weight: bold;
+    padding: $space-size * 2;
+  }
+
+  &.primary-label, &.month-name {
+    color: $primary;
+  }
+
+  &.secondary-label {
+    color: $text-disabled;
+  }
+}
+
+calendar-view {
+  font-size: 10pt;
+
+  &:selected {
+    color: $primary;
+    font-weight: bold;
+  }
+}
+
+calendar-view.header,
+label.header {
+  font-size: 10pt;
+  font-weight: bold;
+  color: $text-disabled;
+}
+
+calendar-view.current,
+weekgrid.current {
+  background-color: gtkalpha($primary, 0.3);
+}
+
+popover.events {
+  background-color: $popover;
+  padding: 0;
+
+  box {
+    border-top-left-radius: $corner-radius;
+    border-top-right-radius: $corner-radius;
+  }
+
+  list {
+    background-color: $base;
+    border-radius: $corner-radius;
+  }
+
+  scrolledwindow {
+    border-width: 0;
+  }
+
+  button {
+    border-radius: $corner-radius;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-style: solid none none;
+    box-shadow: none;
+  }
+}
+
+// Event widget
+event {
+  margin: 1px;
+  font-size: 0.9rem;
+
+  widget.content {
+    margin: 4px;
+  }
+
+  &.timed,
+  &:not(.slanted):not(.slanted-start):not(.slanted-end) {
+    border-radius: $corner-radius;
+  }
+
+  &.timed widget.edge {
+    border-radius: $corner-radius / 2;
+    min-width: 5px;
+  }
+
+  &.slanted-start,
+  &.slanted-end:dir(rtl) {
+    padding-left: $space-size * 2 + 4px;
+    border-radius: 0 $corner-radius / 2 $corner-radius / 2 0;
+  }
+
+  &.slanted-end,
+  &.slanted-start:dir(rtl) {
+    padding-right: $space-size * 2 + 4px;
+    border-radius: $corner-radius / 2 0 0 $corner-radius / 2;
+  }
+
+  &:not(.timed).color-dark {
+    color: white;
+    outline-color: rgba(0, 0, 0, 0.3);
+  }
+
+  &.timed,
+  &:not(.timed).color-light {
+    color: gtkalpha(black, 0.75);
+    outline-color: rgba(255, 255, 255, 0.5);
+  }
+
+}
+
+// Event Popover
+popover.event-popover,
+popover.event-popover > contents {
+  padding: 0;
+}
+
+.search-viewport {
+  background-color: $base;
+}
+
+// calendar popover
+.calendar-list {
+  background-color: transparent;
+
+  > list {
+    border-radius: 4px;
+  }
+}
+
+// defeats the ugly hover effect of the calendar color dot on buttons
+.calendar-color-image {
+  -gtk-icon-filter: none;
+}
+
+// adds a subtle shadow to the calendar color dot when it makes sense
+image.calendar-color-image,
+button:active:not(:backdrop) .calendar-color-image,
+button:checked:not(:backdrop) .calendar-color-image,
+.calendars-list .calendar-color-image:not(:backdrop):not(:disabled),
+.calendar-list .calendar-color-image:not(:backdrop):not(:disabled),
+.sources-button:not(:backdrop):not(:disabled) .calendar-color-image {
+  -gtk-icon-shadow: 0 1px gtkalpha(black, 0.1);
+}
+
+// Date chooser
+
+// month/year controls
+datechooser {
+  navigator { // add some space between the two controls
+    margin-right: $space-size;
+    margin-left: $space-size;
+    margin-bottom: $space-size;
+  }
+
+  navigator {
+    label { font-weight: bold; }
+
+    button.flat,
+    button.toggle,
+    button.image-button {
+      min-height: $medium-size;
+      min-width: $medium-size;
+      padding: 0;
+    }
+  }
+
+  // day names and week numbers
+  .weeknum, .weekday {
+    color: $text-disabled;
+    font-size: smaller;
+  }
+
+  // days
+  button.day {
+    font-size: 10pt;
+    font-weight: normal;
+    margin: $space-size / 2;
+    padding: 0;
+    min-height: $medium-size;
+    min-width: $medium-size;
+    transition: none;
+
+    dot {
+      background-color: $text;
+      border-radius: 50%;
+      min-height: $space-size / 2;
+      min-width: $space-size / 2;
+    }
+
+    &:selected, &.today:selected {
+      background-color: $primary;
+      color: on($primary);
+      font-weight: bold;
+
+      dot { background-color: on($primary); }
+    }
+
+    &.today {
+      color: $primary;
+
+      dot { background-color: $primary; }
+    }
+
+    &.other-month {
+      &:not(:hover),
+      &:backdrop {
+        color: gtkalpha(currentColor, 0.1);
+
+        dot { background-color: gtkalpha(currentColor, 0.1); }
+      }
+
+      &:hover:not(:backdrop) {
+        color: $text-disabled;
+
+        dot { background-color: $text-disabled; }
+      }
+    }
+  }
+}
+
+// Week View CSS
+.week-header {
+  padding: 0;
+
+  & > box:first-child {
+    border-bottom: 1px solid $border;
+  }
+
+  .week-number {
+    font-size: 16pt;
+    font-weight: bold;
+    padding: $space-size * 2 $space-size * 2 $space-size * 3 $space-size * 2;
+    color: $track;
+  }
+
+  &.week-temperature {
+    font-size: 10pt;
+    font-weight: bold;
+    color: $text-disabled;
+  }
+
+  &.lines {
+    color: $border;
+  }
+}
+
+weekhourbar > label {
+  font-size: 10pt;
+  padding: 4px $space-size;
+}
+
+.week-view .lines {
+  color: $border;
+}
+
+weekgrid > widget.now-strip {
+  background-color: gtkalpha($primary, 0.8);
+  margin: 0 0 0 1px;
+  min-height: 3px;
+}
+
+weekgrid,
+.week-header {
+  &:selected, &.dnd {
+    background-color: gtkalpha($primary, 0.25);
+  }
+}
+
+// Month cell
+monthcell {
+  border: solid 1px $border;
+  border-width: 1px 0 0 1px;
+  background-color: transparent;
+  transition: background-color 200ms;
+
+  &:hover:not(.out-of-month):not(.today) {
+    background-color: $base-alt;
+    transition: background-color 200ms;
+    color: $text;
+  }
+
+  &:selected {
+    background-color: gtkalpha($primary, 0.1);
+
+    &:hover {
+      background-color: gtkalpha($primary, 0.2);
+    }
+
+    label.day-label { font-weight: bold; }
+  }
+
+  &:nth-child(7n + 1) { border-left-width: 0; }
+
+  &.today {
+    background-color: gtkalpha($primary, 0.2);
+
+    &:hover {
+      background-color: gtkalpha($primary, 0.3);
+      color: $primary;
+    }
+
+    &:selected {
+      background-color: gtkalpha($primary, 0.25);
+
+      &:hover {
+        background-color: gtkalpha($primary, 0.35);
+      }
+    }
+  }
+
+  label {
+    color: $text;
+    font-size: 0.9rem;
+
+    &.day-label {
+      font-size: 1rem;
+    }
+  }
+
+  &.out-of-month {
+    background-color: $fill;
+
+    label {
+      color: $text-secondary;
+    }
+  }
+
+  button {
+    padding: 0 $space-size;
+    border-radius: 0;
+    border-bottom: none;
+    border-right: none;
+  }
+}
+
+// Month popover
+monthpopover > box {
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+}
+
+.notes-section box > textview {
+  border-radius: $corner-radius;
+  padding: $space-size;
+
+  > text {
+    background: none;
+  }
+}
+
+// Agenda View CSS
+agenda-view {
+  list {
+    > row {
+      padding: 2px $space-size * 2;
+    }
+
+    > label {
+      padding: $space-size $space-size * 2;
+    }
+  }
+
+  > scrolledwindow > viewport > list.background {
+    background-color: transparent;
+  }
+}
+
+label.no-events {
+  font-style: italic;
+}
+
+// Search
+searchbutton > popover > arrow {
+  background: none;
+  border: none;
+}
+
+// Month selector
+datechooser {
+  padding: $space-size;
+
+  .current-week {
+    background: gtkalpha($titlebar, 0.7);
+    color: on($titlebar);
+    border-radius: $corner-radius;
+  }
+}
+
+menubutton {
+  &.sources-button {
+    margin-top: 0;
+    margin-bottom: 0;
+    border-radius: 0;
+    border-top-style: none;
+    border-bottom-style: none;
+    
+    &:hover:not(:backdrop) {
+      background-image: none;
+      text-shadow: none;
+    }
+
+    > button {
+      border-radius: 0;
+
+      .title {
+        font-size: 10pt;
+        font-weight: normal;
+        padding: 0 $space-size;
+      }
+
+      .subtitle {
+        font-size: 8pt;
+        padding: 0 $space-size;
+      }
+
+      .calendar-color-image {
+        -gtk-icon-size: 12px;
+      }
+    }
+  }
+
+  stack > box {
+    border-spacing: $space-size;
+  }
+
+  .topbar headerbar &.sources-button {
+    > button {
+      border-radius: 0 0 $corner-radius $corner-radius;
+    }
+  }
+}
+
+//
+// Contacts
+//
+
+.contacts-contact-list list.navigation-sidebar {
+  background: none;
+}
+
+//
+// Gnome Software
+//
+
+.details-page {
+  margin: $space-size * 4 0px;
+}
+
+.installed-overlay-box {
+  font-size: smaller;
+  background-color: $primary;
+  border-radius: 0;
+  color: on($primary);
+  text-shadow: 0 1px 0 rgba(black, 0.2);
+}
+
+screenshot-carousel box.frame {
+  border-width: 1px 0;
+  border-radius: 0;
+}
+
+screenshot-carousel button,
+.featured-carousel button {
+  margin: $space-size * 2;
+}
+
+.screenshot-image-main .image1,
+.screenshot-image-main .image2 {
+  margin-top: $space-size;
+  margin-bottom: $space-size * 2;
+  margin-left: $space-size;
+  margin-right: $space-size;
+}
+
+.app-tile-label {
+  font-size: 105%;
+}
+
+.review-textbox {
+  padding: $space-size;
+}
+
+.origin-rounded-box {
+  background-color: $divider;
+  border-radius: $circular-radius;
+  padding: $space-size - 2px;
+}
+
+.origin-beta {
+  color: $warning;
+}
+
+.origin-button > button {
+  padding: $space-size / 2 $space-size * 1.5;
+}
+
+.card flowboxchild {
+  &.card {
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    background: none;
+  }
+}
+
+.category-tile.card {
+  padding: $space-size * 3.5;
+  border: none;
+  border-radius: $corner-radius;
+  min-width: 140px;
+  font-weight: 900;
+  font-size: larger;
+  box-shadow: $shadow-z3;
+
+  &.category-tile-iconless {
+    padding: $space-size * 1.5 $space-size * 2.5;
+    min-width: 130px;
+    font-size: 105%;
+    font-weight: normal;
+    box-shadow: none;
+    background-color: $fill;
+  }
+
+  // Styling for specific category buttons.
+  &.category-create {
+    background: linear-gradient(180deg, #ce8cd7 0%, #2861c6 100%);
+    color: white;
+
+    &:hover {
+      background: linear-gradient(180deg, shade(#ce8cd7, 1.07) 0%, shade(#2861c6, 1.1) 100%);
+      color: white;
+    }
+
+    &:active {
+      background: linear-gradient(180deg, shade(#ce8cd7, .95) 0%, shade(#2861c6, .95) 100%);
+      color: white;
+    }
+  }
+
+  &.category-develop {
+    background: #5e5c64;
+    color: white;
+
+    &:hover {
+      background: shade(#5e5c64, 1.2);
+      color: white;
+    }
+
+    &:active {
+      background-color: shade(#5e5c64, .95);
+      color: white;
+    }
+  }
+
+  &.category-learn {
+    background: linear-gradient(180deg, #2ec27e 30%, #27a66c 100%);
+    color: white;
+
+    &:hover {
+      background: linear-gradient(180deg, shade(#2ec27e, 1.06) 30%, shade(#27a66c, 1.06) 100%);
+      color: white;
+    }
+
+    &:active {
+      background: linear-gradient(180deg, shade(#2ec27e, .95) 30%, shade(#27a66c, .95) 100%);
+      color: white;
+    }
+  }
+
+  &.category-play {
+    background: linear-gradient(75deg, #f9e2a7 0%, #eb5ec3 50%, #6d53e0 100%);
+    color: #393484;
+
+    &:hover {
+      background: linear-gradient(75deg, shade(#f9e2a7, 1.07) 0%, shade(#eb5ec3, 1.07) 50%, shade(#6d53e0, 1.07) 100%);
+      color: #393484;
+    }
+
+    &:active {
+      background: linear-gradient(75deg, shade(#f9e2a7, .97) 0%, shade(#eb5ec3, .95) 50%, shade(#6d53e0, 1.07) 100%);
+      color: #393484;
+    }
+  }
+
+  &.category-socialize {
+    background: linear-gradient(90deg, #ef4e9b 0%, #f77466 100%);
+    color: $text-secondary;
+
+    &:hover {
+      background: linear-gradient(90deg, shade(#ef4e9b, 1.08) 0%, shade(#f77466, 1.08) 100%);
+    }
+
+    &:active {
+      background: linear-gradient(90deg, shade(#ef4e9b, .95) 0%, shade(#f77466, .95) 100%);
+    }
+  }
+
+  &.category-work {
+    padding: 1px; /* FIXME: work around https://gitlab.gnome.org/GNOME/gtk/-/issues/4324 */
+    color: #1c71d8;
+    background-color:#fdf8d7;
+    background-image: linear-gradient($border 1px, transparent 1px),
+             linear-gradient(90deg, $border 1px, transparent 1px);
+    background-size: 10px 10px, 10px 10px;
+    background-position: -1px -4px, center -1px;
+
+    &:hover {
+      color: #1c71d8;
+      background-color: lighten(#fdf8d7, 5%);
+      background-image: linear-gradient($border 1px, transparent 1px),
+               linear-gradient(90deg, $border 1px, transparent 1px);
+    }
+
+    &:active {
+      color: #1c71d8;
+      background-color: darken(#fdf8d7, 5%);
+      background-image: linear-gradient($border 1px, transparent 1px),
+               linear-gradient(90deg, $border 1px, transparent 1px);
+    }
+  }
+}
+
+clamp.medium .category-tile:not(.category-tile-iconless),
+clamp.large .category-tile:not(.category-tile-iconless) {
+  font-size: larger;
+}
+
+// The rest of the featured-tile CSS is loaded at runtime in gs-feature-tile.c
+.featured-tile {
+  padding: 0;
+  box-shadow: none;
+  color: $text;
+
+  label.title-1 {
+    margin-top: $space-size;
+    margin-bottom: $space-size;
+  }
+
+  &.narrow label.title-1 {
+    font-size: 16pt;
+  }
+}
+
+.application-details-infobar {
+  &, &.info {
+    background-color: $fill;
+    color: $text;
+    border: 1px solid $border;
+  }
+
+  &.warning {
+    background-color: $warning;
+    color: on($warning);
+    border: 1px solid on($warning, divider);
+  }
+}
+
+@keyframes install-progress-unknown-move {
+  0% { background-position: 0%; }
+  50% { background-position: 100%; }
+  100% { background-position: 0%; }
+}
+
+.application-details-description .button {
+  padding-left: $space-size * 4;
+  padding-right: $space-size * 4;
+}
+
+.install-progress {
+  background-image: linear-gradient(to top, $primary 2px, gtkalpha($primary, 0) 2px);
+  background-repeat: no-repeat;
+  background-position: 0 bottom;
+  background-size: 0;
+  transition: none;
+}
+
+.install-progress:dir(rtl) { background-position: 100% bottom; }
+
+.review-row > * {
+  margin: $space-size * 2;
+}
+
+.review-row button { font-size: smaller; }
+
+.review-row .vote-buttons button {
+  margin-right: -1px;
+}
+
+// this is the separator between yes and no vote buttons, gtk+ 3.20 only
+.review-row .vote-buttons button:not(:first-child) {
+  border-image: linear-gradient(to top, $border, $border) 0 0 0 1 / 5px 0 5px 1px;
+}
+
+.review-row .vote-buttons button:hover,
+.review-row .vote-buttons button:active,
+.review-row .vote-buttons button:hover + button,
+.review-row .vote-buttons button:active + button {
+  border-image: none;
+}
+
+review-bar {
+  color: $text-disabled;
+  background-image: none;
+  background-color: $track;
+}
+
+.review-histogram star-image {
+  color: $text-disabled;
+}
+
+.version-arrow-label {
+  font-size: x-small;
+}
+
+.overview-more-button {
+  font-size: smaller;
+  padding: 0 $space-size * 2 + 4px;
+}
+
+.app-row-origin-text {
+  font-size: smaller;
+}
+
+.app-listbox-header {
+  padding: $space-size;
+  border-bottom: 1px solid $border;
+}
+
+.image-list {
+  background-color: transparent;
+}
+
+box.star {
+  background-color: transparent;
+  background-image: none;
+}
+
+button.star {
+  outline-offset: 0;
+  background-color: transparent;
+  background-image: none;
+  border-image: none;
+  border-radius: 0;
+  border-width: 0;
+  padding: 0;
+  box-shadow: none;
+  outline-offset: -1px;
+}
+
+star-image {
+  color: $yellow-dark;
+}
+
+.dimmer-label {
+  opacity: 0.25;
+}
+
+.update-failed-details {
+  font-family: Monospace;
+  font-size: smaller;
+  padding: $space-size * 2 + 4px;
+}
+
+.upgrade-banner {
+  padding: 0px;
+  border-radius: $corner-radius;
+  border: none;
+}
+
+.upgrade-banner-background {
+  background: linear-gradient(to bottom, $green-light, $blue-light);
+  color: white;
+}
+
+.upgrade-buttons #button_upgrades_install {
+  padding-left: $space-size * 2 + 4px;
+  padding-right: $space-size * 2 + 4px;
+}
+
+scrolledwindow.list-page > viewport > clamp > box {
+  margin: $space-size * 4 $space-size * 2;
+  border-spacing: $space-size * 4;
+}
+
+.update-preferences preferencesgroup > box > box {
+  margin-top: $space-size * 3;
+}
+
+.section > label:not(:first-child) { margin-top: $space-size; }
+
+.section > box:not(:first-child) { margin-top: $space-size * 2; }
+
+clamp.status-page {
+	margin: $space-size * 6 $space-size * 2;
+}
+
+clamp.status-page .iconbox {
+  min-height: 128px;
+  min-width: 128px;
+}
+
+clamp.status-page .icon {
+  color: $text-disabled;
+  min-height: 32px;
+  min-width: 32px;
+}
+
+clamp.status-page .icon:not(:last-child) {
+  margin-bottom: $space-size * 6;
+}
+
+clamp.status-page .title:not(:last-child) {
+  margin-bottom: $space-size * 2;
+}
+
+app-context-bar {
+  .context-tile {
+    border: 1px solid $border;
+    background-color: transparent;
+    border-radius: 0;
+    padding: $space-size * 4 $space-size * 2 $space-size * 3.5 $space-size * 2;
+    outline-offset: 5px;
+    transition-property: outline, outline-offset, background-image;
+    border-bottom: none;
+    border-right: none;
+
+    &:hover {
+      background-image: none;
+      background-color: $overlay-hover;
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-color: $overlay-active;
+    }
+
+    &:focus:focus-visible {
+      outline-offset: -1px;
+    }
+  }
+
+  &.horizontal box:first-child .context-tile:first-child,
+  &.vertical .context-tile:first-child {
+    border-left: none;
+  }
+
+  &.horizontal .context-tile,
+  &.vertical box:first-child .context-tile {
+  	border-top: none;
+  }
+
+  > box:not(:first-child) > button.flat {
+    border-radius: 0;
+
+    &:last-child {
+      border-radius: 0 $corner-radius $corner-radius 0;
+    }
+  }
+
+  > box:first-child > button.flat {
+    border-radius: 0;
+
+    &:first-child {
+      border-radius: $corner-radius 0 0 $corner-radius;
+    }
+  }
+
+  > box > button.flat {
+    border-left-color: $border;
+  }
+}
+
+carousel.card {
+  border: none;
+  background-color: $fill;
+}
+
+.context-tile-lozenge {
+  min-height: 28px;
+  min-width: 28px;
+  padding: $space-size;
+  font-size: 18px;
+  font-weight: bold;
+  border-radius: $circular-radius;
+
+  &.large {
+    font-size: 24px;
+    padding: 16px;
+    min-width: 24px;  /* 60px minus the left and right padding */
+    min-height: 24px;  /* 60px minus the top and bottom padding */
+  }
+
+  &.wide-image image {
+    margin-top: -28px;
+    margin-bottom: -28px;
+  }
+
+  image { -gtk-icon-style: symbolic; }
+
+  &.grey {
+    color: $text;
+    background-color: $divider;
+  }
+
+  &.green, &.details-rating-0 {
+    color: darken($success, 15%);
+    background-color: rgba($success, 0.15);
+  }
+
+  &.blue,
+  &.details-rating-5 {
+    color: $blue-light;
+    background-color: rgba($blue-light, 0.15);
+  }
+
+  &.yellow, &.details-rating-12 {
+    color: darken($warning, 15%);
+    background-color: rgba($warning, 0.15);
+  }
+
+  &.details-rating-15 {
+    color: $orange-light;
+    background-color: rgba($orange-light, .15);
+  }
+
+  &.red, &.details-rating-18 {
+    color: darken($error, 15%);
+    background-color: rgba($error, 0.15);
+  }
+}
+
+.eol-red {
+  font-weight: bold;
+  color: $error;
+}
+
+window.narrow .app-title {
+  font-size: 16pt;
+}
+
+window.narrow .app-developer {
+  font-size: small;
+}
+
+.install-progress-label {
+  font-size: smaller;
+  font-feature-settings: "tnum";
+}
+
+scrolledwindow.fake-adw-status-page > viewport > box { margin: $space-size * 6 $space-size * 2; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp:not(:last-child) > box { margin-bottom: $space-size * 6; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .icon:not(:last-child) { margin-bottom: $space-size * 6; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: $space-size * 2; }
+
+statuspage.icon-dropshadow image.icon {
+	-gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05),
+	                  0 -1px rgba(0,0,0,0.05),
+	                  1px 0 rgba(0,0,0,0.1),
+	                  0 1px rgba(0,0,0,0.3),
+	                  -1px 0 rgba(0,0,0,0.1);
+}
+
+window.info scrollbar.vertical {
+  margin-top: 48px;
+  background: none;
+  box-shadow: none;
+}
+
+window.info scrollbar.vertical trough {
+  margin-top: 0;
+}
+
+// GsAppRow
+row.app > box.header {
+  margin-left: $space-size * 2;
+  margin-right: $space-size * 2;
+}
+
+row.app > box.header {
+  border-spacing: $space-size * 2;
+}
+
+row.app > box.header > image {
+  margin-top: $space-size * 2;
+  margin-bottom: $space-size * 2;
+}
+
+row.app label.warning {
+  color: $error;
+}
+
+// GtkSpinner
+
+// Ensure the spinner is hidden before the animation is triggered.
+@keyframes pre-delay {
+  from { opacity: 0; }
+  to { opacity: 0; }
+}
+
+@keyframes fade-in {
+  from { filter: opacity(0%); }
+}
+
+/* Give a fade-in animation to spinners. */
+spinner.fade-in:checked {
+  animation: pre-delay 0.5s linear 1, fade-in 1s linear 1, spin 1s linear infinite;
+  animation-delay: 0s, 0.5s, 0.5s;
+}
+
+// Leaflets
+window > contents > leaflet { // Gnome control center
+  > box > stack.background {
+    background-color: transparent;
+    background-image: linear-gradient(to bottom,
+                                      transparent,
+                                      transparent $large-size,
+                                      $background $large-size,
+                                      $background);
+  }
+}
+
+//
+// Gnome Weather
+//
+
+@define-color weather_temp_chart_fill_color #{rgba($warning, 0.5)};
+@define-color weather_temp_chart_stroke_color #{darken($warning, 10%)};
+@define-color weather_thermometer_warm_color #{if($variant == 'light', $yellow-dark, $yellow-light)};
+@define-color weather_thermometer_cold_color #{if($variant == 'light', $blue-dark, $blue-light)};
+
+$weather_thermometer_high_color: $yellow-light;
+$weather_thermometer_low_color: $blue-light;
+$weather_forecast_color: #ae7b03;
+
+#places-label {
+  font-weight: bold;
+}
+
+#temperature-label {
+  font-size: 32pt;
+  font-weight: 900;
+  margin-left: 9px;
+}
+
+#conditions-grid *:backdrop {
+  color: $text-secondary;
+}
+
+.content-view.cell {
+  font-weight: bold;
+}
+
+#locationEntry {
+  margin: $space-size;
+}
+
+.weather-popover {
+  margin-top: $space-size;
+}
+
+.forecast-card {
+  transition: border-radius 100ms ease-out;
+  border-radius: $corner-radius;
+}
+
+.forecast-card separator {
+  background-color: $border;
+}
+
+#daily-forecast-box {
+  > separator:last-child {
+    background-color: transparent;
+    min-width: 0;
+  }
+}
+
+#conditions-grid,
+#attributionGrid {
+  margin-left: $space-size * 3;
+  margin-right: $space-size * 3;
+}
+
+#weather-page .small .forecast-card {
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: 0;
+  border-width: 1px 0;
+}
+
+.forecast-temperature-label {
+  font-weight: bold;
+  color: $weather_forecast_color;
+}
+
+WeatherThermometer {
+  margin-bottom: $space-size * 2;
+}
+
+WeatherThermometer > label.high {
+  font-weight: bold;
+  color: $weather_thermometer_high_color;
+}
+
+WeatherThermometer > label.low {
+  font-weight: bold;
+  color: $weather_thermometer_low_color;
+}
+
+.forecast-button {
+  margin: 0 $space-size * 2;
+}
+
+.forecast-graphic {
+  margin: $space-size * 3;
+}
+
+button.osd.circular {
+  border-radius: $circular-radius;
+  min-width: $small-size;
+  min-height: $small-size;
+}
+
+button.osd.circular > image {
+  padding: 0;
+}
+
+scrolledwindow.inline list,
+scrolledwindow.inline listview {
+  background: none;
+  color: inherit;
+}
+
+scrolledwindow.inline undershoot.top {
+  box-shadow: inset 0 1px $border;
+}
+
+.search-view {
+  background-color: $blue-dark;
+  color: on($blue-dark);
+}
+
+.search-view menubutton button:focus:focus-visible {
+  outline-color: rgba(white, 0.3);
+}
+
+image.circular {
+  min-width: $medium-size;
+  min-height: $medium-size;
+  padding: 0;
+  border-radius: $circular-radius;
+}
+
+// WeatherThermometerScale {
+//   border-radius: $circular-radius;
+//   background-image: linear-gradient(to bottom, $weather_thermometer_warm_color, $weather_thermometer_cold_color);
+//   margin: 0 36px;
+//   padding: 0;
+// }
+
+//
+// Gnome Clocks
+//
+
+.large-button {
+  padding: $space-size;
+}
+
+// alarms
+.alarm-time {
+  font-size: 2.5em;
+  font-weight: 300;
+}
+
+.clocks-ampm-toggle-button,
+.clocks-secondary-standalone-label {
+  font-size: 18pt;
+}
+
+.clocks-standalone-label,
+.clocks-ringing-label {
+  font-size: 6em;
+  font-weight: 300;
+}
+
+.clocks-ringing-title {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+.clocks-alarm-setup-time {
+  font-size: 32pt;
+}
+
+// Timer Panel
+.clocks-timer-label,
+.clocks-spinbutton {
+  font-size: 48pt;
+}
+
+// disguise insensitive spinbuttons as normal labels
+.timer-panel .timer-header {
+  font-size: 20pt;
+  font-weight: 300;
+}
+
+.timer-countdown {
+  font-size: 40pt;
+  font-weight: 300;
+}
+
+/* Stopwatch Panel */
+.lap-time {
+  font-weight: bold;
+}
+
+.stopped-stopwatch label,
+.running-stopwatch label,
+.paused-stopwatch label {
+  font-size: 70px;
+  font-weight: lighter;
+}
+
+.stopped-stopwatch .seconds-label {
+  font-weight: 300;
+}
+
+.running-stopwatch .seconds-label,
+.running-stopwatch .miliseconds-label {
+  color: $primary;
+}
+
+.stopped-stopwatch .miliseconds-label,
+.running-stopwatch .miliseconds-label,
+.paused-stopwatch .miliseconds-label {
+  font-size: 50px;
+}
+
+.running-stopwatch .seconds-label,
+.paused-stopwatch .seconds-label {
+  font-weight: 300;
+}
+
+// World
+.clock-location {
+  font-weight: bolder;
+}
+
+.hidden {
+  opacity: 0;
+}
+
+.clock-time {
+  font-size: 2em;
+  padding: 0.2em 0.5em;
+  border-radius: 1em;
+}
+
+.none .clock-time {
+  background: gtkalpha(currentColor, 0.2);
+}
+
+.night .clock-time {
+  color: $blue-dark;
+  background-color: gtkalpha($blue-light, 0.25);
+}
+
+.naut .clock-time,
+.astro .clock-time {
+  color: $orange-dark;
+  background-color: gtkalpha($orange-light, 0.25);
+}
+
+.civil .clock-time,
+.day .clock-time {
+  color: $yellow-dark;
+  background: gtkalpha($yellow-light, 0.25);
+}
+
+//
+// Builder
+//
+
+headerbar splitbutton {
+  notification button {
+    margin: 0;
+    min-height: $small-size;
+    min-width: $small-size;
+    padding: 0;
+  }
+}
+
+popover.background.global-search {
+  > arrow, > contents { padding: 0; }
+}
+
+panelframeswitcher {
+  padding: $space-size;
+  min-height: $medium-size;
+}
+
+.frameheader.header {
+  // min-height: $small-size;
+  background-color: $titlebar;
+
+  &:backdrop {
+    background-color: $titlebar-backdrop;
+  }
+
+  > button {
+    border: none;
+    margin: 0;
+    padding: $space-size / 2;
+  }
+
+  tabbar.inline {
+    > revealer > box {
+      min-height: $small-size;
+
+      .start-action {
+        padding: 0;
+        border: none;
+      }
+
+      .end-action {
+        padding: 0;
+        border-left: 1px solid $border;
+
+        button { margin: $space-size; }
+      }
+
+      tabbox {
+        border: none;
+        background: none;
+      }
+    }
+  }
+}
+
+panelstatusbar {
+  > menubutton > button,
+  > paneltogglebutton button { border-radius: 0; }
+}
+
+// Setting window
+.style-variant {
+  padding: 0 $space-size * 2;
+
+  button.toggle {
+    padding: 0;
+
+    &, &:hover, &:focus, &:active, &:checked {
+      background: none;
+      outline: none;
+      border: none;
+      box-shadow: none;
+    }
+
+    > stylevariantpreview > .wallpaper {
+      border-radius: $corner-radius;
+      outline-color: transparent;
+      outline-width: 3px;
+      outline-offset: $space-size / 2;
+      outline-style: solid;
+      box-shadow: none;
+    }
+
+    &:hover > stylevariantpreview > .wallpaper {
+      outline-color: $fill;
+    }
+
+    &:active > stylevariantpreview > .wallpaper {
+      outline-color: $track;
+    }
+
+    &:checked > stylevariantpreview > .wallpaper {
+      outline-color: $primary;
+    }
+  }
+}
+
+//
+// Amberol
+//
+
+playlistview {
+  scrollbar {
+    &.overlay-indicator {
+      &.dragging,
+      &.hovering { background-color: transparent; }
+    }
+  }
+
+  queuerow {
+    picture.cover,
+    image.card { border: none; }
+  }
+}
+
+//
+// Console
+//
+
+.exit-info {
+  padding: 6px;
+  border-top: 2px solid $primary;
+  background: rgba($primary, 0.9);
+  color: on($primary);
+}
+
+.error .exit-info {
+  border-top: 2px solid $error;
+  background: rgba($error, 0.9);
+  color: on($error);
+}
+
+//
+// dialogs
+//
+
+window.dialog {
+  > .dialog-vbox > box > scrolledwindow > viewport > widget {
+    > list.boxed-list {
+      border: none;
+      border-radius: 0;
+
+      > row {
+        &:first-child, &:last-child { border-radius: 0; }
+      }
+    }
+  }
+}
diff --git a/src/sass/libadwaita/apps/_calendar.scss b/src/sass/libadwaita/apps/_calendar.scss
new file mode 100644
index 00000000..7e9381aa
--- /dev/null
+++ b/src/sass/libadwaita/apps/_calendar.scss
@@ -0,0 +1,1595 @@
+
+//
+// Nautilus
+//
+.nautilus-window {
+  placesview {
+    label { color: $text-secondary; }
+  }
+
+  .nautilus-grid-view {
+    child.activatable {
+      @extend %row_activatable;
+    }
+  }
+
+  .floating-bar {
+    min-height: 32px;
+    padding: 0;
+    margin: $space-size;
+    border-style: none;
+    border-radius: $corner-radius;
+    background-color: $primary;
+    color: on($primary);
+    box-shadow: $shadow-z3;
+
+    button {
+      margin: (32px - $small-size) / 2;
+      color: on($primary);
+
+      @extend %small-button;
+    }
+  }
+}
+
+#NautilusQueryEditor { // search entry
+  > menubutton > button.image-button {
+    min-width: 24px;
+    min-height: 24px;
+  }
+
+  > text, > box, > menubutton > button.image-button {
+    margin: $space-size 0;
+  }
+}
+
+#NautilusQueryEditorTag {
+  background-color: $divider;
+
+  > button.image-button {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+#NautilusPathBar {
+  background-color: $titlebar-fill;
+  border-radius: $corner-radius;
+  margin: $space-size 0;
+
+  .content-pane & {
+    background-color: $fill;
+  }
+}
+
+#NautilusPathButton {
+  margin: 0 $space-size / 2;
+  border-radius: $corner-radius;
+
+  &.current-dir {
+    color: $titlebar-text;
+
+    &:hover, &:active {
+      background: none;
+      box-shadow: none;
+    }
+  }
+
+  .content-pane &.current-dir {
+    color: $text;
+  }
+
+  &:first-child { margin-left: 0; }
+}
+
+#NautilusViewCell {
+  clamp box {
+    margin: 0;
+    border-spacing: 0;
+  }
+}
+
+navigation-view-page {
+  > toolbarview > scrolledwindow > viewport > clamp > box.medium > box > stack > button {
+    margin-top: $space-size * 2;
+  }
+}
+
+//
+// Gnome Control Center
+//
+
+window.dialog {
+  > box > stack > box > box {
+    > notebook.frame {
+      border-width: 0 0 0 1px;
+      border-radius: 0;
+    }
+  }
+}
+
+.background-thumbnail {
+  > button.remove-button {
+    margin: $space-size;
+  }
+}
+
+//
+// Calculator
+//
+
+.display-container {
+  .small &.card {
+    border-radius: 0;
+    box-shadow: none;
+    border-width: 0 0 1px 0;
+  }
+
+  .history-view { background-color: $base; }
+
+  #displayitem {
+    padding: 0 12px 8px 0;
+    font-size: 1.4em;
+    border-top: 1px solid $border;
+  }
+}
+
+.math-buttons button {
+  font-size: 1.1em;
+  padding: 2px $space-size;
+
+  &.text-button {
+    padding-left: $space-size * 2 + 4px;
+    padding-right: $space-size * 2 + 4px;
+  }
+}
+
+leaflet {
+  button.number-button {
+    background-color: rgba($text, 0.1);
+
+    &:hover {
+      background-color: rgba($text, 0.2);
+    }
+
+    &:active {
+      background-color: rgba($text, 0.3);
+    }
+  }
+}
+
+//
+// Calendar
+//
+
+// labels
+label {
+  &.primary-label, &.month-name, &.secondary-label {
+    font-size: 16pt;
+    font-weight: bold;
+    padding: $space-size * 2;
+  }
+
+  &.primary-label, &.month-name {
+    color: $primary;
+  }
+
+  &.secondary-label {
+    color: $text-disabled;
+  }
+}
+
+calendar-view {
+  font-size: 10pt;
+
+  &:selected {
+    color: $primary;
+    font-weight: bold;
+  }
+}
+
+calendar-view.header,
+label.header {
+  font-size: 10pt;
+  font-weight: bold;
+  color: $text-disabled;
+}
+
+calendar-view.current,
+weekgrid.current {
+  background-color: gtkalpha($primary, 0.3);
+}
+
+popover.events {
+  background-color: $popover;
+  padding: 0;
+
+  box {
+    border-top-left-radius: $corner-radius;
+    border-top-right-radius: $corner-radius;
+  }
+
+  list {
+    background-color: $base;
+    border-radius: $corner-radius;
+  }
+
+  scrolledwindow {
+    border-width: 0;
+  }
+
+  button {
+    border-radius: $corner-radius;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-style: solid none none;
+    box-shadow: none;
+  }
+}
+
+// Event widget
+event {
+  margin: 1px;
+  font-size: 0.9rem;
+
+  widget.content {
+    margin: 4px;
+  }
+
+  &.timed,
+  &:not(.slanted):not(.slanted-start):not(.slanted-end) {
+    border-radius: $corner-radius;
+  }
+
+  &.timed widget.edge {
+    border-radius: $corner-radius / 2;
+    min-width: 5px;
+  }
+
+  &.slanted-start,
+  &.slanted-end:dir(rtl) {
+    padding-left: $space-size * 2 + 4px;
+    border-radius: 0 $corner-radius / 2 $corner-radius / 2 0;
+  }
+
+  &.slanted-end,
+  &.slanted-start:dir(rtl) {
+    padding-right: $space-size * 2 + 4px;
+    border-radius: $corner-radius / 2 0 0 $corner-radius / 2;
+  }
+
+  &:not(.timed).color-dark {
+    color: white;
+    outline-color: rgba(0, 0, 0, 0.3);
+  }
+
+  &.timed,
+  &:not(.timed).color-light {
+    color: gtkalpha(black, 0.75);
+    outline-color: rgba(255, 255, 255, 0.5);
+  }
+
+}
+
+// Event Popover
+popover.event-popover,
+popover.event-popover > contents {
+  padding: 0;
+}
+
+.search-viewport {
+  background-color: $base;
+}
+
+// calendar popover
+.calendar-list {
+  background-color: transparent;
+
+  > list {
+    border-radius: 4px;
+  }
+}
+
+// defeats the ugly hover effect of the calendar color dot on buttons
+.calendar-color-image {
+  -gtk-icon-filter: none;
+}
+
+// adds a subtle shadow to the calendar color dot when it makes sense
+image.calendar-color-image,
+button:active:not(:backdrop) .calendar-color-image,
+button:checked:not(:backdrop) .calendar-color-image,
+.calendars-list .calendar-color-image:not(:backdrop):not(:disabled),
+.calendar-list .calendar-color-image:not(:backdrop):not(:disabled),
+.sources-button:not(:backdrop):not(:disabled) .calendar-color-image {
+  -gtk-icon-shadow: 0 1px gtkalpha(black, 0.1);
+}
+
+// Date chooser
+
+// month/year controls
+datechooser {
+  navigator { // add some space between the two controls
+    margin-right: $space-size;
+    margin-left: $space-size;
+    margin-bottom: $space-size;
+  }
+
+  navigator {
+    label { font-weight: bold; }
+
+    button.flat,
+    button.toggle,
+    button.image-button {
+      min-height: $medium-size;
+      min-width: $medium-size;
+      padding: 0;
+    }
+  }
+
+  // day names and week numbers
+  .weeknum, .weekday {
+    color: $text-disabled;
+    font-size: smaller;
+  }
+
+  // days
+  button.day {
+    font-size: 10pt;
+    font-weight: normal;
+    margin: $space-size / 2;
+    padding: 0;
+    min-height: $medium-size;
+    min-width: $medium-size;
+    transition: none;
+
+    dot {
+      background-color: $text;
+      border-radius: 50%;
+      min-height: $space-size / 2;
+      min-width: $space-size / 2;
+    }
+
+    &:selected, &.today:selected {
+      background-color: $primary;
+      color: on($primary);
+      font-weight: bold;
+
+      dot { background-color: on($primary); }
+    }
+
+    &.today {
+      color: $primary;
+
+      dot { background-color: $primary; }
+    }
+
+    &.other-month {
+      &:not(:hover),
+      &:backdrop {
+        color: gtkalpha(currentColor, 0.1);
+
+        dot { background-color: gtkalpha(currentColor, 0.1); }
+      }
+
+      &:hover:not(:backdrop) {
+        color: $text-disabled;
+
+        dot { background-color: $text-disabled; }
+      }
+    }
+  }
+}
+
+// Week View CSS
+.week-header {
+  padding: 0;
+
+  & > box:first-child {
+    border-bottom: 1px solid $border;
+  }
+
+  .week-number {
+    font-size: 16pt;
+    font-weight: bold;
+    padding: $space-size * 2 $space-size * 2 $space-size * 3 $space-size * 2;
+    color: $track;
+  }
+
+  &.week-temperature {
+    font-size: 10pt;
+    font-weight: bold;
+    color: $text-disabled;
+  }
+
+  &.lines {
+    color: $border;
+  }
+}
+
+weekhourbar > label {
+  font-size: 10pt;
+  padding: 4px $space-size;
+}
+
+.week-view .lines {
+  color: $border;
+}
+
+weekgrid > widget.now-strip {
+  background-color: gtkalpha($primary, 0.8);
+  margin: 0 0 0 1px;
+  min-height: 3px;
+}
+
+weekgrid,
+.week-header {
+  &:selected, &.dnd {
+    background-color: gtkalpha($primary, 0.25);
+  }
+}
+
+// Month cell
+monthcell {
+  border: solid 1px $border;
+  border-width: 1px 0 0 1px;
+  background-color: transparent;
+  transition: background-color 200ms;
+
+  &:hover:not(.out-of-month):not(.today) {
+    background-color: $base-alt;
+    transition: background-color 200ms;
+    color: $text;
+  }
+
+  &:selected {
+    background-color: gtkalpha($primary, 0.1);
+
+    &:hover {
+      background-color: gtkalpha($primary, 0.2);
+    }
+
+    label.day-label { font-weight: bold; }
+  }
+
+  &:nth-child(7n + 1) { border-left-width: 0; }
+
+  &.today {
+    background-color: gtkalpha($primary, 0.2);
+
+    &:hover {
+      background-color: gtkalpha($primary, 0.3);
+      color: $primary;
+    }
+
+    &:selected {
+      background-color: gtkalpha($primary, 0.25);
+
+      &:hover {
+        background-color: gtkalpha($primary, 0.35);
+      }
+    }
+  }
+
+  label {
+    color: $text;
+    font-size: 0.9rem;
+
+    &.day-label {
+      font-size: 1rem;
+    }
+  }
+
+  &.out-of-month {
+    background-color: $fill;
+
+    label {
+      color: $text-secondary;
+    }
+  }
+
+  button {
+    padding: 0 $space-size;
+    border-radius: 0;
+    border-bottom: none;
+    border-right: none;
+  }
+}
+
+// Month popover
+monthpopover > box {
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+}
+
+.notes-section box > textview {
+  border-radius: $corner-radius;
+  padding: $space-size;
+
+  > text {
+    background: none;
+  }
+}
+
+// Agenda View CSS
+agenda-view {
+  list {
+    > row {
+      padding: 2px $space-size * 2;
+    }
+
+    > label {
+      padding: $space-size $space-size * 2;
+    }
+  }
+
+  > scrolledwindow > viewport > list.background {
+    background-color: transparent;
+  }
+}
+
+label.no-events {
+  font-style: italic;
+}
+
+// Search
+searchbutton > popover > arrow {
+  background: none;
+  border: none;
+}
+
+// Month selector
+datechooser {
+  padding: $space-size;
+
+  .current-week {
+    background: gtkalpha($titlebar, 0.7);
+    color: on($titlebar);
+    border-radius: $corner-radius;
+  }
+}
+
+menubutton {
+  &.sources-button {
+    margin-top: 0;
+    margin-bottom: 0;
+    border-radius: 0;
+    border-top-style: none;
+    border-bottom-style: none;
+    
+    &:hover:not(:backdrop) {
+      background-image: none;
+      text-shadow: none;
+    }
+
+    > button {
+      border-radius: 0;
+
+      .title {
+        font-size: 10pt;
+        font-weight: normal;
+        padding: 0 $space-size;
+      }
+
+      .subtitle {
+        font-size: 8pt;
+        padding: 0 $space-size;
+      }
+
+      .calendar-color-image {
+        -gtk-icon-size: 12px;
+      }
+    }
+  }
+
+  stack > box {
+    border-spacing: $space-size;
+  }
+
+  .topbar headerbar &.sources-button {
+    > button {
+      border-radius: 0 0 $corner-radius $corner-radius;
+    }
+  }
+}
+
+//
+// Contacts
+//
+
+.contacts-contact-list list.navigation-sidebar {
+  background: none;
+}
+
+//
+// Gnome Software
+//
+
+.details-page {
+  margin: $space-size * 4 0px;
+}
+
+.installed-overlay-box {
+  font-size: smaller;
+  background-color: $primary;
+  border-radius: 0;
+  color: on($primary);
+  text-shadow: 0 1px 0 rgba(black, 0.2);
+}
+
+screenshot-carousel box.frame {
+  border-width: 1px 0;
+  border-radius: 0;
+}
+
+screenshot-carousel button,
+.featured-carousel button {
+  margin: $space-size * 2;
+}
+
+.screenshot-image-main .image1,
+.screenshot-image-main .image2 {
+  margin-top: $space-size;
+  margin-bottom: $space-size * 2;
+  margin-left: $space-size;
+  margin-right: $space-size;
+}
+
+.app-tile-label {
+  font-size: 105%;
+}
+
+.review-textbox {
+  padding: $space-size;
+}
+
+.origin-rounded-box {
+  background-color: $divider;
+  border-radius: $circular-radius;
+  padding: $space-size - 2px;
+}
+
+.origin-beta {
+  color: $warning;
+}
+
+.origin-button > button {
+  padding: $space-size / 2 $space-size * 1.5;
+}
+
+.card flowboxchild {
+  &.card {
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    background: none;
+  }
+}
+
+.category-tile.card {
+  padding: $space-size * 3.5;
+  border: none;
+  border-radius: $corner-radius;
+  min-width: 140px;
+  font-weight: 900;
+  font-size: larger;
+  box-shadow: $shadow-z3;
+
+  &.category-tile-iconless {
+    padding: $space-size * 1.5 $space-size * 2.5;
+    min-width: 130px;
+    font-size: 105%;
+    font-weight: normal;
+    box-shadow: none;
+    background-color: $fill;
+  }
+
+  // Styling for specific category buttons.
+  &.category-create {
+    background: linear-gradient(180deg, #ce8cd7 0%, #2861c6 100%);
+    color: white;
+
+    &:hover {
+      background: linear-gradient(180deg, shade(#ce8cd7, 1.07) 0%, shade(#2861c6, 1.1) 100%);
+      color: white;
+    }
+
+    &:active {
+      background: linear-gradient(180deg, shade(#ce8cd7, .95) 0%, shade(#2861c6, .95) 100%);
+      color: white;
+    }
+  }
+
+  &.category-develop {
+    background: #5e5c64;
+    color: white;
+
+    &:hover {
+      background: shade(#5e5c64, 1.2);
+      color: white;
+    }
+
+    &:active {
+      background-color: shade(#5e5c64, .95);
+      color: white;
+    }
+  }
+
+  &.category-learn {
+    background: linear-gradient(180deg, #2ec27e 30%, #27a66c 100%);
+    color: white;
+
+    &:hover {
+      background: linear-gradient(180deg, shade(#2ec27e, 1.06) 30%, shade(#27a66c, 1.06) 100%);
+      color: white;
+    }
+
+    &:active {
+      background: linear-gradient(180deg, shade(#2ec27e, .95) 30%, shade(#27a66c, .95) 100%);
+      color: white;
+    }
+  }
+
+  &.category-play {
+    background: linear-gradient(75deg, #f9e2a7 0%, #eb5ec3 50%, #6d53e0 100%);
+    color: #393484;
+
+    &:hover {
+      background: linear-gradient(75deg, shade(#f9e2a7, 1.07) 0%, shade(#eb5ec3, 1.07) 50%, shade(#6d53e0, 1.07) 100%);
+      color: #393484;
+    }
+
+    &:active {
+      background: linear-gradient(75deg, shade(#f9e2a7, .97) 0%, shade(#eb5ec3, .95) 50%, shade(#6d53e0, 1.07) 100%);
+      color: #393484;
+    }
+  }
+
+  &.category-socialize {
+    background: linear-gradient(90deg, #ef4e9b 0%, #f77466 100%);
+    color: $text-secondary;
+
+    &:hover {
+      background: linear-gradient(90deg, shade(#ef4e9b, 1.08) 0%, shade(#f77466, 1.08) 100%);
+    }
+
+    &:active {
+      background: linear-gradient(90deg, shade(#ef4e9b, .95) 0%, shade(#f77466, .95) 100%);
+    }
+  }
+
+  &.category-work {
+    padding: 1px; /* FIXME: work around https://gitlab.gnome.org/GNOME/gtk/-/issues/4324 */
+    color: #1c71d8;
+    background-color:#fdf8d7;
+    background-image: linear-gradient($border 1px, transparent 1px),
+             linear-gradient(90deg, $border 1px, transparent 1px);
+    background-size: 10px 10px, 10px 10px;
+    background-position: -1px -4px, center -1px;
+
+    &:hover {
+      color: #1c71d8;
+      background-color: lighten(#fdf8d7, 5%);
+      background-image: linear-gradient($border 1px, transparent 1px),
+               linear-gradient(90deg, $border 1px, transparent 1px);
+    }
+
+    &:active {
+      color: #1c71d8;
+      background-color: darken(#fdf8d7, 5%);
+      background-image: linear-gradient($border 1px, transparent 1px),
+               linear-gradient(90deg, $border 1px, transparent 1px);
+    }
+  }
+}
+
+clamp.medium .category-tile:not(.category-tile-iconless),
+clamp.large .category-tile:not(.category-tile-iconless) {
+  font-size: larger;
+}
+
+// The rest of the featured-tile CSS is loaded at runtime in gs-feature-tile.c
+.featured-tile {
+  padding: 0;
+  box-shadow: none;
+  color: $text;
+
+  label.title-1 {
+    margin-top: $space-size;
+    margin-bottom: $space-size;
+  }
+
+  &.narrow label.title-1 {
+    font-size: 16pt;
+  }
+}
+
+.application-details-infobar {
+  &, &.info {
+    background-color: $fill;
+    color: $text;
+    border: 1px solid $border;
+  }
+
+  &.warning {
+    background-color: $warning;
+    color: on($warning);
+    border: 1px solid on($warning, divider);
+  }
+}
+
+@keyframes install-progress-unknown-move {
+  0% { background-position: 0%; }
+  50% { background-position: 100%; }
+  100% { background-position: 0%; }
+}
+
+.application-details-description .button {
+  padding-left: $space-size * 4;
+  padding-right: $space-size * 4;
+}
+
+.install-progress {
+  background-image: linear-gradient(to top, $primary 2px, gtkalpha($primary, 0) 2px);
+  background-repeat: no-repeat;
+  background-position: 0 bottom;
+  background-size: 0;
+  transition: none;
+}
+
+.install-progress:dir(rtl) { background-position: 100% bottom; }
+
+.review-row > * {
+  margin: $space-size * 2;
+}
+
+.review-row button { font-size: smaller; }
+
+.review-row .vote-buttons button {
+  margin-right: -1px;
+}
+
+// this is the separator between yes and no vote buttons, gtk+ 3.20 only
+.review-row .vote-buttons button:not(:first-child) {
+  border-image: linear-gradient(to top, $border, $border) 0 0 0 1 / 5px 0 5px 1px;
+}
+
+.review-row .vote-buttons button:hover,
+.review-row .vote-buttons button:active,
+.review-row .vote-buttons button:hover + button,
+.review-row .vote-buttons button:active + button {
+  border-image: none;
+}
+
+review-bar {
+  color: $text-disabled;
+  background-image: none;
+  background-color: $track;
+}
+
+.review-histogram star-image {
+  color: $text-disabled;
+}
+
+.version-arrow-label {
+  font-size: x-small;
+}
+
+.overview-more-button {
+  font-size: smaller;
+  padding: 0 $space-size * 2 + 4px;
+}
+
+.app-row-origin-text {
+  font-size: smaller;
+}
+
+.app-listbox-header {
+  padding: $space-size;
+  border-bottom: 1px solid $border;
+}
+
+.image-list {
+  background-color: transparent;
+}
+
+box.star {
+  background-color: transparent;
+  background-image: none;
+}
+
+button.star {
+  outline-offset: 0;
+  background-color: transparent;
+  background-image: none;
+  border-image: none;
+  border-radius: 0;
+  border-width: 0;
+  padding: 0;
+  box-shadow: none;
+  outline-offset: -1px;
+}
+
+star-image {
+  color: $yellow-dark;
+}
+
+.dimmer-label {
+  opacity: 0.25;
+}
+
+.update-failed-details {
+  font-family: Monospace;
+  font-size: smaller;
+  padding: $space-size * 2 + 4px;
+}
+
+.upgrade-banner {
+  padding: 0px;
+  border-radius: $corner-radius;
+  border: none;
+}
+
+.upgrade-banner-background {
+  background: linear-gradient(to bottom, $green-light, $blue-light);
+  color: white;
+}
+
+.upgrade-buttons #button_upgrades_install {
+  padding-left: $space-size * 2 + 4px;
+  padding-right: $space-size * 2 + 4px;
+}
+
+scrolledwindow.list-page > viewport > clamp > box {
+  margin: $space-size * 4 $space-size * 2;
+  border-spacing: $space-size * 4;
+}
+
+.update-preferences preferencesgroup > box > box {
+  margin-top: $space-size * 3;
+}
+
+.section > label:not(:first-child) { margin-top: $space-size; }
+
+.section > box:not(:first-child) { margin-top: $space-size * 2; }
+
+clamp.status-page {
+	margin: $space-size * 6 $space-size * 2;
+}
+
+clamp.status-page .iconbox {
+  min-height: 128px;
+  min-width: 128px;
+}
+
+clamp.status-page .icon {
+  color: $text-disabled;
+  min-height: 32px;
+  min-width: 32px;
+}
+
+clamp.status-page .icon:not(:last-child) {
+  margin-bottom: $space-size * 6;
+}
+
+clamp.status-page .title:not(:last-child) {
+  margin-bottom: $space-size * 2;
+}
+
+app-context-bar {
+  .context-tile {
+    border: 1px solid $border;
+    background-color: transparent;
+    border-radius: 0;
+    padding: $space-size * 4 $space-size * 2 $space-size * 3.5 $space-size * 2;
+    outline-offset: 5px;
+    transition-property: outline, outline-offset, background-image;
+    border-bottom: none;
+    border-right: none;
+
+    &:hover {
+      background-image: none;
+      background-color: $overlay-hover;
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-color: $overlay-active;
+    }
+
+    &:focus:focus-visible {
+      outline-offset: -1px;
+    }
+  }
+
+  &.horizontal box:first-child .context-tile:first-child,
+  &.vertical .context-tile:first-child {
+    border-left: none;
+  }
+
+  &.horizontal .context-tile,
+  &.vertical box:first-child .context-tile {
+  	border-top: none;
+  }
+
+  > box:not(:first-child) > button.flat {
+    border-radius: 0;
+
+    &:last-child {
+      border-radius: 0 $corner-radius $corner-radius 0;
+    }
+  }
+
+  > box:first-child > button.flat {
+    border-radius: 0;
+
+    &:first-child {
+      border-radius: $corner-radius 0 0 $corner-radius;
+    }
+  }
+
+  > box > button.flat {
+    border-left-color: $border;
+  }
+}
+
+carousel.card {
+  border: none;
+  background-color: $fill;
+}
+
+.context-tile-lozenge {
+  min-height: 28px;
+  min-width: 28px;
+  padding: $space-size;
+  font-size: 18px;
+  font-weight: bold;
+  border-radius: $circular-radius;
+
+  &.large {
+    font-size: 24px;
+    padding: 16px;
+    min-width: 24px;  /* 60px minus the left and right padding */
+    min-height: 24px;  /* 60px minus the top and bottom padding */
+  }
+
+  &.wide-image image {
+    margin-top: -28px;
+    margin-bottom: -28px;
+  }
+
+  image { -gtk-icon-style: symbolic; }
+
+  &.grey {
+    color: $text;
+    background-color: $divider;
+  }
+
+  &.green, &.details-rating-0 {
+    color: darken($success, 15%);
+    background-color: rgba($success, 0.15);
+  }
+
+  &.blue,
+  &.details-rating-5 {
+    color: $blue-light;
+    background-color: rgba($blue-light, 0.15);
+  }
+
+  &.yellow, &.details-rating-12 {
+    color: darken($warning, 15%);
+    background-color: rgba($warning, 0.15);
+  }
+
+  &.details-rating-15 {
+    color: $orange-light;
+    background-color: rgba($orange-light, .15);
+  }
+
+  &.red, &.details-rating-18 {
+    color: darken($error, 15%);
+    background-color: rgba($error, 0.15);
+  }
+}
+
+.eol-red {
+  font-weight: bold;
+  color: $error;
+}
+
+window.narrow .app-title {
+  font-size: 16pt;
+}
+
+window.narrow .app-developer {
+  font-size: small;
+}
+
+.install-progress-label {
+  font-size: smaller;
+  font-feature-settings: "tnum";
+}
+
+scrolledwindow.fake-adw-status-page > viewport > box { margin: $space-size * 6 $space-size * 2; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp:not(:last-child) > box { margin-bottom: $space-size * 6; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .icon:not(:last-child) { margin-bottom: $space-size * 6; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: $space-size * 2; }
+
+statuspage.icon-dropshadow image.icon {
+	-gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05),
+	                  0 -1px rgba(0,0,0,0.05),
+	                  1px 0 rgba(0,0,0,0.1),
+	                  0 1px rgba(0,0,0,0.3),
+	                  -1px 0 rgba(0,0,0,0.1);
+}
+
+window.info scrollbar.vertical {
+  margin-top: 48px;
+  background: none;
+  box-shadow: none;
+}
+
+window.info scrollbar.vertical trough {
+  margin-top: 0;
+}
+
+// GsAppRow
+row.app > box.header {
+  margin-left: $space-size * 2;
+  margin-right: $space-size * 2;
+}
+
+row.app > box.header {
+  border-spacing: $space-size * 2;
+}
+
+row.app > box.header > image {
+  margin-top: $space-size * 2;
+  margin-bottom: $space-size * 2;
+}
+
+row.app label.warning {
+  color: $error;
+}
+
+// GtkSpinner
+
+// Ensure the spinner is hidden before the animation is triggered.
+@keyframes pre-delay {
+  from { opacity: 0; }
+  to { opacity: 0; }
+}
+
+@keyframes fade-in {
+  from { filter: opacity(0%); }
+}
+
+/* Give a fade-in animation to spinners. */
+spinner.fade-in:checked {
+  animation: pre-delay 0.5s linear 1, fade-in 1s linear 1, spin 1s linear infinite;
+  animation-delay: 0s, 0.5s, 0.5s;
+}
+
+// Leaflets
+window > contents > leaflet { // Gnome control center
+  > box > stack.background {
+    background-color: transparent;
+    background-image: linear-gradient(to bottom,
+                                      transparent,
+                                      transparent $large-size,
+                                      $background $large-size,
+                                      $background);
+  }
+}
+
+//
+// Gnome Weather
+//
+
+@define-color weather_temp_chart_fill_color #{rgba($warning, 0.5)};
+@define-color weather_temp_chart_stroke_color #{darken($warning, 10%)};
+@define-color weather_thermometer_warm_color #{if($variant == 'light', $yellow-dark, $yellow-light)};
+@define-color weather_thermometer_cold_color #{if($variant == 'light', $blue-dark, $blue-light)};
+
+$weather_thermometer_high_color: $yellow-light;
+$weather_thermometer_low_color: $blue-light;
+$weather_forecast_color: #ae7b03;
+
+#places-label {
+  font-weight: bold;
+}
+
+#temperature-label {
+  font-size: 32pt;
+  font-weight: 900;
+  margin-left: 9px;
+}
+
+#conditions-grid *:backdrop {
+  color: $text-secondary;
+}
+
+.content-view.cell {
+  font-weight: bold;
+}
+
+#locationEntry {
+  margin: $space-size;
+}
+
+.weather-popover {
+  margin-top: $space-size;
+}
+
+.forecast-card {
+  transition: border-radius 100ms ease-out;
+  border-radius: $corner-radius;
+}
+
+.forecast-card separator {
+  background-color: $border;
+}
+
+#daily-forecast-box {
+  > separator:last-child {
+    background-color: transparent;
+    min-width: 0;
+  }
+}
+
+#conditions-grid,
+#attributionGrid {
+  margin-left: $space-size * 3;
+  margin-right: $space-size * 3;
+}
+
+#weather-page .small .forecast-card {
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: 0;
+  border-width: 1px 0;
+}
+
+.forecast-temperature-label {
+  font-weight: bold;
+  color: $weather_forecast_color;
+}
+
+WeatherThermometer {
+  margin-bottom: $space-size * 2;
+}
+
+WeatherThermometer > label.high {
+  font-weight: bold;
+  color: $weather_thermometer_high_color;
+}
+
+WeatherThermometer > label.low {
+  font-weight: bold;
+  color: $weather_thermometer_low_color;
+}
+
+.forecast-button {
+  margin: 0 $space-size * 2;
+}
+
+.forecast-graphic {
+  margin: $space-size * 3;
+}
+
+button.osd.circular {
+  border-radius: $circular-radius;
+  min-width: $small-size;
+  min-height: $small-size;
+}
+
+button.osd.circular > image {
+  padding: 0;
+}
+
+scrolledwindow.inline list,
+scrolledwindow.inline listview {
+  background: none;
+  color: inherit;
+}
+
+scrolledwindow.inline undershoot.top {
+  box-shadow: inset 0 1px $border;
+}
+
+.search-view {
+  background-color: $blue-dark;
+  color: on($blue-dark);
+}
+
+.search-view menubutton button:focus:focus-visible {
+  outline-color: rgba(white, 0.3);
+}
+
+image.circular {
+  min-width: $medium-size;
+  min-height: $medium-size;
+  padding: 0;
+  border-radius: $circular-radius;
+}
+
+// WeatherThermometerScale {
+//   border-radius: $circular-radius;
+//   background-image: linear-gradient(to bottom, $weather_thermometer_warm_color, $weather_thermometer_cold_color);
+//   margin: 0 36px;
+//   padding: 0;
+// }
+
+//
+// Gnome Clocks
+//
+
+.large-button {
+  padding: $space-size;
+}
+
+// alarms
+.alarm-time {
+  font-size: 2.5em;
+  font-weight: 300;
+}
+
+.clocks-ampm-toggle-button,
+.clocks-secondary-standalone-label {
+  font-size: 18pt;
+}
+
+.clocks-standalone-label,
+.clocks-ringing-label {
+  font-size: 6em;
+  font-weight: 300;
+}
+
+.clocks-ringing-title {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+.clocks-alarm-setup-time {
+  font-size: 32pt;
+}
+
+// Timer Panel
+.clocks-timer-label,
+.clocks-spinbutton {
+  font-size: 48pt;
+}
+
+// disguise insensitive spinbuttons as normal labels
+.timer-panel .timer-header {
+  font-size: 20pt;
+  font-weight: 300;
+}
+
+.timer-countdown {
+  font-size: 40pt;
+  font-weight: 300;
+}
+
+/* Stopwatch Panel */
+.lap-time {
+  font-weight: bold;
+}
+
+.stopped-stopwatch label,
+.running-stopwatch label,
+.paused-stopwatch label {
+  font-size: 70px;
+  font-weight: lighter;
+}
+
+.stopped-stopwatch .seconds-label {
+  font-weight: 300;
+}
+
+.running-stopwatch .seconds-label,
+.running-stopwatch .miliseconds-label {
+  color: $primary;
+}
+
+.stopped-stopwatch .miliseconds-label,
+.running-stopwatch .miliseconds-label,
+.paused-stopwatch .miliseconds-label {
+  font-size: 50px;
+}
+
+.running-stopwatch .seconds-label,
+.paused-stopwatch .seconds-label {
+  font-weight: 300;
+}
+
+// World
+.clock-location {
+  font-weight: bolder;
+}
+
+.hidden {
+  opacity: 0;
+}
+
+.clock-time {
+  font-size: 2em;
+  padding: 0.2em 0.5em;
+  border-radius: 1em;
+}
+
+.none .clock-time {
+  background: gtkalpha(currentColor, 0.2);
+}
+
+.night .clock-time {
+  color: $blue-dark;
+  background-color: gtkalpha($blue-light, 0.25);
+}
+
+.naut .clock-time,
+.astro .clock-time {
+  color: $orange-dark;
+  background-color: gtkalpha($orange-light, 0.25);
+}
+
+.civil .clock-time,
+.day .clock-time {
+  color: $yellow-dark;
+  background: gtkalpha($yellow-light, 0.25);
+}
+
+//
+// Builder
+//
+
+headerbar splitbutton {
+  notification button {
+    margin: 0;
+    min-height: $small-size;
+    min-width: $small-size;
+    padding: 0;
+  }
+}
+
+popover.background.global-search {
+  > arrow, > contents { padding: 0; }
+}
+
+panelframeswitcher {
+  padding: $space-size;
+  min-height: $medium-size;
+}
+
+.frameheader.header {
+  // min-height: $small-size;
+  background-color: $titlebar;
+
+  &:backdrop {
+    background-color: $titlebar-backdrop;
+  }
+
+  > button {
+    border: none;
+    margin: 0;
+    padding: $space-size / 2;
+  }
+
+  tabbar.inline {
+    > revealer > box {
+      min-height: $small-size;
+
+      .start-action {
+        padding: 0;
+        border: none;
+      }
+
+      .end-action {
+        padding: 0;
+        border-left: 1px solid $border;
+
+        button { margin: $space-size; }
+      }
+
+      tabbox {
+        border: none;
+        background: none;
+      }
+    }
+  }
+}
+
+panelstatusbar {
+  > menubutton > button,
+  > paneltogglebutton button { border-radius: 0; }
+}
+
+// Setting window
+.style-variant {
+  padding: 0 $space-size * 2;
+
+  button.toggle {
+    padding: 0;
+
+    &, &:hover, &:focus, &:active, &:checked {
+      background: none;
+      outline: none;
+      border: none;
+      box-shadow: none;
+    }
+
+    > stylevariantpreview > .wallpaper {
+      border-radius: $corner-radius;
+      outline-color: transparent;
+      outline-width: 3px;
+      outline-offset: $space-size / 2;
+      outline-style: solid;
+      box-shadow: none;
+    }
+
+    &:hover > stylevariantpreview > .wallpaper {
+      outline-color: $fill;
+    }
+
+    &:active > stylevariantpreview > .wallpaper {
+      outline-color: $track;
+    }
+
+    &:checked > stylevariantpreview > .wallpaper {
+      outline-color: $primary;
+    }
+  }
+}
+
+//
+// Amberol
+//
+
+playlistview {
+  scrollbar {
+    &.overlay-indicator {
+      &.dragging,
+      &.hovering { background-color: transparent; }
+    }
+  }
+
+  queuerow {
+    picture.cover,
+    image.card { border: none; }
+  }
+}
+
+//
+// Console
+//
+
+.exit-info {
+  padding: 6px;
+  border-top: 2px solid $primary;
+  background: rgba($primary, 0.9);
+  color: on($primary);
+}
+
+.error .exit-info {
+  border-top: 2px solid $error;
+  background: rgba($error, 0.9);
+  color: on($error);
+}
+
+//
+// dialogs
+//
+
+window.dialog {
+  > .dialog-vbox > box > scrolledwindow > viewport > widget {
+    > list.boxed-list {
+      border: none;
+      border-radius: 0;
+
+      > row {
+        &:first-child, &:last-child { border-radius: 0; }
+      }
+    }
+  }
+}
diff --git a/src/sass/libadwaita/apps/_clocks.scss b/src/sass/libadwaita/apps/_clocks.scss
new file mode 100644
index 00000000..7e9381aa
--- /dev/null
+++ b/src/sass/libadwaita/apps/_clocks.scss
@@ -0,0 +1,1595 @@
+
+//
+// Nautilus
+//
+.nautilus-window {
+  placesview {
+    label { color: $text-secondary; }
+  }
+
+  .nautilus-grid-view {
+    child.activatable {
+      @extend %row_activatable;
+    }
+  }
+
+  .floating-bar {
+    min-height: 32px;
+    padding: 0;
+    margin: $space-size;
+    border-style: none;
+    border-radius: $corner-radius;
+    background-color: $primary;
+    color: on($primary);
+    box-shadow: $shadow-z3;
+
+    button {
+      margin: (32px - $small-size) / 2;
+      color: on($primary);
+
+      @extend %small-button;
+    }
+  }
+}
+
+#NautilusQueryEditor { // search entry
+  > menubutton > button.image-button {
+    min-width: 24px;
+    min-height: 24px;
+  }
+
+  > text, > box, > menubutton > button.image-button {
+    margin: $space-size 0;
+  }
+}
+
+#NautilusQueryEditorTag {
+  background-color: $divider;
+
+  > button.image-button {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+#NautilusPathBar {
+  background-color: $titlebar-fill;
+  border-radius: $corner-radius;
+  margin: $space-size 0;
+
+  .content-pane & {
+    background-color: $fill;
+  }
+}
+
+#NautilusPathButton {
+  margin: 0 $space-size / 2;
+  border-radius: $corner-radius;
+
+  &.current-dir {
+    color: $titlebar-text;
+
+    &:hover, &:active {
+      background: none;
+      box-shadow: none;
+    }
+  }
+
+  .content-pane &.current-dir {
+    color: $text;
+  }
+
+  &:first-child { margin-left: 0; }
+}
+
+#NautilusViewCell {
+  clamp box {
+    margin: 0;
+    border-spacing: 0;
+  }
+}
+
+navigation-view-page {
+  > toolbarview > scrolledwindow > viewport > clamp > box.medium > box > stack > button {
+    margin-top: $space-size * 2;
+  }
+}
+
+//
+// Gnome Control Center
+//
+
+window.dialog {
+  > box > stack > box > box {
+    > notebook.frame {
+      border-width: 0 0 0 1px;
+      border-radius: 0;
+    }
+  }
+}
+
+.background-thumbnail {
+  > button.remove-button {
+    margin: $space-size;
+  }
+}
+
+//
+// Calculator
+//
+
+.display-container {
+  .small &.card {
+    border-radius: 0;
+    box-shadow: none;
+    border-width: 0 0 1px 0;
+  }
+
+  .history-view { background-color: $base; }
+
+  #displayitem {
+    padding: 0 12px 8px 0;
+    font-size: 1.4em;
+    border-top: 1px solid $border;
+  }
+}
+
+.math-buttons button {
+  font-size: 1.1em;
+  padding: 2px $space-size;
+
+  &.text-button {
+    padding-left: $space-size * 2 + 4px;
+    padding-right: $space-size * 2 + 4px;
+  }
+}
+
+leaflet {
+  button.number-button {
+    background-color: rgba($text, 0.1);
+
+    &:hover {
+      background-color: rgba($text, 0.2);
+    }
+
+    &:active {
+      background-color: rgba($text, 0.3);
+    }
+  }
+}
+
+//
+// Calendar
+//
+
+// labels
+label {
+  &.primary-label, &.month-name, &.secondary-label {
+    font-size: 16pt;
+    font-weight: bold;
+    padding: $space-size * 2;
+  }
+
+  &.primary-label, &.month-name {
+    color: $primary;
+  }
+
+  &.secondary-label {
+    color: $text-disabled;
+  }
+}
+
+calendar-view {
+  font-size: 10pt;
+
+  &:selected {
+    color: $primary;
+    font-weight: bold;
+  }
+}
+
+calendar-view.header,
+label.header {
+  font-size: 10pt;
+  font-weight: bold;
+  color: $text-disabled;
+}
+
+calendar-view.current,
+weekgrid.current {
+  background-color: gtkalpha($primary, 0.3);
+}
+
+popover.events {
+  background-color: $popover;
+  padding: 0;
+
+  box {
+    border-top-left-radius: $corner-radius;
+    border-top-right-radius: $corner-radius;
+  }
+
+  list {
+    background-color: $base;
+    border-radius: $corner-radius;
+  }
+
+  scrolledwindow {
+    border-width: 0;
+  }
+
+  button {
+    border-radius: $corner-radius;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-style: solid none none;
+    box-shadow: none;
+  }
+}
+
+// Event widget
+event {
+  margin: 1px;
+  font-size: 0.9rem;
+
+  widget.content {
+    margin: 4px;
+  }
+
+  &.timed,
+  &:not(.slanted):not(.slanted-start):not(.slanted-end) {
+    border-radius: $corner-radius;
+  }
+
+  &.timed widget.edge {
+    border-radius: $corner-radius / 2;
+    min-width: 5px;
+  }
+
+  &.slanted-start,
+  &.slanted-end:dir(rtl) {
+    padding-left: $space-size * 2 + 4px;
+    border-radius: 0 $corner-radius / 2 $corner-radius / 2 0;
+  }
+
+  &.slanted-end,
+  &.slanted-start:dir(rtl) {
+    padding-right: $space-size * 2 + 4px;
+    border-radius: $corner-radius / 2 0 0 $corner-radius / 2;
+  }
+
+  &:not(.timed).color-dark {
+    color: white;
+    outline-color: rgba(0, 0, 0, 0.3);
+  }
+
+  &.timed,
+  &:not(.timed).color-light {
+    color: gtkalpha(black, 0.75);
+    outline-color: rgba(255, 255, 255, 0.5);
+  }
+
+}
+
+// Event Popover
+popover.event-popover,
+popover.event-popover > contents {
+  padding: 0;
+}
+
+.search-viewport {
+  background-color: $base;
+}
+
+// calendar popover
+.calendar-list {
+  background-color: transparent;
+
+  > list {
+    border-radius: 4px;
+  }
+}
+
+// defeats the ugly hover effect of the calendar color dot on buttons
+.calendar-color-image {
+  -gtk-icon-filter: none;
+}
+
+// adds a subtle shadow to the calendar color dot when it makes sense
+image.calendar-color-image,
+button:active:not(:backdrop) .calendar-color-image,
+button:checked:not(:backdrop) .calendar-color-image,
+.calendars-list .calendar-color-image:not(:backdrop):not(:disabled),
+.calendar-list .calendar-color-image:not(:backdrop):not(:disabled),
+.sources-button:not(:backdrop):not(:disabled) .calendar-color-image {
+  -gtk-icon-shadow: 0 1px gtkalpha(black, 0.1);
+}
+
+// Date chooser
+
+// month/year controls
+datechooser {
+  navigator { // add some space between the two controls
+    margin-right: $space-size;
+    margin-left: $space-size;
+    margin-bottom: $space-size;
+  }
+
+  navigator {
+    label { font-weight: bold; }
+
+    button.flat,
+    button.toggle,
+    button.image-button {
+      min-height: $medium-size;
+      min-width: $medium-size;
+      padding: 0;
+    }
+  }
+
+  // day names and week numbers
+  .weeknum, .weekday {
+    color: $text-disabled;
+    font-size: smaller;
+  }
+
+  // days
+  button.day {
+    font-size: 10pt;
+    font-weight: normal;
+    margin: $space-size / 2;
+    padding: 0;
+    min-height: $medium-size;
+    min-width: $medium-size;
+    transition: none;
+
+    dot {
+      background-color: $text;
+      border-radius: 50%;
+      min-height: $space-size / 2;
+      min-width: $space-size / 2;
+    }
+
+    &:selected, &.today:selected {
+      background-color: $primary;
+      color: on($primary);
+      font-weight: bold;
+
+      dot { background-color: on($primary); }
+    }
+
+    &.today {
+      color: $primary;
+
+      dot { background-color: $primary; }
+    }
+
+    &.other-month {
+      &:not(:hover),
+      &:backdrop {
+        color: gtkalpha(currentColor, 0.1);
+
+        dot { background-color: gtkalpha(currentColor, 0.1); }
+      }
+
+      &:hover:not(:backdrop) {
+        color: $text-disabled;
+
+        dot { background-color: $text-disabled; }
+      }
+    }
+  }
+}
+
+// Week View CSS
+.week-header {
+  padding: 0;
+
+  & > box:first-child {
+    border-bottom: 1px solid $border;
+  }
+
+  .week-number {
+    font-size: 16pt;
+    font-weight: bold;
+    padding: $space-size * 2 $space-size * 2 $space-size * 3 $space-size * 2;
+    color: $track;
+  }
+
+  &.week-temperature {
+    font-size: 10pt;
+    font-weight: bold;
+    color: $text-disabled;
+  }
+
+  &.lines {
+    color: $border;
+  }
+}
+
+weekhourbar > label {
+  font-size: 10pt;
+  padding: 4px $space-size;
+}
+
+.week-view .lines {
+  color: $border;
+}
+
+weekgrid > widget.now-strip {
+  background-color: gtkalpha($primary, 0.8);
+  margin: 0 0 0 1px;
+  min-height: 3px;
+}
+
+weekgrid,
+.week-header {
+  &:selected, &.dnd {
+    background-color: gtkalpha($primary, 0.25);
+  }
+}
+
+// Month cell
+monthcell {
+  border: solid 1px $border;
+  border-width: 1px 0 0 1px;
+  background-color: transparent;
+  transition: background-color 200ms;
+
+  &:hover:not(.out-of-month):not(.today) {
+    background-color: $base-alt;
+    transition: background-color 200ms;
+    color: $text;
+  }
+
+  &:selected {
+    background-color: gtkalpha($primary, 0.1);
+
+    &:hover {
+      background-color: gtkalpha($primary, 0.2);
+    }
+
+    label.day-label { font-weight: bold; }
+  }
+
+  &:nth-child(7n + 1) { border-left-width: 0; }
+
+  &.today {
+    background-color: gtkalpha($primary, 0.2);
+
+    &:hover {
+      background-color: gtkalpha($primary, 0.3);
+      color: $primary;
+    }
+
+    &:selected {
+      background-color: gtkalpha($primary, 0.25);
+
+      &:hover {
+        background-color: gtkalpha($primary, 0.35);
+      }
+    }
+  }
+
+  label {
+    color: $text;
+    font-size: 0.9rem;
+
+    &.day-label {
+      font-size: 1rem;
+    }
+  }
+
+  &.out-of-month {
+    background-color: $fill;
+
+    label {
+      color: $text-secondary;
+    }
+  }
+
+  button {
+    padding: 0 $space-size;
+    border-radius: 0;
+    border-bottom: none;
+    border-right: none;
+  }
+}
+
+// Month popover
+monthpopover > box {
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+}
+
+.notes-section box > textview {
+  border-radius: $corner-radius;
+  padding: $space-size;
+
+  > text {
+    background: none;
+  }
+}
+
+// Agenda View CSS
+agenda-view {
+  list {
+    > row {
+      padding: 2px $space-size * 2;
+    }
+
+    > label {
+      padding: $space-size $space-size * 2;
+    }
+  }
+
+  > scrolledwindow > viewport > list.background {
+    background-color: transparent;
+  }
+}
+
+label.no-events {
+  font-style: italic;
+}
+
+// Search
+searchbutton > popover > arrow {
+  background: none;
+  border: none;
+}
+
+// Month selector
+datechooser {
+  padding: $space-size;
+
+  .current-week {
+    background: gtkalpha($titlebar, 0.7);
+    color: on($titlebar);
+    border-radius: $corner-radius;
+  }
+}
+
+menubutton {
+  &.sources-button {
+    margin-top: 0;
+    margin-bottom: 0;
+    border-radius: 0;
+    border-top-style: none;
+    border-bottom-style: none;
+    
+    &:hover:not(:backdrop) {
+      background-image: none;
+      text-shadow: none;
+    }
+
+    > button {
+      border-radius: 0;
+
+      .title {
+        font-size: 10pt;
+        font-weight: normal;
+        padding: 0 $space-size;
+      }
+
+      .subtitle {
+        font-size: 8pt;
+        padding: 0 $space-size;
+      }
+
+      .calendar-color-image {
+        -gtk-icon-size: 12px;
+      }
+    }
+  }
+
+  stack > box {
+    border-spacing: $space-size;
+  }
+
+  .topbar headerbar &.sources-button {
+    > button {
+      border-radius: 0 0 $corner-radius $corner-radius;
+    }
+  }
+}
+
+//
+// Contacts
+//
+
+.contacts-contact-list list.navigation-sidebar {
+  background: none;
+}
+
+//
+// Gnome Software
+//
+
+.details-page {
+  margin: $space-size * 4 0px;
+}
+
+.installed-overlay-box {
+  font-size: smaller;
+  background-color: $primary;
+  border-radius: 0;
+  color: on($primary);
+  text-shadow: 0 1px 0 rgba(black, 0.2);
+}
+
+screenshot-carousel box.frame {
+  border-width: 1px 0;
+  border-radius: 0;
+}
+
+screenshot-carousel button,
+.featured-carousel button {
+  margin: $space-size * 2;
+}
+
+.screenshot-image-main .image1,
+.screenshot-image-main .image2 {
+  margin-top: $space-size;
+  margin-bottom: $space-size * 2;
+  margin-left: $space-size;
+  margin-right: $space-size;
+}
+
+.app-tile-label {
+  font-size: 105%;
+}
+
+.review-textbox {
+  padding: $space-size;
+}
+
+.origin-rounded-box {
+  background-color: $divider;
+  border-radius: $circular-radius;
+  padding: $space-size - 2px;
+}
+
+.origin-beta {
+  color: $warning;
+}
+
+.origin-button > button {
+  padding: $space-size / 2 $space-size * 1.5;
+}
+
+.card flowboxchild {
+  &.card {
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    background: none;
+  }
+}
+
+.category-tile.card {
+  padding: $space-size * 3.5;
+  border: none;
+  border-radius: $corner-radius;
+  min-width: 140px;
+  font-weight: 900;
+  font-size: larger;
+  box-shadow: $shadow-z3;
+
+  &.category-tile-iconless {
+    padding: $space-size * 1.5 $space-size * 2.5;
+    min-width: 130px;
+    font-size: 105%;
+    font-weight: normal;
+    box-shadow: none;
+    background-color: $fill;
+  }
+
+  // Styling for specific category buttons.
+  &.category-create {
+    background: linear-gradient(180deg, #ce8cd7 0%, #2861c6 100%);
+    color: white;
+
+    &:hover {
+      background: linear-gradient(180deg, shade(#ce8cd7, 1.07) 0%, shade(#2861c6, 1.1) 100%);
+      color: white;
+    }
+
+    &:active {
+      background: linear-gradient(180deg, shade(#ce8cd7, .95) 0%, shade(#2861c6, .95) 100%);
+      color: white;
+    }
+  }
+
+  &.category-develop {
+    background: #5e5c64;
+    color: white;
+
+    &:hover {
+      background: shade(#5e5c64, 1.2);
+      color: white;
+    }
+
+    &:active {
+      background-color: shade(#5e5c64, .95);
+      color: white;
+    }
+  }
+
+  &.category-learn {
+    background: linear-gradient(180deg, #2ec27e 30%, #27a66c 100%);
+    color: white;
+
+    &:hover {
+      background: linear-gradient(180deg, shade(#2ec27e, 1.06) 30%, shade(#27a66c, 1.06) 100%);
+      color: white;
+    }
+
+    &:active {
+      background: linear-gradient(180deg, shade(#2ec27e, .95) 30%, shade(#27a66c, .95) 100%);
+      color: white;
+    }
+  }
+
+  &.category-play {
+    background: linear-gradient(75deg, #f9e2a7 0%, #eb5ec3 50%, #6d53e0 100%);
+    color: #393484;
+
+    &:hover {
+      background: linear-gradient(75deg, shade(#f9e2a7, 1.07) 0%, shade(#eb5ec3, 1.07) 50%, shade(#6d53e0, 1.07) 100%);
+      color: #393484;
+    }
+
+    &:active {
+      background: linear-gradient(75deg, shade(#f9e2a7, .97) 0%, shade(#eb5ec3, .95) 50%, shade(#6d53e0, 1.07) 100%);
+      color: #393484;
+    }
+  }
+
+  &.category-socialize {
+    background: linear-gradient(90deg, #ef4e9b 0%, #f77466 100%);
+    color: $text-secondary;
+
+    &:hover {
+      background: linear-gradient(90deg, shade(#ef4e9b, 1.08) 0%, shade(#f77466, 1.08) 100%);
+    }
+
+    &:active {
+      background: linear-gradient(90deg, shade(#ef4e9b, .95) 0%, shade(#f77466, .95) 100%);
+    }
+  }
+
+  &.category-work {
+    padding: 1px; /* FIXME: work around https://gitlab.gnome.org/GNOME/gtk/-/issues/4324 */
+    color: #1c71d8;
+    background-color:#fdf8d7;
+    background-image: linear-gradient($border 1px, transparent 1px),
+             linear-gradient(90deg, $border 1px, transparent 1px);
+    background-size: 10px 10px, 10px 10px;
+    background-position: -1px -4px, center -1px;
+
+    &:hover {
+      color: #1c71d8;
+      background-color: lighten(#fdf8d7, 5%);
+      background-image: linear-gradient($border 1px, transparent 1px),
+               linear-gradient(90deg, $border 1px, transparent 1px);
+    }
+
+    &:active {
+      color: #1c71d8;
+      background-color: darken(#fdf8d7, 5%);
+      background-image: linear-gradient($border 1px, transparent 1px),
+               linear-gradient(90deg, $border 1px, transparent 1px);
+    }
+  }
+}
+
+clamp.medium .category-tile:not(.category-tile-iconless),
+clamp.large .category-tile:not(.category-tile-iconless) {
+  font-size: larger;
+}
+
+// The rest of the featured-tile CSS is loaded at runtime in gs-feature-tile.c
+.featured-tile {
+  padding: 0;
+  box-shadow: none;
+  color: $text;
+
+  label.title-1 {
+    margin-top: $space-size;
+    margin-bottom: $space-size;
+  }
+
+  &.narrow label.title-1 {
+    font-size: 16pt;
+  }
+}
+
+.application-details-infobar {
+  &, &.info {
+    background-color: $fill;
+    color: $text;
+    border: 1px solid $border;
+  }
+
+  &.warning {
+    background-color: $warning;
+    color: on($warning);
+    border: 1px solid on($warning, divider);
+  }
+}
+
+@keyframes install-progress-unknown-move {
+  0% { background-position: 0%; }
+  50% { background-position: 100%; }
+  100% { background-position: 0%; }
+}
+
+.application-details-description .button {
+  padding-left: $space-size * 4;
+  padding-right: $space-size * 4;
+}
+
+.install-progress {
+  background-image: linear-gradient(to top, $primary 2px, gtkalpha($primary, 0) 2px);
+  background-repeat: no-repeat;
+  background-position: 0 bottom;
+  background-size: 0;
+  transition: none;
+}
+
+.install-progress:dir(rtl) { background-position: 100% bottom; }
+
+.review-row > * {
+  margin: $space-size * 2;
+}
+
+.review-row button { font-size: smaller; }
+
+.review-row .vote-buttons button {
+  margin-right: -1px;
+}
+
+// this is the separator between yes and no vote buttons, gtk+ 3.20 only
+.review-row .vote-buttons button:not(:first-child) {
+  border-image: linear-gradient(to top, $border, $border) 0 0 0 1 / 5px 0 5px 1px;
+}
+
+.review-row .vote-buttons button:hover,
+.review-row .vote-buttons button:active,
+.review-row .vote-buttons button:hover + button,
+.review-row .vote-buttons button:active + button {
+  border-image: none;
+}
+
+review-bar {
+  color: $text-disabled;
+  background-image: none;
+  background-color: $track;
+}
+
+.review-histogram star-image {
+  color: $text-disabled;
+}
+
+.version-arrow-label {
+  font-size: x-small;
+}
+
+.overview-more-button {
+  font-size: smaller;
+  padding: 0 $space-size * 2 + 4px;
+}
+
+.app-row-origin-text {
+  font-size: smaller;
+}
+
+.app-listbox-header {
+  padding: $space-size;
+  border-bottom: 1px solid $border;
+}
+
+.image-list {
+  background-color: transparent;
+}
+
+box.star {
+  background-color: transparent;
+  background-image: none;
+}
+
+button.star {
+  outline-offset: 0;
+  background-color: transparent;
+  background-image: none;
+  border-image: none;
+  border-radius: 0;
+  border-width: 0;
+  padding: 0;
+  box-shadow: none;
+  outline-offset: -1px;
+}
+
+star-image {
+  color: $yellow-dark;
+}
+
+.dimmer-label {
+  opacity: 0.25;
+}
+
+.update-failed-details {
+  font-family: Monospace;
+  font-size: smaller;
+  padding: $space-size * 2 + 4px;
+}
+
+.upgrade-banner {
+  padding: 0px;
+  border-radius: $corner-radius;
+  border: none;
+}
+
+.upgrade-banner-background {
+  background: linear-gradient(to bottom, $green-light, $blue-light);
+  color: white;
+}
+
+.upgrade-buttons #button_upgrades_install {
+  padding-left: $space-size * 2 + 4px;
+  padding-right: $space-size * 2 + 4px;
+}
+
+scrolledwindow.list-page > viewport > clamp > box {
+  margin: $space-size * 4 $space-size * 2;
+  border-spacing: $space-size * 4;
+}
+
+.update-preferences preferencesgroup > box > box {
+  margin-top: $space-size * 3;
+}
+
+.section > label:not(:first-child) { margin-top: $space-size; }
+
+.section > box:not(:first-child) { margin-top: $space-size * 2; }
+
+clamp.status-page {
+	margin: $space-size * 6 $space-size * 2;
+}
+
+clamp.status-page .iconbox {
+  min-height: 128px;
+  min-width: 128px;
+}
+
+clamp.status-page .icon {
+  color: $text-disabled;
+  min-height: 32px;
+  min-width: 32px;
+}
+
+clamp.status-page .icon:not(:last-child) {
+  margin-bottom: $space-size * 6;
+}
+
+clamp.status-page .title:not(:last-child) {
+  margin-bottom: $space-size * 2;
+}
+
+app-context-bar {
+  .context-tile {
+    border: 1px solid $border;
+    background-color: transparent;
+    border-radius: 0;
+    padding: $space-size * 4 $space-size * 2 $space-size * 3.5 $space-size * 2;
+    outline-offset: 5px;
+    transition-property: outline, outline-offset, background-image;
+    border-bottom: none;
+    border-right: none;
+
+    &:hover {
+      background-image: none;
+      background-color: $overlay-hover;
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-color: $overlay-active;
+    }
+
+    &:focus:focus-visible {
+      outline-offset: -1px;
+    }
+  }
+
+  &.horizontal box:first-child .context-tile:first-child,
+  &.vertical .context-tile:first-child {
+    border-left: none;
+  }
+
+  &.horizontal .context-tile,
+  &.vertical box:first-child .context-tile {
+  	border-top: none;
+  }
+
+  > box:not(:first-child) > button.flat {
+    border-radius: 0;
+
+    &:last-child {
+      border-radius: 0 $corner-radius $corner-radius 0;
+    }
+  }
+
+  > box:first-child > button.flat {
+    border-radius: 0;
+
+    &:first-child {
+      border-radius: $corner-radius 0 0 $corner-radius;
+    }
+  }
+
+  > box > button.flat {
+    border-left-color: $border;
+  }
+}
+
+carousel.card {
+  border: none;
+  background-color: $fill;
+}
+
+.context-tile-lozenge {
+  min-height: 28px;
+  min-width: 28px;
+  padding: $space-size;
+  font-size: 18px;
+  font-weight: bold;
+  border-radius: $circular-radius;
+
+  &.large {
+    font-size: 24px;
+    padding: 16px;
+    min-width: 24px;  /* 60px minus the left and right padding */
+    min-height: 24px;  /* 60px minus the top and bottom padding */
+  }
+
+  &.wide-image image {
+    margin-top: -28px;
+    margin-bottom: -28px;
+  }
+
+  image { -gtk-icon-style: symbolic; }
+
+  &.grey {
+    color: $text;
+    background-color: $divider;
+  }
+
+  &.green, &.details-rating-0 {
+    color: darken($success, 15%);
+    background-color: rgba($success, 0.15);
+  }
+
+  &.blue,
+  &.details-rating-5 {
+    color: $blue-light;
+    background-color: rgba($blue-light, 0.15);
+  }
+
+  &.yellow, &.details-rating-12 {
+    color: darken($warning, 15%);
+    background-color: rgba($warning, 0.15);
+  }
+
+  &.details-rating-15 {
+    color: $orange-light;
+    background-color: rgba($orange-light, .15);
+  }
+
+  &.red, &.details-rating-18 {
+    color: darken($error, 15%);
+    background-color: rgba($error, 0.15);
+  }
+}
+
+.eol-red {
+  font-weight: bold;
+  color: $error;
+}
+
+window.narrow .app-title {
+  font-size: 16pt;
+}
+
+window.narrow .app-developer {
+  font-size: small;
+}
+
+.install-progress-label {
+  font-size: smaller;
+  font-feature-settings: "tnum";
+}
+
+scrolledwindow.fake-adw-status-page > viewport > box { margin: $space-size * 6 $space-size * 2; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp:not(:last-child) > box { margin-bottom: $space-size * 6; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .icon:not(:last-child) { margin-bottom: $space-size * 6; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: $space-size * 2; }
+
+statuspage.icon-dropshadow image.icon {
+	-gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05),
+	                  0 -1px rgba(0,0,0,0.05),
+	                  1px 0 rgba(0,0,0,0.1),
+	                  0 1px rgba(0,0,0,0.3),
+	                  -1px 0 rgba(0,0,0,0.1);
+}
+
+window.info scrollbar.vertical {
+  margin-top: 48px;
+  background: none;
+  box-shadow: none;
+}
+
+window.info scrollbar.vertical trough {
+  margin-top: 0;
+}
+
+// GsAppRow
+row.app > box.header {
+  margin-left: $space-size * 2;
+  margin-right: $space-size * 2;
+}
+
+row.app > box.header {
+  border-spacing: $space-size * 2;
+}
+
+row.app > box.header > image {
+  margin-top: $space-size * 2;
+  margin-bottom: $space-size * 2;
+}
+
+row.app label.warning {
+  color: $error;
+}
+
+// GtkSpinner
+
+// Ensure the spinner is hidden before the animation is triggered.
+@keyframes pre-delay {
+  from { opacity: 0; }
+  to { opacity: 0; }
+}
+
+@keyframes fade-in {
+  from { filter: opacity(0%); }
+}
+
+/* Give a fade-in animation to spinners. */
+spinner.fade-in:checked {
+  animation: pre-delay 0.5s linear 1, fade-in 1s linear 1, spin 1s linear infinite;
+  animation-delay: 0s, 0.5s, 0.5s;
+}
+
+// Leaflets
+window > contents > leaflet { // Gnome control center
+  > box > stack.background {
+    background-color: transparent;
+    background-image: linear-gradient(to bottom,
+                                      transparent,
+                                      transparent $large-size,
+                                      $background $large-size,
+                                      $background);
+  }
+}
+
+//
+// Gnome Weather
+//
+
+@define-color weather_temp_chart_fill_color #{rgba($warning, 0.5)};
+@define-color weather_temp_chart_stroke_color #{darken($warning, 10%)};
+@define-color weather_thermometer_warm_color #{if($variant == 'light', $yellow-dark, $yellow-light)};
+@define-color weather_thermometer_cold_color #{if($variant == 'light', $blue-dark, $blue-light)};
+
+$weather_thermometer_high_color: $yellow-light;
+$weather_thermometer_low_color: $blue-light;
+$weather_forecast_color: #ae7b03;
+
+#places-label {
+  font-weight: bold;
+}
+
+#temperature-label {
+  font-size: 32pt;
+  font-weight: 900;
+  margin-left: 9px;
+}
+
+#conditions-grid *:backdrop {
+  color: $text-secondary;
+}
+
+.content-view.cell {
+  font-weight: bold;
+}
+
+#locationEntry {
+  margin: $space-size;
+}
+
+.weather-popover {
+  margin-top: $space-size;
+}
+
+.forecast-card {
+  transition: border-radius 100ms ease-out;
+  border-radius: $corner-radius;
+}
+
+.forecast-card separator {
+  background-color: $border;
+}
+
+#daily-forecast-box {
+  > separator:last-child {
+    background-color: transparent;
+    min-width: 0;
+  }
+}
+
+#conditions-grid,
+#attributionGrid {
+  margin-left: $space-size * 3;
+  margin-right: $space-size * 3;
+}
+
+#weather-page .small .forecast-card {
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: 0;
+  border-width: 1px 0;
+}
+
+.forecast-temperature-label {
+  font-weight: bold;
+  color: $weather_forecast_color;
+}
+
+WeatherThermometer {
+  margin-bottom: $space-size * 2;
+}
+
+WeatherThermometer > label.high {
+  font-weight: bold;
+  color: $weather_thermometer_high_color;
+}
+
+WeatherThermometer > label.low {
+  font-weight: bold;
+  color: $weather_thermometer_low_color;
+}
+
+.forecast-button {
+  margin: 0 $space-size * 2;
+}
+
+.forecast-graphic {
+  margin: $space-size * 3;
+}
+
+button.osd.circular {
+  border-radius: $circular-radius;
+  min-width: $small-size;
+  min-height: $small-size;
+}
+
+button.osd.circular > image {
+  padding: 0;
+}
+
+scrolledwindow.inline list,
+scrolledwindow.inline listview {
+  background: none;
+  color: inherit;
+}
+
+scrolledwindow.inline undershoot.top {
+  box-shadow: inset 0 1px $border;
+}
+
+.search-view {
+  background-color: $blue-dark;
+  color: on($blue-dark);
+}
+
+.search-view menubutton button:focus:focus-visible {
+  outline-color: rgba(white, 0.3);
+}
+
+image.circular {
+  min-width: $medium-size;
+  min-height: $medium-size;
+  padding: 0;
+  border-radius: $circular-radius;
+}
+
+// WeatherThermometerScale {
+//   border-radius: $circular-radius;
+//   background-image: linear-gradient(to bottom, $weather_thermometer_warm_color, $weather_thermometer_cold_color);
+//   margin: 0 36px;
+//   padding: 0;
+// }
+
+//
+// Gnome Clocks
+//
+
+.large-button {
+  padding: $space-size;
+}
+
+// alarms
+.alarm-time {
+  font-size: 2.5em;
+  font-weight: 300;
+}
+
+.clocks-ampm-toggle-button,
+.clocks-secondary-standalone-label {
+  font-size: 18pt;
+}
+
+.clocks-standalone-label,
+.clocks-ringing-label {
+  font-size: 6em;
+  font-weight: 300;
+}
+
+.clocks-ringing-title {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+.clocks-alarm-setup-time {
+  font-size: 32pt;
+}
+
+// Timer Panel
+.clocks-timer-label,
+.clocks-spinbutton {
+  font-size: 48pt;
+}
+
+// disguise insensitive spinbuttons as normal labels
+.timer-panel .timer-header {
+  font-size: 20pt;
+  font-weight: 300;
+}
+
+.timer-countdown {
+  font-size: 40pt;
+  font-weight: 300;
+}
+
+/* Stopwatch Panel */
+.lap-time {
+  font-weight: bold;
+}
+
+.stopped-stopwatch label,
+.running-stopwatch label,
+.paused-stopwatch label {
+  font-size: 70px;
+  font-weight: lighter;
+}
+
+.stopped-stopwatch .seconds-label {
+  font-weight: 300;
+}
+
+.running-stopwatch .seconds-label,
+.running-stopwatch .miliseconds-label {
+  color: $primary;
+}
+
+.stopped-stopwatch .miliseconds-label,
+.running-stopwatch .miliseconds-label,
+.paused-stopwatch .miliseconds-label {
+  font-size: 50px;
+}
+
+.running-stopwatch .seconds-label,
+.paused-stopwatch .seconds-label {
+  font-weight: 300;
+}
+
+// World
+.clock-location {
+  font-weight: bolder;
+}
+
+.hidden {
+  opacity: 0;
+}
+
+.clock-time {
+  font-size: 2em;
+  padding: 0.2em 0.5em;
+  border-radius: 1em;
+}
+
+.none .clock-time {
+  background: gtkalpha(currentColor, 0.2);
+}
+
+.night .clock-time {
+  color: $blue-dark;
+  background-color: gtkalpha($blue-light, 0.25);
+}
+
+.naut .clock-time,
+.astro .clock-time {
+  color: $orange-dark;
+  background-color: gtkalpha($orange-light, 0.25);
+}
+
+.civil .clock-time,
+.day .clock-time {
+  color: $yellow-dark;
+  background: gtkalpha($yellow-light, 0.25);
+}
+
+//
+// Builder
+//
+
+headerbar splitbutton {
+  notification button {
+    margin: 0;
+    min-height: $small-size;
+    min-width: $small-size;
+    padding: 0;
+  }
+}
+
+popover.background.global-search {
+  > arrow, > contents { padding: 0; }
+}
+
+panelframeswitcher {
+  padding: $space-size;
+  min-height: $medium-size;
+}
+
+.frameheader.header {
+  // min-height: $small-size;
+  background-color: $titlebar;
+
+  &:backdrop {
+    background-color: $titlebar-backdrop;
+  }
+
+  > button {
+    border: none;
+    margin: 0;
+    padding: $space-size / 2;
+  }
+
+  tabbar.inline {
+    > revealer > box {
+      min-height: $small-size;
+
+      .start-action {
+        padding: 0;
+        border: none;
+      }
+
+      .end-action {
+        padding: 0;
+        border-left: 1px solid $border;
+
+        button { margin: $space-size; }
+      }
+
+      tabbox {
+        border: none;
+        background: none;
+      }
+    }
+  }
+}
+
+panelstatusbar {
+  > menubutton > button,
+  > paneltogglebutton button { border-radius: 0; }
+}
+
+// Setting window
+.style-variant {
+  padding: 0 $space-size * 2;
+
+  button.toggle {
+    padding: 0;
+
+    &, &:hover, &:focus, &:active, &:checked {
+      background: none;
+      outline: none;
+      border: none;
+      box-shadow: none;
+    }
+
+    > stylevariantpreview > .wallpaper {
+      border-radius: $corner-radius;
+      outline-color: transparent;
+      outline-width: 3px;
+      outline-offset: $space-size / 2;
+      outline-style: solid;
+      box-shadow: none;
+    }
+
+    &:hover > stylevariantpreview > .wallpaper {
+      outline-color: $fill;
+    }
+
+    &:active > stylevariantpreview > .wallpaper {
+      outline-color: $track;
+    }
+
+    &:checked > stylevariantpreview > .wallpaper {
+      outline-color: $primary;
+    }
+  }
+}
+
+//
+// Amberol
+//
+
+playlistview {
+  scrollbar {
+    &.overlay-indicator {
+      &.dragging,
+      &.hovering { background-color: transparent; }
+    }
+  }
+
+  queuerow {
+    picture.cover,
+    image.card { border: none; }
+  }
+}
+
+//
+// Console
+//
+
+.exit-info {
+  padding: 6px;
+  border-top: 2px solid $primary;
+  background: rgba($primary, 0.9);
+  color: on($primary);
+}
+
+.error .exit-info {
+  border-top: 2px solid $error;
+  background: rgba($error, 0.9);
+  color: on($error);
+}
+
+//
+// dialogs
+//
+
+window.dialog {
+  > .dialog-vbox > box > scrolledwindow > viewport > widget {
+    > list.boxed-list {
+      border: none;
+      border-radius: 0;
+
+      > row {
+        &:first-child, &:last-child { border-radius: 0; }
+      }
+    }
+  }
+}
diff --git a/src/sass/libadwaita/apps/_console.scss b/src/sass/libadwaita/apps/_console.scss
new file mode 100644
index 00000000..7e9381aa
--- /dev/null
+++ b/src/sass/libadwaita/apps/_console.scss
@@ -0,0 +1,1595 @@
+
+//
+// Nautilus
+//
+.nautilus-window {
+  placesview {
+    label { color: $text-secondary; }
+  }
+
+  .nautilus-grid-view {
+    child.activatable {
+      @extend %row_activatable;
+    }
+  }
+
+  .floating-bar {
+    min-height: 32px;
+    padding: 0;
+    margin: $space-size;
+    border-style: none;
+    border-radius: $corner-radius;
+    background-color: $primary;
+    color: on($primary);
+    box-shadow: $shadow-z3;
+
+    button {
+      margin: (32px - $small-size) / 2;
+      color: on($primary);
+
+      @extend %small-button;
+    }
+  }
+}
+
+#NautilusQueryEditor { // search entry
+  > menubutton > button.image-button {
+    min-width: 24px;
+    min-height: 24px;
+  }
+
+  > text, > box, > menubutton > button.image-button {
+    margin: $space-size 0;
+  }
+}
+
+#NautilusQueryEditorTag {
+  background-color: $divider;
+
+  > button.image-button {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+#NautilusPathBar {
+  background-color: $titlebar-fill;
+  border-radius: $corner-radius;
+  margin: $space-size 0;
+
+  .content-pane & {
+    background-color: $fill;
+  }
+}
+
+#NautilusPathButton {
+  margin: 0 $space-size / 2;
+  border-radius: $corner-radius;
+
+  &.current-dir {
+    color: $titlebar-text;
+
+    &:hover, &:active {
+      background: none;
+      box-shadow: none;
+    }
+  }
+
+  .content-pane &.current-dir {
+    color: $text;
+  }
+
+  &:first-child { margin-left: 0; }
+}
+
+#NautilusViewCell {
+  clamp box {
+    margin: 0;
+    border-spacing: 0;
+  }
+}
+
+navigation-view-page {
+  > toolbarview > scrolledwindow > viewport > clamp > box.medium > box > stack > button {
+    margin-top: $space-size * 2;
+  }
+}
+
+//
+// Gnome Control Center
+//
+
+window.dialog {
+  > box > stack > box > box {
+    > notebook.frame {
+      border-width: 0 0 0 1px;
+      border-radius: 0;
+    }
+  }
+}
+
+.background-thumbnail {
+  > button.remove-button {
+    margin: $space-size;
+  }
+}
+
+//
+// Calculator
+//
+
+.display-container {
+  .small &.card {
+    border-radius: 0;
+    box-shadow: none;
+    border-width: 0 0 1px 0;
+  }
+
+  .history-view { background-color: $base; }
+
+  #displayitem {
+    padding: 0 12px 8px 0;
+    font-size: 1.4em;
+    border-top: 1px solid $border;
+  }
+}
+
+.math-buttons button {
+  font-size: 1.1em;
+  padding: 2px $space-size;
+
+  &.text-button {
+    padding-left: $space-size * 2 + 4px;
+    padding-right: $space-size * 2 + 4px;
+  }
+}
+
+leaflet {
+  button.number-button {
+    background-color: rgba($text, 0.1);
+
+    &:hover {
+      background-color: rgba($text, 0.2);
+    }
+
+    &:active {
+      background-color: rgba($text, 0.3);
+    }
+  }
+}
+
+//
+// Calendar
+//
+
+// labels
+label {
+  &.primary-label, &.month-name, &.secondary-label {
+    font-size: 16pt;
+    font-weight: bold;
+    padding: $space-size * 2;
+  }
+
+  &.primary-label, &.month-name {
+    color: $primary;
+  }
+
+  &.secondary-label {
+    color: $text-disabled;
+  }
+}
+
+calendar-view {
+  font-size: 10pt;
+
+  &:selected {
+    color: $primary;
+    font-weight: bold;
+  }
+}
+
+calendar-view.header,
+label.header {
+  font-size: 10pt;
+  font-weight: bold;
+  color: $text-disabled;
+}
+
+calendar-view.current,
+weekgrid.current {
+  background-color: gtkalpha($primary, 0.3);
+}
+
+popover.events {
+  background-color: $popover;
+  padding: 0;
+
+  box {
+    border-top-left-radius: $corner-radius;
+    border-top-right-radius: $corner-radius;
+  }
+
+  list {
+    background-color: $base;
+    border-radius: $corner-radius;
+  }
+
+  scrolledwindow {
+    border-width: 0;
+  }
+
+  button {
+    border-radius: $corner-radius;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-style: solid none none;
+    box-shadow: none;
+  }
+}
+
+// Event widget
+event {
+  margin: 1px;
+  font-size: 0.9rem;
+
+  widget.content {
+    margin: 4px;
+  }
+
+  &.timed,
+  &:not(.slanted):not(.slanted-start):not(.slanted-end) {
+    border-radius: $corner-radius;
+  }
+
+  &.timed widget.edge {
+    border-radius: $corner-radius / 2;
+    min-width: 5px;
+  }
+
+  &.slanted-start,
+  &.slanted-end:dir(rtl) {
+    padding-left: $space-size * 2 + 4px;
+    border-radius: 0 $corner-radius / 2 $corner-radius / 2 0;
+  }
+
+  &.slanted-end,
+  &.slanted-start:dir(rtl) {
+    padding-right: $space-size * 2 + 4px;
+    border-radius: $corner-radius / 2 0 0 $corner-radius / 2;
+  }
+
+  &:not(.timed).color-dark {
+    color: white;
+    outline-color: rgba(0, 0, 0, 0.3);
+  }
+
+  &.timed,
+  &:not(.timed).color-light {
+    color: gtkalpha(black, 0.75);
+    outline-color: rgba(255, 255, 255, 0.5);
+  }
+
+}
+
+// Event Popover
+popover.event-popover,
+popover.event-popover > contents {
+  padding: 0;
+}
+
+.search-viewport {
+  background-color: $base;
+}
+
+// calendar popover
+.calendar-list {
+  background-color: transparent;
+
+  > list {
+    border-radius: 4px;
+  }
+}
+
+// defeats the ugly hover effect of the calendar color dot on buttons
+.calendar-color-image {
+  -gtk-icon-filter: none;
+}
+
+// adds a subtle shadow to the calendar color dot when it makes sense
+image.calendar-color-image,
+button:active:not(:backdrop) .calendar-color-image,
+button:checked:not(:backdrop) .calendar-color-image,
+.calendars-list .calendar-color-image:not(:backdrop):not(:disabled),
+.calendar-list .calendar-color-image:not(:backdrop):not(:disabled),
+.sources-button:not(:backdrop):not(:disabled) .calendar-color-image {
+  -gtk-icon-shadow: 0 1px gtkalpha(black, 0.1);
+}
+
+// Date chooser
+
+// month/year controls
+datechooser {
+  navigator { // add some space between the two controls
+    margin-right: $space-size;
+    margin-left: $space-size;
+    margin-bottom: $space-size;
+  }
+
+  navigator {
+    label { font-weight: bold; }
+
+    button.flat,
+    button.toggle,
+    button.image-button {
+      min-height: $medium-size;
+      min-width: $medium-size;
+      padding: 0;
+    }
+  }
+
+  // day names and week numbers
+  .weeknum, .weekday {
+    color: $text-disabled;
+    font-size: smaller;
+  }
+
+  // days
+  button.day {
+    font-size: 10pt;
+    font-weight: normal;
+    margin: $space-size / 2;
+    padding: 0;
+    min-height: $medium-size;
+    min-width: $medium-size;
+    transition: none;
+
+    dot {
+      background-color: $text;
+      border-radius: 50%;
+      min-height: $space-size / 2;
+      min-width: $space-size / 2;
+    }
+
+    &:selected, &.today:selected {
+      background-color: $primary;
+      color: on($primary);
+      font-weight: bold;
+
+      dot { background-color: on($primary); }
+    }
+
+    &.today {
+      color: $primary;
+
+      dot { background-color: $primary; }
+    }
+
+    &.other-month {
+      &:not(:hover),
+      &:backdrop {
+        color: gtkalpha(currentColor, 0.1);
+
+        dot { background-color: gtkalpha(currentColor, 0.1); }
+      }
+
+      &:hover:not(:backdrop) {
+        color: $text-disabled;
+
+        dot { background-color: $text-disabled; }
+      }
+    }
+  }
+}
+
+// Week View CSS
+.week-header {
+  padding: 0;
+
+  & > box:first-child {
+    border-bottom: 1px solid $border;
+  }
+
+  .week-number {
+    font-size: 16pt;
+    font-weight: bold;
+    padding: $space-size * 2 $space-size * 2 $space-size * 3 $space-size * 2;
+    color: $track;
+  }
+
+  &.week-temperature {
+    font-size: 10pt;
+    font-weight: bold;
+    color: $text-disabled;
+  }
+
+  &.lines {
+    color: $border;
+  }
+}
+
+weekhourbar > label {
+  font-size: 10pt;
+  padding: 4px $space-size;
+}
+
+.week-view .lines {
+  color: $border;
+}
+
+weekgrid > widget.now-strip {
+  background-color: gtkalpha($primary, 0.8);
+  margin: 0 0 0 1px;
+  min-height: 3px;
+}
+
+weekgrid,
+.week-header {
+  &:selected, &.dnd {
+    background-color: gtkalpha($primary, 0.25);
+  }
+}
+
+// Month cell
+monthcell {
+  border: solid 1px $border;
+  border-width: 1px 0 0 1px;
+  background-color: transparent;
+  transition: background-color 200ms;
+
+  &:hover:not(.out-of-month):not(.today) {
+    background-color: $base-alt;
+    transition: background-color 200ms;
+    color: $text;
+  }
+
+  &:selected {
+    background-color: gtkalpha($primary, 0.1);
+
+    &:hover {
+      background-color: gtkalpha($primary, 0.2);
+    }
+
+    label.day-label { font-weight: bold; }
+  }
+
+  &:nth-child(7n + 1) { border-left-width: 0; }
+
+  &.today {
+    background-color: gtkalpha($primary, 0.2);
+
+    &:hover {
+      background-color: gtkalpha($primary, 0.3);
+      color: $primary;
+    }
+
+    &:selected {
+      background-color: gtkalpha($primary, 0.25);
+
+      &:hover {
+        background-color: gtkalpha($primary, 0.35);
+      }
+    }
+  }
+
+  label {
+    color: $text;
+    font-size: 0.9rem;
+
+    &.day-label {
+      font-size: 1rem;
+    }
+  }
+
+  &.out-of-month {
+    background-color: $fill;
+
+    label {
+      color: $text-secondary;
+    }
+  }
+
+  button {
+    padding: 0 $space-size;
+    border-radius: 0;
+    border-bottom: none;
+    border-right: none;
+  }
+}
+
+// Month popover
+monthpopover > box {
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+}
+
+.notes-section box > textview {
+  border-radius: $corner-radius;
+  padding: $space-size;
+
+  > text {
+    background: none;
+  }
+}
+
+// Agenda View CSS
+agenda-view {
+  list {
+    > row {
+      padding: 2px $space-size * 2;
+    }
+
+    > label {
+      padding: $space-size $space-size * 2;
+    }
+  }
+
+  > scrolledwindow > viewport > list.background {
+    background-color: transparent;
+  }
+}
+
+label.no-events {
+  font-style: italic;
+}
+
+// Search
+searchbutton > popover > arrow {
+  background: none;
+  border: none;
+}
+
+// Month selector
+datechooser {
+  padding: $space-size;
+
+  .current-week {
+    background: gtkalpha($titlebar, 0.7);
+    color: on($titlebar);
+    border-radius: $corner-radius;
+  }
+}
+
+menubutton {
+  &.sources-button {
+    margin-top: 0;
+    margin-bottom: 0;
+    border-radius: 0;
+    border-top-style: none;
+    border-bottom-style: none;
+    
+    &:hover:not(:backdrop) {
+      background-image: none;
+      text-shadow: none;
+    }
+
+    > button {
+      border-radius: 0;
+
+      .title {
+        font-size: 10pt;
+        font-weight: normal;
+        padding: 0 $space-size;
+      }
+
+      .subtitle {
+        font-size: 8pt;
+        padding: 0 $space-size;
+      }
+
+      .calendar-color-image {
+        -gtk-icon-size: 12px;
+      }
+    }
+  }
+
+  stack > box {
+    border-spacing: $space-size;
+  }
+
+  .topbar headerbar &.sources-button {
+    > button {
+      border-radius: 0 0 $corner-radius $corner-radius;
+    }
+  }
+}
+
+//
+// Contacts
+//
+
+.contacts-contact-list list.navigation-sidebar {
+  background: none;
+}
+
+//
+// Gnome Software
+//
+
+.details-page {
+  margin: $space-size * 4 0px;
+}
+
+.installed-overlay-box {
+  font-size: smaller;
+  background-color: $primary;
+  border-radius: 0;
+  color: on($primary);
+  text-shadow: 0 1px 0 rgba(black, 0.2);
+}
+
+screenshot-carousel box.frame {
+  border-width: 1px 0;
+  border-radius: 0;
+}
+
+screenshot-carousel button,
+.featured-carousel button {
+  margin: $space-size * 2;
+}
+
+.screenshot-image-main .image1,
+.screenshot-image-main .image2 {
+  margin-top: $space-size;
+  margin-bottom: $space-size * 2;
+  margin-left: $space-size;
+  margin-right: $space-size;
+}
+
+.app-tile-label {
+  font-size: 105%;
+}
+
+.review-textbox {
+  padding: $space-size;
+}
+
+.origin-rounded-box {
+  background-color: $divider;
+  border-radius: $circular-radius;
+  padding: $space-size - 2px;
+}
+
+.origin-beta {
+  color: $warning;
+}
+
+.origin-button > button {
+  padding: $space-size / 2 $space-size * 1.5;
+}
+
+.card flowboxchild {
+  &.card {
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    background: none;
+  }
+}
+
+.category-tile.card {
+  padding: $space-size * 3.5;
+  border: none;
+  border-radius: $corner-radius;
+  min-width: 140px;
+  font-weight: 900;
+  font-size: larger;
+  box-shadow: $shadow-z3;
+
+  &.category-tile-iconless {
+    padding: $space-size * 1.5 $space-size * 2.5;
+    min-width: 130px;
+    font-size: 105%;
+    font-weight: normal;
+    box-shadow: none;
+    background-color: $fill;
+  }
+
+  // Styling for specific category buttons.
+  &.category-create {
+    background: linear-gradient(180deg, #ce8cd7 0%, #2861c6 100%);
+    color: white;
+
+    &:hover {
+      background: linear-gradient(180deg, shade(#ce8cd7, 1.07) 0%, shade(#2861c6, 1.1) 100%);
+      color: white;
+    }
+
+    &:active {
+      background: linear-gradient(180deg, shade(#ce8cd7, .95) 0%, shade(#2861c6, .95) 100%);
+      color: white;
+    }
+  }
+
+  &.category-develop {
+    background: #5e5c64;
+    color: white;
+
+    &:hover {
+      background: shade(#5e5c64, 1.2);
+      color: white;
+    }
+
+    &:active {
+      background-color: shade(#5e5c64, .95);
+      color: white;
+    }
+  }
+
+  &.category-learn {
+    background: linear-gradient(180deg, #2ec27e 30%, #27a66c 100%);
+    color: white;
+
+    &:hover {
+      background: linear-gradient(180deg, shade(#2ec27e, 1.06) 30%, shade(#27a66c, 1.06) 100%);
+      color: white;
+    }
+
+    &:active {
+      background: linear-gradient(180deg, shade(#2ec27e, .95) 30%, shade(#27a66c, .95) 100%);
+      color: white;
+    }
+  }
+
+  &.category-play {
+    background: linear-gradient(75deg, #f9e2a7 0%, #eb5ec3 50%, #6d53e0 100%);
+    color: #393484;
+
+    &:hover {
+      background: linear-gradient(75deg, shade(#f9e2a7, 1.07) 0%, shade(#eb5ec3, 1.07) 50%, shade(#6d53e0, 1.07) 100%);
+      color: #393484;
+    }
+
+    &:active {
+      background: linear-gradient(75deg, shade(#f9e2a7, .97) 0%, shade(#eb5ec3, .95) 50%, shade(#6d53e0, 1.07) 100%);
+      color: #393484;
+    }
+  }
+
+  &.category-socialize {
+    background: linear-gradient(90deg, #ef4e9b 0%, #f77466 100%);
+    color: $text-secondary;
+
+    &:hover {
+      background: linear-gradient(90deg, shade(#ef4e9b, 1.08) 0%, shade(#f77466, 1.08) 100%);
+    }
+
+    &:active {
+      background: linear-gradient(90deg, shade(#ef4e9b, .95) 0%, shade(#f77466, .95) 100%);
+    }
+  }
+
+  &.category-work {
+    padding: 1px; /* FIXME: work around https://gitlab.gnome.org/GNOME/gtk/-/issues/4324 */
+    color: #1c71d8;
+    background-color:#fdf8d7;
+    background-image: linear-gradient($border 1px, transparent 1px),
+             linear-gradient(90deg, $border 1px, transparent 1px);
+    background-size: 10px 10px, 10px 10px;
+    background-position: -1px -4px, center -1px;
+
+    &:hover {
+      color: #1c71d8;
+      background-color: lighten(#fdf8d7, 5%);
+      background-image: linear-gradient($border 1px, transparent 1px),
+               linear-gradient(90deg, $border 1px, transparent 1px);
+    }
+
+    &:active {
+      color: #1c71d8;
+      background-color: darken(#fdf8d7, 5%);
+      background-image: linear-gradient($border 1px, transparent 1px),
+               linear-gradient(90deg, $border 1px, transparent 1px);
+    }
+  }
+}
+
+clamp.medium .category-tile:not(.category-tile-iconless),
+clamp.large .category-tile:not(.category-tile-iconless) {
+  font-size: larger;
+}
+
+// The rest of the featured-tile CSS is loaded at runtime in gs-feature-tile.c
+.featured-tile {
+  padding: 0;
+  box-shadow: none;
+  color: $text;
+
+  label.title-1 {
+    margin-top: $space-size;
+    margin-bottom: $space-size;
+  }
+
+  &.narrow label.title-1 {
+    font-size: 16pt;
+  }
+}
+
+.application-details-infobar {
+  &, &.info {
+    background-color: $fill;
+    color: $text;
+    border: 1px solid $border;
+  }
+
+  &.warning {
+    background-color: $warning;
+    color: on($warning);
+    border: 1px solid on($warning, divider);
+  }
+}
+
+@keyframes install-progress-unknown-move {
+  0% { background-position: 0%; }
+  50% { background-position: 100%; }
+  100% { background-position: 0%; }
+}
+
+.application-details-description .button {
+  padding-left: $space-size * 4;
+  padding-right: $space-size * 4;
+}
+
+.install-progress {
+  background-image: linear-gradient(to top, $primary 2px, gtkalpha($primary, 0) 2px);
+  background-repeat: no-repeat;
+  background-position: 0 bottom;
+  background-size: 0;
+  transition: none;
+}
+
+.install-progress:dir(rtl) { background-position: 100% bottom; }
+
+.review-row > * {
+  margin: $space-size * 2;
+}
+
+.review-row button { font-size: smaller; }
+
+.review-row .vote-buttons button {
+  margin-right: -1px;
+}
+
+// this is the separator between yes and no vote buttons, gtk+ 3.20 only
+.review-row .vote-buttons button:not(:first-child) {
+  border-image: linear-gradient(to top, $border, $border) 0 0 0 1 / 5px 0 5px 1px;
+}
+
+.review-row .vote-buttons button:hover,
+.review-row .vote-buttons button:active,
+.review-row .vote-buttons button:hover + button,
+.review-row .vote-buttons button:active + button {
+  border-image: none;
+}
+
+review-bar {
+  color: $text-disabled;
+  background-image: none;
+  background-color: $track;
+}
+
+.review-histogram star-image {
+  color: $text-disabled;
+}
+
+.version-arrow-label {
+  font-size: x-small;
+}
+
+.overview-more-button {
+  font-size: smaller;
+  padding: 0 $space-size * 2 + 4px;
+}
+
+.app-row-origin-text {
+  font-size: smaller;
+}
+
+.app-listbox-header {
+  padding: $space-size;
+  border-bottom: 1px solid $border;
+}
+
+.image-list {
+  background-color: transparent;
+}
+
+box.star {
+  background-color: transparent;
+  background-image: none;
+}
+
+button.star {
+  outline-offset: 0;
+  background-color: transparent;
+  background-image: none;
+  border-image: none;
+  border-radius: 0;
+  border-width: 0;
+  padding: 0;
+  box-shadow: none;
+  outline-offset: -1px;
+}
+
+star-image {
+  color: $yellow-dark;
+}
+
+.dimmer-label {
+  opacity: 0.25;
+}
+
+.update-failed-details {
+  font-family: Monospace;
+  font-size: smaller;
+  padding: $space-size * 2 + 4px;
+}
+
+.upgrade-banner {
+  padding: 0px;
+  border-radius: $corner-radius;
+  border: none;
+}
+
+.upgrade-banner-background {
+  background: linear-gradient(to bottom, $green-light, $blue-light);
+  color: white;
+}
+
+.upgrade-buttons #button_upgrades_install {
+  padding-left: $space-size * 2 + 4px;
+  padding-right: $space-size * 2 + 4px;
+}
+
+scrolledwindow.list-page > viewport > clamp > box {
+  margin: $space-size * 4 $space-size * 2;
+  border-spacing: $space-size * 4;
+}
+
+.update-preferences preferencesgroup > box > box {
+  margin-top: $space-size * 3;
+}
+
+.section > label:not(:first-child) { margin-top: $space-size; }
+
+.section > box:not(:first-child) { margin-top: $space-size * 2; }
+
+clamp.status-page {
+	margin: $space-size * 6 $space-size * 2;
+}
+
+clamp.status-page .iconbox {
+  min-height: 128px;
+  min-width: 128px;
+}
+
+clamp.status-page .icon {
+  color: $text-disabled;
+  min-height: 32px;
+  min-width: 32px;
+}
+
+clamp.status-page .icon:not(:last-child) {
+  margin-bottom: $space-size * 6;
+}
+
+clamp.status-page .title:not(:last-child) {
+  margin-bottom: $space-size * 2;
+}
+
+app-context-bar {
+  .context-tile {
+    border: 1px solid $border;
+    background-color: transparent;
+    border-radius: 0;
+    padding: $space-size * 4 $space-size * 2 $space-size * 3.5 $space-size * 2;
+    outline-offset: 5px;
+    transition-property: outline, outline-offset, background-image;
+    border-bottom: none;
+    border-right: none;
+
+    &:hover {
+      background-image: none;
+      background-color: $overlay-hover;
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-color: $overlay-active;
+    }
+
+    &:focus:focus-visible {
+      outline-offset: -1px;
+    }
+  }
+
+  &.horizontal box:first-child .context-tile:first-child,
+  &.vertical .context-tile:first-child {
+    border-left: none;
+  }
+
+  &.horizontal .context-tile,
+  &.vertical box:first-child .context-tile {
+  	border-top: none;
+  }
+
+  > box:not(:first-child) > button.flat {
+    border-radius: 0;
+
+    &:last-child {
+      border-radius: 0 $corner-radius $corner-radius 0;
+    }
+  }
+
+  > box:first-child > button.flat {
+    border-radius: 0;
+
+    &:first-child {
+      border-radius: $corner-radius 0 0 $corner-radius;
+    }
+  }
+
+  > box > button.flat {
+    border-left-color: $border;
+  }
+}
+
+carousel.card {
+  border: none;
+  background-color: $fill;
+}
+
+.context-tile-lozenge {
+  min-height: 28px;
+  min-width: 28px;
+  padding: $space-size;
+  font-size: 18px;
+  font-weight: bold;
+  border-radius: $circular-radius;
+
+  &.large {
+    font-size: 24px;
+    padding: 16px;
+    min-width: 24px;  /* 60px minus the left and right padding */
+    min-height: 24px;  /* 60px minus the top and bottom padding */
+  }
+
+  &.wide-image image {
+    margin-top: -28px;
+    margin-bottom: -28px;
+  }
+
+  image { -gtk-icon-style: symbolic; }
+
+  &.grey {
+    color: $text;
+    background-color: $divider;
+  }
+
+  &.green, &.details-rating-0 {
+    color: darken($success, 15%);
+    background-color: rgba($success, 0.15);
+  }
+
+  &.blue,
+  &.details-rating-5 {
+    color: $blue-light;
+    background-color: rgba($blue-light, 0.15);
+  }
+
+  &.yellow, &.details-rating-12 {
+    color: darken($warning, 15%);
+    background-color: rgba($warning, 0.15);
+  }
+
+  &.details-rating-15 {
+    color: $orange-light;
+    background-color: rgba($orange-light, .15);
+  }
+
+  &.red, &.details-rating-18 {
+    color: darken($error, 15%);
+    background-color: rgba($error, 0.15);
+  }
+}
+
+.eol-red {
+  font-weight: bold;
+  color: $error;
+}
+
+window.narrow .app-title {
+  font-size: 16pt;
+}
+
+window.narrow .app-developer {
+  font-size: small;
+}
+
+.install-progress-label {
+  font-size: smaller;
+  font-feature-settings: "tnum";
+}
+
+scrolledwindow.fake-adw-status-page > viewport > box { margin: $space-size * 6 $space-size * 2; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp:not(:last-child) > box { margin-bottom: $space-size * 6; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .icon:not(:last-child) { margin-bottom: $space-size * 6; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: $space-size * 2; }
+
+statuspage.icon-dropshadow image.icon {
+	-gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05),
+	                  0 -1px rgba(0,0,0,0.05),
+	                  1px 0 rgba(0,0,0,0.1),
+	                  0 1px rgba(0,0,0,0.3),
+	                  -1px 0 rgba(0,0,0,0.1);
+}
+
+window.info scrollbar.vertical {
+  margin-top: 48px;
+  background: none;
+  box-shadow: none;
+}
+
+window.info scrollbar.vertical trough {
+  margin-top: 0;
+}
+
+// GsAppRow
+row.app > box.header {
+  margin-left: $space-size * 2;
+  margin-right: $space-size * 2;
+}
+
+row.app > box.header {
+  border-spacing: $space-size * 2;
+}
+
+row.app > box.header > image {
+  margin-top: $space-size * 2;
+  margin-bottom: $space-size * 2;
+}
+
+row.app label.warning {
+  color: $error;
+}
+
+// GtkSpinner
+
+// Ensure the spinner is hidden before the animation is triggered.
+@keyframes pre-delay {
+  from { opacity: 0; }
+  to { opacity: 0; }
+}
+
+@keyframes fade-in {
+  from { filter: opacity(0%); }
+}
+
+/* Give a fade-in animation to spinners. */
+spinner.fade-in:checked {
+  animation: pre-delay 0.5s linear 1, fade-in 1s linear 1, spin 1s linear infinite;
+  animation-delay: 0s, 0.5s, 0.5s;
+}
+
+// Leaflets
+window > contents > leaflet { // Gnome control center
+  > box > stack.background {
+    background-color: transparent;
+    background-image: linear-gradient(to bottom,
+                                      transparent,
+                                      transparent $large-size,
+                                      $background $large-size,
+                                      $background);
+  }
+}
+
+//
+// Gnome Weather
+//
+
+@define-color weather_temp_chart_fill_color #{rgba($warning, 0.5)};
+@define-color weather_temp_chart_stroke_color #{darken($warning, 10%)};
+@define-color weather_thermometer_warm_color #{if($variant == 'light', $yellow-dark, $yellow-light)};
+@define-color weather_thermometer_cold_color #{if($variant == 'light', $blue-dark, $blue-light)};
+
+$weather_thermometer_high_color: $yellow-light;
+$weather_thermometer_low_color: $blue-light;
+$weather_forecast_color: #ae7b03;
+
+#places-label {
+  font-weight: bold;
+}
+
+#temperature-label {
+  font-size: 32pt;
+  font-weight: 900;
+  margin-left: 9px;
+}
+
+#conditions-grid *:backdrop {
+  color: $text-secondary;
+}
+
+.content-view.cell {
+  font-weight: bold;
+}
+
+#locationEntry {
+  margin: $space-size;
+}
+
+.weather-popover {
+  margin-top: $space-size;
+}
+
+.forecast-card {
+  transition: border-radius 100ms ease-out;
+  border-radius: $corner-radius;
+}
+
+.forecast-card separator {
+  background-color: $border;
+}
+
+#daily-forecast-box {
+  > separator:last-child {
+    background-color: transparent;
+    min-width: 0;
+  }
+}
+
+#conditions-grid,
+#attributionGrid {
+  margin-left: $space-size * 3;
+  margin-right: $space-size * 3;
+}
+
+#weather-page .small .forecast-card {
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: 0;
+  border-width: 1px 0;
+}
+
+.forecast-temperature-label {
+  font-weight: bold;
+  color: $weather_forecast_color;
+}
+
+WeatherThermometer {
+  margin-bottom: $space-size * 2;
+}
+
+WeatherThermometer > label.high {
+  font-weight: bold;
+  color: $weather_thermometer_high_color;
+}
+
+WeatherThermometer > label.low {
+  font-weight: bold;
+  color: $weather_thermometer_low_color;
+}
+
+.forecast-button {
+  margin: 0 $space-size * 2;
+}
+
+.forecast-graphic {
+  margin: $space-size * 3;
+}
+
+button.osd.circular {
+  border-radius: $circular-radius;
+  min-width: $small-size;
+  min-height: $small-size;
+}
+
+button.osd.circular > image {
+  padding: 0;
+}
+
+scrolledwindow.inline list,
+scrolledwindow.inline listview {
+  background: none;
+  color: inherit;
+}
+
+scrolledwindow.inline undershoot.top {
+  box-shadow: inset 0 1px $border;
+}
+
+.search-view {
+  background-color: $blue-dark;
+  color: on($blue-dark);
+}
+
+.search-view menubutton button:focus:focus-visible {
+  outline-color: rgba(white, 0.3);
+}
+
+image.circular {
+  min-width: $medium-size;
+  min-height: $medium-size;
+  padding: 0;
+  border-radius: $circular-radius;
+}
+
+// WeatherThermometerScale {
+//   border-radius: $circular-radius;
+//   background-image: linear-gradient(to bottom, $weather_thermometer_warm_color, $weather_thermometer_cold_color);
+//   margin: 0 36px;
+//   padding: 0;
+// }
+
+//
+// Gnome Clocks
+//
+
+.large-button {
+  padding: $space-size;
+}
+
+// alarms
+.alarm-time {
+  font-size: 2.5em;
+  font-weight: 300;
+}
+
+.clocks-ampm-toggle-button,
+.clocks-secondary-standalone-label {
+  font-size: 18pt;
+}
+
+.clocks-standalone-label,
+.clocks-ringing-label {
+  font-size: 6em;
+  font-weight: 300;
+}
+
+.clocks-ringing-title {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+.clocks-alarm-setup-time {
+  font-size: 32pt;
+}
+
+// Timer Panel
+.clocks-timer-label,
+.clocks-spinbutton {
+  font-size: 48pt;
+}
+
+// disguise insensitive spinbuttons as normal labels
+.timer-panel .timer-header {
+  font-size: 20pt;
+  font-weight: 300;
+}
+
+.timer-countdown {
+  font-size: 40pt;
+  font-weight: 300;
+}
+
+/* Stopwatch Panel */
+.lap-time {
+  font-weight: bold;
+}
+
+.stopped-stopwatch label,
+.running-stopwatch label,
+.paused-stopwatch label {
+  font-size: 70px;
+  font-weight: lighter;
+}
+
+.stopped-stopwatch .seconds-label {
+  font-weight: 300;
+}
+
+.running-stopwatch .seconds-label,
+.running-stopwatch .miliseconds-label {
+  color: $primary;
+}
+
+.stopped-stopwatch .miliseconds-label,
+.running-stopwatch .miliseconds-label,
+.paused-stopwatch .miliseconds-label {
+  font-size: 50px;
+}
+
+.running-stopwatch .seconds-label,
+.paused-stopwatch .seconds-label {
+  font-weight: 300;
+}
+
+// World
+.clock-location {
+  font-weight: bolder;
+}
+
+.hidden {
+  opacity: 0;
+}
+
+.clock-time {
+  font-size: 2em;
+  padding: 0.2em 0.5em;
+  border-radius: 1em;
+}
+
+.none .clock-time {
+  background: gtkalpha(currentColor, 0.2);
+}
+
+.night .clock-time {
+  color: $blue-dark;
+  background-color: gtkalpha($blue-light, 0.25);
+}
+
+.naut .clock-time,
+.astro .clock-time {
+  color: $orange-dark;
+  background-color: gtkalpha($orange-light, 0.25);
+}
+
+.civil .clock-time,
+.day .clock-time {
+  color: $yellow-dark;
+  background: gtkalpha($yellow-light, 0.25);
+}
+
+//
+// Builder
+//
+
+headerbar splitbutton {
+  notification button {
+    margin: 0;
+    min-height: $small-size;
+    min-width: $small-size;
+    padding: 0;
+  }
+}
+
+popover.background.global-search {
+  > arrow, > contents { padding: 0; }
+}
+
+panelframeswitcher {
+  padding: $space-size;
+  min-height: $medium-size;
+}
+
+.frameheader.header {
+  // min-height: $small-size;
+  background-color: $titlebar;
+
+  &:backdrop {
+    background-color: $titlebar-backdrop;
+  }
+
+  > button {
+    border: none;
+    margin: 0;
+    padding: $space-size / 2;
+  }
+
+  tabbar.inline {
+    > revealer > box {
+      min-height: $small-size;
+
+      .start-action {
+        padding: 0;
+        border: none;
+      }
+
+      .end-action {
+        padding: 0;
+        border-left: 1px solid $border;
+
+        button { margin: $space-size; }
+      }
+
+      tabbox {
+        border: none;
+        background: none;
+      }
+    }
+  }
+}
+
+panelstatusbar {
+  > menubutton > button,
+  > paneltogglebutton button { border-radius: 0; }
+}
+
+// Setting window
+.style-variant {
+  padding: 0 $space-size * 2;
+
+  button.toggle {
+    padding: 0;
+
+    &, &:hover, &:focus, &:active, &:checked {
+      background: none;
+      outline: none;
+      border: none;
+      box-shadow: none;
+    }
+
+    > stylevariantpreview > .wallpaper {
+      border-radius: $corner-radius;
+      outline-color: transparent;
+      outline-width: 3px;
+      outline-offset: $space-size / 2;
+      outline-style: solid;
+      box-shadow: none;
+    }
+
+    &:hover > stylevariantpreview > .wallpaper {
+      outline-color: $fill;
+    }
+
+    &:active > stylevariantpreview > .wallpaper {
+      outline-color: $track;
+    }
+
+    &:checked > stylevariantpreview > .wallpaper {
+      outline-color: $primary;
+    }
+  }
+}
+
+//
+// Amberol
+//
+
+playlistview {
+  scrollbar {
+    &.overlay-indicator {
+      &.dragging,
+      &.hovering { background-color: transparent; }
+    }
+  }
+
+  queuerow {
+    picture.cover,
+    image.card { border: none; }
+  }
+}
+
+//
+// Console
+//
+
+.exit-info {
+  padding: 6px;
+  border-top: 2px solid $primary;
+  background: rgba($primary, 0.9);
+  color: on($primary);
+}
+
+.error .exit-info {
+  border-top: 2px solid $error;
+  background: rgba($error, 0.9);
+  color: on($error);
+}
+
+//
+// dialogs
+//
+
+window.dialog {
+  > .dialog-vbox > box > scrolledwindow > viewport > widget {
+    > list.boxed-list {
+      border: none;
+      border-radius: 0;
+
+      > row {
+        &:first-child, &:last-child { border-radius: 0; }
+      }
+    }
+  }
+}
diff --git a/src/sass/libadwaita/apps/_editor.scss b/src/sass/libadwaita/apps/_editor.scss
new file mode 100644
index 00000000..1e58a487
--- /dev/null
+++ b/src/sass/libadwaita/apps/_editor.scss
@@ -0,0 +1,11 @@
+//
+// Text Editor
+//
+
+window.org-gnome-TextEditor {
+  popover.open-popover {
+    > contents {
+      padding: 0;
+    }
+  }
+}
diff --git a/src/sass/libadwaita/apps/_libadwaita.scss b/src/sass/libadwaita/apps/_libadwaita.scss
new file mode 100644
index 00000000..13346d6e
--- /dev/null
+++ b/src/sass/libadwaita/apps/_libadwaita.scss
@@ -0,0 +1,748 @@
+
+//
+// avatar
+//
+
+avatar {
+  border-radius: $circular-radius;
+  font-weight: bold;
+
+  // The list of colors to generate avatars.
+  // Each avatar color is represented by a font color, a gradient start color and a gradient stop color.
+  // There are 8 different colors for avtars in the list if you change the number of them you
+  // need to update the NUMBER_OF_COLORS in src/adw-avatar.c.
+  // The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
+  $avatarcolorlist: (
+   (#cfe1f5, #83b6ec, #337fdc), // blue
+   (#caeaf2, #7ad9f1, #0f9ac8), // cyan
+   (#cef8d8, #8de6b1, #29ae74), // green
+   (#e6f9d7, #b5e98a, #6ab85b), // lime
+   (#f9f4e1, #f8e359, #d29d09), // yellow
+   (#ffead1, #ffcb62, #d68400), // gold
+   (#ffe5c5, #ffa95a, #ed5b00), // orange
+   (#f8d2ce, #f78773, #e62d42), // raspberry
+   (#fac7de, #e973ab, #e33b6a), // magenta
+   (#e7c2e8, #cb78d4, #9945b5), // purple
+   (#d5d2f5, #9e91e8, #7a59ca), // violet
+   (#f2eade, #e3cf9c, #b08952), // beige
+   (#e5d6ca, #be916d, #785336), // brown
+   (#d8d7d3, #c0bfbc, #6e6d71), // gray
+  );
+
+  @for $i from 1 through length($avatarcolorlist) {
+    &.color#{$i} {
+      $avatarcolor: nth($avatarcolorlist, $i);
+      background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
+      color: nth($avatarcolor, 1);
+    }
+  }
+
+  &.contrasted { color: white; }
+
+  &.image { background: none; }
+}
+
+// Card
+.card {
+  @at-root %card, & {
+    border-radius: $corner-radius;
+    border: 1px solid $border;
+    background-clip: border-box;
+    color: $text-secondary;
+    box-shadow: none;
+    outline: none;
+    background-color: $base;
+    color: $text;
+  }
+
+  &.activatable {
+    transition: $transition;
+
+    &:hover {
+      background-image: none;
+      @include button(hover);
+    }
+
+    &:active {
+      background-image: none;
+      @include button(active);
+    }
+  }
+}
+
+//
+// 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, inset 0 1px highlight($popover);
+  background-color: $popover;
+  color: on($popover);
+  border: none;
+
+  &:dir(ltr) { padding-left: $space-size * 2; }
+  &:dir(rtl) { padding-right: $space-size * 2; }
+
+  > label {
+    margin: 0 $space-size;
+  }
+}
+
+//
+// viewswitcher
+//
+
+viewswitcher {
+  margin: 0;
+  border-spacing: $space-size / 2;
+
+  &.wide {
+    margin-top: $space-size;
+    margin-bottom: $space-size;
+
+    button.toggle {
+      margin: 0;
+    }
+  }
+
+  &.narrow button.toggle {
+    border-radius: 0;
+    margin: 0;
+
+    &:focus-within, &:focus { box-shadow: none; }
+  }
+
+  button.toggle {
+    font-weight: bold;
+    padding: 0;
+
+    > stack > box {
+      &.narrow {
+        font-size: 0.75rem;
+        padding-top: $space-size;
+        padding-bottom: $space-size - 2px;
+        border-spacing: $space-size - 2px;
+
+        > stack > label {
+          padding-left: $space-size;
+          padding-right: $space-size;
+        }
+      }
+
+      &.wide {
+        padding: 2px $space-size * 2;
+        border-spacing: $space-size;
+      }
+    }
+  }
+}
+
+// AdwViewSwitcherBar
+viewswitcherbar actionbar > revealer > box {
+  padding: 0;
+}
+
+// AdwViewSwitcherTitle
+viewswitchertitle {
+  margin-top: 0;
+  margin-bottom: 0;
+
+  viewswitcher {
+    margin-left: $space-size * 2;
+    margin-right: $space-size * 2;
+
+    &.narrow {
+      margin-top: 0;
+      margin-bottom: 0;
+
+      button.toggle {
+        > stack > box {
+          &.narrow {
+            padding-top: 0;
+            padding-bottom: 0;
+            border-spacing: 0;
+          }
+        }
+      }
+    }
+
+    &.wide {
+      margin-top: $space-size;
+      margin-bottom: $space-size;
+    }
+  }
+
+  windowtitle {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .top-bar headerbar & viewswitcher {
+    &.narrow {
+      button.toggle {
+        border-radius: 0 0 $corner-radius $corner-radius;
+      }
+    }
+  }
+}
+
+// AdwIndicatorBin
+indicatorbin {
+  > indicator, > mask {
+    min-width: $space-size;
+    min-height: $space-size;
+    border-radius: $circular-radius;
+  }
+
+  > indicator {
+    margin: 1px;
+    background-color: gtkalpha(currentColor, .4);
+
+    > label {
+      font-size: 0.6rem;
+      font-weight: bold;
+      padding: 1px 4px;
+      color: white;
+    }
+  }
+
+  > mask {
+    padding: 1px;
+    background: black;
+  }
+
+  &.needs-attention > indicator {
+    background-color: $primary;
+
+    > label { color: on($primary); }
+  }
+}
+
+
+//
+// preferencespage
+//
+
+preferencespage > scrolledwindow > viewport > clamp > box {
+  margin: $space-size * 4 $space-size * 2;
+  border-spacing: $space-size *4;
+}
+
+preferencesgroup > box {
+  &, .labels {
+    border-spacing: $space-size;
+  }
+
+  > box.header:not(.single-line) {
+    margin-bottom: $space-size;
+  }
+
+  > box.single-line {
+    min-height: 34px;
+  }
+
+  button.background-preview-button.toggle {
+    padding: 0;
+    background: none;
+    box-shadow: none;
+    outline-color: transparent;
+    outline-width: 3px;
+    outline-offset: $space-size / 2;
+    outline-style: solid;
+
+    &, > background-preview {
+      border-radius: $corner-radius;
+    }
+
+    &:hover {
+      outline-color: $fill;
+    }
+
+    &:active {
+      outline-color: $track;
+    }
+
+    &:checked {
+      outline-color: $primary;
+    }
+  }
+
+  .cutout-button { background-color: $base-alt; }
+}
+
+//
+// AdwAboutWindow
+//
+
+ window.about {
+  .main-page {
+    > viewport > clamp > box {
+      margin: $space-size * 2;
+      border-spacing: $space-size;
+
+      > box {
+        margin-top: $space-size * 3;
+        border-spacing: $space-size * 3;
+        margin-bottom: $space-size;
+      }
+    }
+
+    .app-version {
+      padding: $space-size / 2 $space-size * 3;
+      color: $primary;
+      border-radius: $corner-radius;
+      margin-top: $space-size / 2;
+    }
+  }
+
+  .subpage {
+    > viewport > clamp > box {
+      margin: $space-size * 3 $space-size * 2;
+      border-spacing: $space-size * 3;
+    }
+
+    > clamp > textview {
+      background: none;
+      color: inherit;
+    }
+  }
+}
+
+//
+// AdwStatusPage
+//
+
+statuspage {
+  > scrolledwindow > viewport > box {
+    margin: $space-size * 6 $space-size * 2;
+    border-spacing: $space-size * 6;
+
+    > clamp > box {
+      border-spacing: $space-size * 2;
+
+      > .icon {
+        -gtk-icon-size: 128px;
+
+        color: gtkalpha(currentColor, 0.55);
+
+        &:disabled {
+          opacity: 0.35;
+        }
+
+        &:not(:last-child) {
+          margin-bottom: $space-size * 4;
+        }
+      }
+    }
+  }
+
+  &.compact > scrolledwindow > viewport > box {
+    margin: $space-size * 4 $space-size * 2;
+    border-spacing: $space-size * 4;
+
+    > clamp > box {
+      > .icon {
+        -gtk-icon-size: 96px;
+
+        &:not(:last-child) {
+          margin-bottom: $space-size * 2;
+        }
+      }
+
+      > .title {
+        font-size: 18pt;
+      }
+    }
+  }
+}
+
+// Transition shadows
+flap,
+leaflet,
+navigation-view,
+overlay-split-view {
+  @include transition-shadows($frame);
+}
+
+toolbarview.undershoot-top scrolledwindow {
+  @include undershoot(top);
+}
+
+toolbarview.undershoot-bottom scrolledwindow {
+  @include undershoot(bottom);
+}
+
+// Sidebar
+.unfolded stacksidebar.sidebar { border: none; }
+
+$sidebar: if($topbar == 'dark' and $variant == 'light', $titlebar, $base-alt);
+$sidebar-backdrop: if($topbar == 'dark' and $variant == 'light', $titlebar-backdrop, $background);
+
+.sidebar-pane {
+  background-color: $sidebar;
+  color: on($sidebar);
+
+  &:backdrop {
+    color: on($sidebar, disabled);
+    background-color: $sidebar-backdrop;
+    transition: background-color $duration $ease-out;
+  }
+
+  .sidebar-pane {
+    background-color: transparent;
+    color: inherit;
+  }
+
+  .toolbar,
+  .sidebar,
+  .navigation-sidebar,
+  searchbar > revealer > box {
+    background-color: transparent;
+    box-shadow: none;
+    border: none;
+  }
+
+  @if $topbar == 'dark' and $variant == 'light' {
+    button:not(.suggested-action):not(.destructive-action) { @extend %titlebar-button; }
+
+    entry { @extend %titlebar-entry; }
+
+    .dim-label { color: on($sidebar, disabled); }
+  
+    .navigation-sidebar {
+      > row {
+        color: on($sidebar, secondary);
+  
+        &:hover, &:active, &:focus, &:selected {
+          color: on($sidebar);
+        }
+  
+        &:disabled {
+          color: on($sidebar, secondary-disabled);
+        }
+  
+        button { @extend %titlebar-button; }
+      }
+    }
+  
+    placessidebar {
+      background-color: transparent;
+
+      .navigation-sidebar {
+        > row {
+          color: on($sidebar, secondary);
+
+          image.sidebar-icon,
+          label.sidebar-label {
+            color: on($sidebar, secondary);
+          }
+
+          &:hover, &:active, &:focus, &:selected {
+            color: on($sidebar);
+
+            image.sidebar-icon,
+            label.sidebar-label {
+              color: on($sidebar);
+            }
+          }
+
+          &:disabled {
+            color: on($sidebar, secondary-disabled);
+
+            image.sidebar-icon,
+            label.sidebar-label {
+              color: on($sidebar, secondary-disabled);
+            }
+          }
+
+          button { @extend %titlebar-button; }
+        }
+      }
+    }
+  
+    scrollbar {
+      background-color: transparent;
+  
+      > range > trough {
+        > slider {
+          background-color: on($sidebar, disabled);
+    
+          &:hover { background-color: on($sidebar, secondary); }
+    
+          &:active { background-color: on($sidebar); }
+    
+          &:disabled { background-color: on($sidebar, secondary-disabled); }
+        }
+      }
+  
+      &.overlay-indicator {
+        &:not(.dragging):not(.hovering) {
+          > range > trough > slider {
+            border: none;
+          }
+        }
+  
+        &.dragging,
+        &.hovering {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  banner > revealer > widget {
+    background-color: gtkmix($primary, $sidebar, 30%);
+    color: $text;
+
+    &:backdrop {
+      background-color: gtkmix($primary, $sidebar, 30%);
+    }
+  }
+}
+
+%content-button-reset {
+  color: $text-secondary;
+
+  &:hover, &:focus:not(:hover):not(:active), &:active, &:checked { color: $text; }
+
+  &:disabled { color: $text-secondary-disabled; }
+
+  &:checked {
+    &:disabled {
+      color: $text-disabled;
+    }
+  }
+
+  &:backdrop {
+    color: $text-disabled;
+
+    &:focus, &:hover, &:active { color: $text-secondary; }
+
+    &:disabled { color: $text-secondary-disabled; }
+
+    &:checked {
+      color: $text-secondary;
+
+      &:disabled { color: $text-secondary-disabled; }
+    }
+  }
+}
+
+.content-pane {
+  @if $topbar == 'dark' and $variant == 'light' {
+    headerbar {
+      color: $text;
+
+      .subtitle,
+      .dim-label {
+        color: $text-secondary;
+
+        &:backdrop { color: $text-disabled; }
+      }
+
+      @if $window_button == 'mac' {
+        button:not(.suggested-action):not(.destructive-action):not(.close):not(.minimize):not(.maximize) {
+          @extend %content-button-reset;
+        }
+
+        windowcontrols {
+          > button:not(.suggested-action):not(.destructive-action) {
+            &.minimize, &.maximize, &.close {
+              &:backdrop {
+                > image { background-color: $track; }
+
+                &:hover, &:active {
+                  color: $text-disabled;
+                }
+              }
+            }
+          }
+        }
+      } @else {
+        button:not(.suggested-action):not(.destructive-action) {
+          @extend %content-button-reset;
+        }
+      }
+
+      entry {
+        background-color: $fill;
+        color: $text-secondary;
+
+        &:hover, &:focus-within {
+          color: $text;
+        }
+
+        &:disabled {
+          background-color: $fill;
+          color: $text-disabled;
+        }
+
+        > text {
+          > placeholder {
+            color: $text-disabled;
+          }
+
+          > block-cursor {
+            color: $fill;
+            background-color: $text;
+          }
+        }
+
+        > image {
+          color: $text-secondary;
+
+          &:hover, &:active { color: $text; }
+
+          &:disabled { color: $text-disabled; }
+        }
+      }
+    }
+  }
+}
+
+/* Middle pane in three-pane setups */
+.content-pane .sidebar-pane,
+.sidebar-pane .content-pane {
+  background-color: $base;
+  color: $text;
+
+  &:backdrop {
+    background-color: $background;
+    transition: background-color $duration $ease-out;
+  }
+
+  banner > revealer > widget {
+    background-color: gtkmix($primary, $base, 30%);
+    color: $text;
+
+    &:backdrop {
+      background-color: gtkmix($primary, $base, 30%);
+    }
+  }
+}
+
+.sidebar-pane,
+.content-pane .sidebar-pane,
+.sidebar-pane .content-pane {
+  &:dir(ltr), &.end:dir(rtl) {
+    &, banner > revealer > widget {
+      box-shadow: none;
+      border-right: 1px solid $border;
+    }
+  }
+
+  &:dir(rtl), &.end:dir(ltr) {
+    &, banner > revealer > widget {
+      box-shadow: none;
+      border-left: 1px solid $border;
+    }
+  }
+}
+
+.sidebar-pane,
+.content-pane,
+.content-pane .sidebar-pane,
+.sidebar-pane .content-pane {
+  toolbarview.undershoot-top scrolledwindow {
+    @include undershoot(top, $style: 'border');
+  }
+
+  toolbarview.undershoot-bottom scrolledwindow {
+    @include undershoot(bottom, $style: 'border');
+  }
+
+  scrolledwindow {
+    &.undershoot-top {
+      @include undershoot(top, $style: 'border');
+    }
+
+    &.undershoot-bottom {
+      @include undershoot(bottom, $style: 'border');
+    }
+
+    &.undershoot-start {
+      &:dir(ltr) { @include undershoot(left, $style: 'border'); }
+      &:dir(rtl) { @include undershoot(right, $style: 'border'); }
+    }
+
+    &.undershoot-end {
+      &:dir(ltr) { @include undershoot(right, $style: 'border'); }
+      &:dir(rtl) { @include undershoot(left, $style: 'border'); }
+    }
+  }
+
+  flap,
+  leaflet,
+  navigation-view,
+  overlay-split-view {
+    @include transition-shadows($frame);
+  }
+}
+
+.sidebar-pane,
+.content-pane {
+  headerbar, .top-bar {
+    &, &:backdrop {
+      background-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  tabbar {
+    .box {
+      &, &:backdrop {
+        background-color: transparent;
+        box-shadow: none;
+      }
+    }
+
+    tab {
+      color: $text-secondary;
+
+      &:hover:not(:selected), &:active {
+        color: $text;
+      }
+
+      &:selected:not(:active) {
+        background-color: $overlay-selected;
+        color: $text;
+        box-shadow: none;
+      }
+
+      &:disabled {
+        color: $text-secondary-disabled;
+      }
+    }
+
+    button.image-button {
+      color: $text-secondary;
+
+      &:hover, &:active {
+        color: $text;
+      }
+
+      &:disabled {
+        color: $text-secondary-disabled;
+      }
+    }
+  }
+}
+
+// Gnome >= 45.0
+.top-bar {
+  box-shadow: inset 0 -1px $border;
+  background-color: $titlebar;
+
+  &:backdrop {
+    background-color: $titlebar-backdrop;
+  }
+
+  .collapse-spacing {
+    padding: 0;
+  }
+}
diff --git a/src/sass/libadwaita/apps/_nautilus.scss b/src/sass/libadwaita/apps/_nautilus.scss
new file mode 100644
index 00000000..ae048502
--- /dev/null
+++ b/src/sass/libadwaita/apps/_nautilus.scss
@@ -0,0 +1,46 @@
+//
+// Nautilus
+//
+.nautilus-window {
+  .floating-bar {
+    min-height: 32px;
+    padding: 0;
+    margin: $base_padding;
+    border-style: none;
+    border-radius: $button_radius;
+    background-color: $accent_color;
+    color: $accent_fg_color;
+    box-shadow: $shadow-z3;
+
+    button {
+      margin: (32px - $small_size) / 2;
+      color: $accent_fg_color;
+
+      @extend %small_button;
+    }
+  }
+}
+
+#NautilusQueryEditor { // search entry
+  > menubutton {
+    margin: $base_padding 0;
+
+    > button.image-button {
+      min-width: 24px;
+      min-height: 24px;
+      padding: $medium_size / 2 - $base_padding - 12px;
+    }
+  }
+}
+
+#NautilusPathBar {
+  background-color: gtkalpha(currentColor, 0.05);
+  border-radius: $button_radius;
+  padding: 0;
+}
+
+#NautilusPathButton {
+  margin: 0;
+  border-radius: $button_radius;
+  @extend %button_basic_flat;
+}
\ No newline at end of file
diff --git a/src/sass/libadwaita/apps/_other.scss b/src/sass/libadwaita/apps/_other.scss
new file mode 100644
index 00000000..f74273df
--- /dev/null
+++ b/src/sass/libadwaita/apps/_other.scss
@@ -0,0 +1,148 @@
+//
+// Amberol
+//
+
+playlistview {
+  scrollbar {
+    &.overlay-indicator {
+      &.dragging,
+      &.hovering { background-color: transparent; }
+    }
+  }
+
+  queuerow {
+    picture.cover,
+    image.card { border: none; }
+  }
+}
+
+//
+// Theme Selectors
+//
+
+themeselector, // Gnome text editor
+panelthemeselector { // Gnome builder
+  margin: $base_padding * 1.5;
+
+  checkbutton {
+    padding: 0;
+    min-height: 44px;
+    min-width: 44px;
+    padding: 1px;
+    background-clip: content-box;
+    border-radius: $circular_radius;
+    box-shadow: inset 0 0 0 1px $border_color;
+
+    &.follow:checked,
+    &.light:checked,
+    &.dark:checked {
+      box-shadow: inset 0 0 0 2px $accent_bg_color;
+    }
+
+    &.follow {
+      background-image: linear-gradient(to bottom right, #ffffff 50%, #202020 50%);
+    }
+
+    &.light {
+      background-color: #ffffff;
+    }
+
+    &.dark {
+      background-color: #202020;
+    }
+
+    &.theme-selector radio {
+      -gtk-icon-source: none;
+      border: none;
+      box-shadow: none;
+      min-height: 20px;
+      min-width: 20px;
+      padding: 0;
+
+      &, &:hover, &:active, &:checked {
+        background-color: transparent;
+        background-image: none;
+      }
+
+      &:checked {
+        -gtk-icon-size: 20px;
+        -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/checkbox-checked-symbolic.svg")), -gtk-recolor(url("assets/checkbox-checked-symbolic@2.svg")));
+
+        &, &:hover, &:active {
+          color: $accent_fg_color;
+          background-color: $accent_bg_color;
+          box-shadow: 0 2px 3px -1px rgba(black, 0.08), 0 1px 2px 0 rgba(black, 0.1);
+        }
+      }
+    }
+  }
+}
+
+popover.menu themeswitcher { // Gnome console
+  padding: $base_padding;
+
+  .check {
+    min-height: 20px;
+    min-width: 20px;
+    background: none;
+    padding: 0;
+    margin: 0;
+    border-radius: $circular_radius;
+    color: $accent_fg_color;
+    background-color: $accent_bg_color;
+
+    &, &:hover, &:active {
+      box-shadow: 0 2px 3px -1px rgba(black, 0.08), 0 1px 2px 0 rgba(black, 0.1);
+    }
+  }
+
+  checkbutton {
+    padding: 0;
+    min-height: 44px;
+    min-width: 44px;
+    padding: 1px;
+    border: none;
+    background-clip: content-box;
+    border-radius: $circular_radius;
+    box-shadow: inset 0 0 0 1px $border_color;
+
+    &:checked {
+      box-shadow: inset 0 0 0 2px $accent_color;
+    }
+
+    radio {
+      padding: 0;
+      border: none;
+
+      &,
+      &:hover,
+      &:active,
+      &:checked,
+      &:indeterminate {
+        background-color: transparent;
+        background-image: none;
+        box-shadow: none;
+        color: transparent;
+      }
+
+      &:checked, &:indeterminate {
+        -gtk-icon-source: none;
+        -gtk-icon-size: 0;
+      }
+    }
+
+    &.system {
+      background: linear-gradient(-45deg, #1e1e1e 50%, white 50%);
+    }
+
+    &.light {
+      color: gtkalpha(black, .8);
+      background-color: white;
+    }
+
+    &.dark {
+      color: white;
+      background-color: #1e1e1e;
+    }
+  }
+}
diff --git a/src/sass/libadwaita/apps/_software.scss b/src/sass/libadwaita/apps/_software.scss
new file mode 100644
index 00000000..7e9381aa
--- /dev/null
+++ b/src/sass/libadwaita/apps/_software.scss
@@ -0,0 +1,1595 @@
+
+//
+// Nautilus
+//
+.nautilus-window {
+  placesview {
+    label { color: $text-secondary; }
+  }
+
+  .nautilus-grid-view {
+    child.activatable {
+      @extend %row_activatable;
+    }
+  }
+
+  .floating-bar {
+    min-height: 32px;
+    padding: 0;
+    margin: $space-size;
+    border-style: none;
+    border-radius: $corner-radius;
+    background-color: $primary;
+    color: on($primary);
+    box-shadow: $shadow-z3;
+
+    button {
+      margin: (32px - $small-size) / 2;
+      color: on($primary);
+
+      @extend %small-button;
+    }
+  }
+}
+
+#NautilusQueryEditor { // search entry
+  > menubutton > button.image-button {
+    min-width: 24px;
+    min-height: 24px;
+  }
+
+  > text, > box, > menubutton > button.image-button {
+    margin: $space-size 0;
+  }
+}
+
+#NautilusQueryEditorTag {
+  background-color: $divider;
+
+  > button.image-button {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+#NautilusPathBar {
+  background-color: $titlebar-fill;
+  border-radius: $corner-radius;
+  margin: $space-size 0;
+
+  .content-pane & {
+    background-color: $fill;
+  }
+}
+
+#NautilusPathButton {
+  margin: 0 $space-size / 2;
+  border-radius: $corner-radius;
+
+  &.current-dir {
+    color: $titlebar-text;
+
+    &:hover, &:active {
+      background: none;
+      box-shadow: none;
+    }
+  }
+
+  .content-pane &.current-dir {
+    color: $text;
+  }
+
+  &:first-child { margin-left: 0; }
+}
+
+#NautilusViewCell {
+  clamp box {
+    margin: 0;
+    border-spacing: 0;
+  }
+}
+
+navigation-view-page {
+  > toolbarview > scrolledwindow > viewport > clamp > box.medium > box > stack > button {
+    margin-top: $space-size * 2;
+  }
+}
+
+//
+// Gnome Control Center
+//
+
+window.dialog {
+  > box > stack > box > box {
+    > notebook.frame {
+      border-width: 0 0 0 1px;
+      border-radius: 0;
+    }
+  }
+}
+
+.background-thumbnail {
+  > button.remove-button {
+    margin: $space-size;
+  }
+}
+
+//
+// Calculator
+//
+
+.display-container {
+  .small &.card {
+    border-radius: 0;
+    box-shadow: none;
+    border-width: 0 0 1px 0;
+  }
+
+  .history-view { background-color: $base; }
+
+  #displayitem {
+    padding: 0 12px 8px 0;
+    font-size: 1.4em;
+    border-top: 1px solid $border;
+  }
+}
+
+.math-buttons button {
+  font-size: 1.1em;
+  padding: 2px $space-size;
+
+  &.text-button {
+    padding-left: $space-size * 2 + 4px;
+    padding-right: $space-size * 2 + 4px;
+  }
+}
+
+leaflet {
+  button.number-button {
+    background-color: rgba($text, 0.1);
+
+    &:hover {
+      background-color: rgba($text, 0.2);
+    }
+
+    &:active {
+      background-color: rgba($text, 0.3);
+    }
+  }
+}
+
+//
+// Calendar
+//
+
+// labels
+label {
+  &.primary-label, &.month-name, &.secondary-label {
+    font-size: 16pt;
+    font-weight: bold;
+    padding: $space-size * 2;
+  }
+
+  &.primary-label, &.month-name {
+    color: $primary;
+  }
+
+  &.secondary-label {
+    color: $text-disabled;
+  }
+}
+
+calendar-view {
+  font-size: 10pt;
+
+  &:selected {
+    color: $primary;
+    font-weight: bold;
+  }
+}
+
+calendar-view.header,
+label.header {
+  font-size: 10pt;
+  font-weight: bold;
+  color: $text-disabled;
+}
+
+calendar-view.current,
+weekgrid.current {
+  background-color: gtkalpha($primary, 0.3);
+}
+
+popover.events {
+  background-color: $popover;
+  padding: 0;
+
+  box {
+    border-top-left-radius: $corner-radius;
+    border-top-right-radius: $corner-radius;
+  }
+
+  list {
+    background-color: $base;
+    border-radius: $corner-radius;
+  }
+
+  scrolledwindow {
+    border-width: 0;
+  }
+
+  button {
+    border-radius: $corner-radius;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-style: solid none none;
+    box-shadow: none;
+  }
+}
+
+// Event widget
+event {
+  margin: 1px;
+  font-size: 0.9rem;
+
+  widget.content {
+    margin: 4px;
+  }
+
+  &.timed,
+  &:not(.slanted):not(.slanted-start):not(.slanted-end) {
+    border-radius: $corner-radius;
+  }
+
+  &.timed widget.edge {
+    border-radius: $corner-radius / 2;
+    min-width: 5px;
+  }
+
+  &.slanted-start,
+  &.slanted-end:dir(rtl) {
+    padding-left: $space-size * 2 + 4px;
+    border-radius: 0 $corner-radius / 2 $corner-radius / 2 0;
+  }
+
+  &.slanted-end,
+  &.slanted-start:dir(rtl) {
+    padding-right: $space-size * 2 + 4px;
+    border-radius: $corner-radius / 2 0 0 $corner-radius / 2;
+  }
+
+  &:not(.timed).color-dark {
+    color: white;
+    outline-color: rgba(0, 0, 0, 0.3);
+  }
+
+  &.timed,
+  &:not(.timed).color-light {
+    color: gtkalpha(black, 0.75);
+    outline-color: rgba(255, 255, 255, 0.5);
+  }
+
+}
+
+// Event Popover
+popover.event-popover,
+popover.event-popover > contents {
+  padding: 0;
+}
+
+.search-viewport {
+  background-color: $base;
+}
+
+// calendar popover
+.calendar-list {
+  background-color: transparent;
+
+  > list {
+    border-radius: 4px;
+  }
+}
+
+// defeats the ugly hover effect of the calendar color dot on buttons
+.calendar-color-image {
+  -gtk-icon-filter: none;
+}
+
+// adds a subtle shadow to the calendar color dot when it makes sense
+image.calendar-color-image,
+button:active:not(:backdrop) .calendar-color-image,
+button:checked:not(:backdrop) .calendar-color-image,
+.calendars-list .calendar-color-image:not(:backdrop):not(:disabled),
+.calendar-list .calendar-color-image:not(:backdrop):not(:disabled),
+.sources-button:not(:backdrop):not(:disabled) .calendar-color-image {
+  -gtk-icon-shadow: 0 1px gtkalpha(black, 0.1);
+}
+
+// Date chooser
+
+// month/year controls
+datechooser {
+  navigator { // add some space between the two controls
+    margin-right: $space-size;
+    margin-left: $space-size;
+    margin-bottom: $space-size;
+  }
+
+  navigator {
+    label { font-weight: bold; }
+
+    button.flat,
+    button.toggle,
+    button.image-button {
+      min-height: $medium-size;
+      min-width: $medium-size;
+      padding: 0;
+    }
+  }
+
+  // day names and week numbers
+  .weeknum, .weekday {
+    color: $text-disabled;
+    font-size: smaller;
+  }
+
+  // days
+  button.day {
+    font-size: 10pt;
+    font-weight: normal;
+    margin: $space-size / 2;
+    padding: 0;
+    min-height: $medium-size;
+    min-width: $medium-size;
+    transition: none;
+
+    dot {
+      background-color: $text;
+      border-radius: 50%;
+      min-height: $space-size / 2;
+      min-width: $space-size / 2;
+    }
+
+    &:selected, &.today:selected {
+      background-color: $primary;
+      color: on($primary);
+      font-weight: bold;
+
+      dot { background-color: on($primary); }
+    }
+
+    &.today {
+      color: $primary;
+
+      dot { background-color: $primary; }
+    }
+
+    &.other-month {
+      &:not(:hover),
+      &:backdrop {
+        color: gtkalpha(currentColor, 0.1);
+
+        dot { background-color: gtkalpha(currentColor, 0.1); }
+      }
+
+      &:hover:not(:backdrop) {
+        color: $text-disabled;
+
+        dot { background-color: $text-disabled; }
+      }
+    }
+  }
+}
+
+// Week View CSS
+.week-header {
+  padding: 0;
+
+  & > box:first-child {
+    border-bottom: 1px solid $border;
+  }
+
+  .week-number {
+    font-size: 16pt;
+    font-weight: bold;
+    padding: $space-size * 2 $space-size * 2 $space-size * 3 $space-size * 2;
+    color: $track;
+  }
+
+  &.week-temperature {
+    font-size: 10pt;
+    font-weight: bold;
+    color: $text-disabled;
+  }
+
+  &.lines {
+    color: $border;
+  }
+}
+
+weekhourbar > label {
+  font-size: 10pt;
+  padding: 4px $space-size;
+}
+
+.week-view .lines {
+  color: $border;
+}
+
+weekgrid > widget.now-strip {
+  background-color: gtkalpha($primary, 0.8);
+  margin: 0 0 0 1px;
+  min-height: 3px;
+}
+
+weekgrid,
+.week-header {
+  &:selected, &.dnd {
+    background-color: gtkalpha($primary, 0.25);
+  }
+}
+
+// Month cell
+monthcell {
+  border: solid 1px $border;
+  border-width: 1px 0 0 1px;
+  background-color: transparent;
+  transition: background-color 200ms;
+
+  &:hover:not(.out-of-month):not(.today) {
+    background-color: $base-alt;
+    transition: background-color 200ms;
+    color: $text;
+  }
+
+  &:selected {
+    background-color: gtkalpha($primary, 0.1);
+
+    &:hover {
+      background-color: gtkalpha($primary, 0.2);
+    }
+
+    label.day-label { font-weight: bold; }
+  }
+
+  &:nth-child(7n + 1) { border-left-width: 0; }
+
+  &.today {
+    background-color: gtkalpha($primary, 0.2);
+
+    &:hover {
+      background-color: gtkalpha($primary, 0.3);
+      color: $primary;
+    }
+
+    &:selected {
+      background-color: gtkalpha($primary, 0.25);
+
+      &:hover {
+        background-color: gtkalpha($primary, 0.35);
+      }
+    }
+  }
+
+  label {
+    color: $text;
+    font-size: 0.9rem;
+
+    &.day-label {
+      font-size: 1rem;
+    }
+  }
+
+  &.out-of-month {
+    background-color: $fill;
+
+    label {
+      color: $text-secondary;
+    }
+  }
+
+  button {
+    padding: 0 $space-size;
+    border-radius: 0;
+    border-bottom: none;
+    border-right: none;
+  }
+}
+
+// Month popover
+monthpopover > box {
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+}
+
+.notes-section box > textview {
+  border-radius: $corner-radius;
+  padding: $space-size;
+
+  > text {
+    background: none;
+  }
+}
+
+// Agenda View CSS
+agenda-view {
+  list {
+    > row {
+      padding: 2px $space-size * 2;
+    }
+
+    > label {
+      padding: $space-size $space-size * 2;
+    }
+  }
+
+  > scrolledwindow > viewport > list.background {
+    background-color: transparent;
+  }
+}
+
+label.no-events {
+  font-style: italic;
+}
+
+// Search
+searchbutton > popover > arrow {
+  background: none;
+  border: none;
+}
+
+// Month selector
+datechooser {
+  padding: $space-size;
+
+  .current-week {
+    background: gtkalpha($titlebar, 0.7);
+    color: on($titlebar);
+    border-radius: $corner-radius;
+  }
+}
+
+menubutton {
+  &.sources-button {
+    margin-top: 0;
+    margin-bottom: 0;
+    border-radius: 0;
+    border-top-style: none;
+    border-bottom-style: none;
+    
+    &:hover:not(:backdrop) {
+      background-image: none;
+      text-shadow: none;
+    }
+
+    > button {
+      border-radius: 0;
+
+      .title {
+        font-size: 10pt;
+        font-weight: normal;
+        padding: 0 $space-size;
+      }
+
+      .subtitle {
+        font-size: 8pt;
+        padding: 0 $space-size;
+      }
+
+      .calendar-color-image {
+        -gtk-icon-size: 12px;
+      }
+    }
+  }
+
+  stack > box {
+    border-spacing: $space-size;
+  }
+
+  .topbar headerbar &.sources-button {
+    > button {
+      border-radius: 0 0 $corner-radius $corner-radius;
+    }
+  }
+}
+
+//
+// Contacts
+//
+
+.contacts-contact-list list.navigation-sidebar {
+  background: none;
+}
+
+//
+// Gnome Software
+//
+
+.details-page {
+  margin: $space-size * 4 0px;
+}
+
+.installed-overlay-box {
+  font-size: smaller;
+  background-color: $primary;
+  border-radius: 0;
+  color: on($primary);
+  text-shadow: 0 1px 0 rgba(black, 0.2);
+}
+
+screenshot-carousel box.frame {
+  border-width: 1px 0;
+  border-radius: 0;
+}
+
+screenshot-carousel button,
+.featured-carousel button {
+  margin: $space-size * 2;
+}
+
+.screenshot-image-main .image1,
+.screenshot-image-main .image2 {
+  margin-top: $space-size;
+  margin-bottom: $space-size * 2;
+  margin-left: $space-size;
+  margin-right: $space-size;
+}
+
+.app-tile-label {
+  font-size: 105%;
+}
+
+.review-textbox {
+  padding: $space-size;
+}
+
+.origin-rounded-box {
+  background-color: $divider;
+  border-radius: $circular-radius;
+  padding: $space-size - 2px;
+}
+
+.origin-beta {
+  color: $warning;
+}
+
+.origin-button > button {
+  padding: $space-size / 2 $space-size * 1.5;
+}
+
+.card flowboxchild {
+  &.card {
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    background: none;
+  }
+}
+
+.category-tile.card {
+  padding: $space-size * 3.5;
+  border: none;
+  border-radius: $corner-radius;
+  min-width: 140px;
+  font-weight: 900;
+  font-size: larger;
+  box-shadow: $shadow-z3;
+
+  &.category-tile-iconless {
+    padding: $space-size * 1.5 $space-size * 2.5;
+    min-width: 130px;
+    font-size: 105%;
+    font-weight: normal;
+    box-shadow: none;
+    background-color: $fill;
+  }
+
+  // Styling for specific category buttons.
+  &.category-create {
+    background: linear-gradient(180deg, #ce8cd7 0%, #2861c6 100%);
+    color: white;
+
+    &:hover {
+      background: linear-gradient(180deg, shade(#ce8cd7, 1.07) 0%, shade(#2861c6, 1.1) 100%);
+      color: white;
+    }
+
+    &:active {
+      background: linear-gradient(180deg, shade(#ce8cd7, .95) 0%, shade(#2861c6, .95) 100%);
+      color: white;
+    }
+  }
+
+  &.category-develop {
+    background: #5e5c64;
+    color: white;
+
+    &:hover {
+      background: shade(#5e5c64, 1.2);
+      color: white;
+    }
+
+    &:active {
+      background-color: shade(#5e5c64, .95);
+      color: white;
+    }
+  }
+
+  &.category-learn {
+    background: linear-gradient(180deg, #2ec27e 30%, #27a66c 100%);
+    color: white;
+
+    &:hover {
+      background: linear-gradient(180deg, shade(#2ec27e, 1.06) 30%, shade(#27a66c, 1.06) 100%);
+      color: white;
+    }
+
+    &:active {
+      background: linear-gradient(180deg, shade(#2ec27e, .95) 30%, shade(#27a66c, .95) 100%);
+      color: white;
+    }
+  }
+
+  &.category-play {
+    background: linear-gradient(75deg, #f9e2a7 0%, #eb5ec3 50%, #6d53e0 100%);
+    color: #393484;
+
+    &:hover {
+      background: linear-gradient(75deg, shade(#f9e2a7, 1.07) 0%, shade(#eb5ec3, 1.07) 50%, shade(#6d53e0, 1.07) 100%);
+      color: #393484;
+    }
+
+    &:active {
+      background: linear-gradient(75deg, shade(#f9e2a7, .97) 0%, shade(#eb5ec3, .95) 50%, shade(#6d53e0, 1.07) 100%);
+      color: #393484;
+    }
+  }
+
+  &.category-socialize {
+    background: linear-gradient(90deg, #ef4e9b 0%, #f77466 100%);
+    color: $text-secondary;
+
+    &:hover {
+      background: linear-gradient(90deg, shade(#ef4e9b, 1.08) 0%, shade(#f77466, 1.08) 100%);
+    }
+
+    &:active {
+      background: linear-gradient(90deg, shade(#ef4e9b, .95) 0%, shade(#f77466, .95) 100%);
+    }
+  }
+
+  &.category-work {
+    padding: 1px; /* FIXME: work around https://gitlab.gnome.org/GNOME/gtk/-/issues/4324 */
+    color: #1c71d8;
+    background-color:#fdf8d7;
+    background-image: linear-gradient($border 1px, transparent 1px),
+             linear-gradient(90deg, $border 1px, transparent 1px);
+    background-size: 10px 10px, 10px 10px;
+    background-position: -1px -4px, center -1px;
+
+    &:hover {
+      color: #1c71d8;
+      background-color: lighten(#fdf8d7, 5%);
+      background-image: linear-gradient($border 1px, transparent 1px),
+               linear-gradient(90deg, $border 1px, transparent 1px);
+    }
+
+    &:active {
+      color: #1c71d8;
+      background-color: darken(#fdf8d7, 5%);
+      background-image: linear-gradient($border 1px, transparent 1px),
+               linear-gradient(90deg, $border 1px, transparent 1px);
+    }
+  }
+}
+
+clamp.medium .category-tile:not(.category-tile-iconless),
+clamp.large .category-tile:not(.category-tile-iconless) {
+  font-size: larger;
+}
+
+// The rest of the featured-tile CSS is loaded at runtime in gs-feature-tile.c
+.featured-tile {
+  padding: 0;
+  box-shadow: none;
+  color: $text;
+
+  label.title-1 {
+    margin-top: $space-size;
+    margin-bottom: $space-size;
+  }
+
+  &.narrow label.title-1 {
+    font-size: 16pt;
+  }
+}
+
+.application-details-infobar {
+  &, &.info {
+    background-color: $fill;
+    color: $text;
+    border: 1px solid $border;
+  }
+
+  &.warning {
+    background-color: $warning;
+    color: on($warning);
+    border: 1px solid on($warning, divider);
+  }
+}
+
+@keyframes install-progress-unknown-move {
+  0% { background-position: 0%; }
+  50% { background-position: 100%; }
+  100% { background-position: 0%; }
+}
+
+.application-details-description .button {
+  padding-left: $space-size * 4;
+  padding-right: $space-size * 4;
+}
+
+.install-progress {
+  background-image: linear-gradient(to top, $primary 2px, gtkalpha($primary, 0) 2px);
+  background-repeat: no-repeat;
+  background-position: 0 bottom;
+  background-size: 0;
+  transition: none;
+}
+
+.install-progress:dir(rtl) { background-position: 100% bottom; }
+
+.review-row > * {
+  margin: $space-size * 2;
+}
+
+.review-row button { font-size: smaller; }
+
+.review-row .vote-buttons button {
+  margin-right: -1px;
+}
+
+// this is the separator between yes and no vote buttons, gtk+ 3.20 only
+.review-row .vote-buttons button:not(:first-child) {
+  border-image: linear-gradient(to top, $border, $border) 0 0 0 1 / 5px 0 5px 1px;
+}
+
+.review-row .vote-buttons button:hover,
+.review-row .vote-buttons button:active,
+.review-row .vote-buttons button:hover + button,
+.review-row .vote-buttons button:active + button {
+  border-image: none;
+}
+
+review-bar {
+  color: $text-disabled;
+  background-image: none;
+  background-color: $track;
+}
+
+.review-histogram star-image {
+  color: $text-disabled;
+}
+
+.version-arrow-label {
+  font-size: x-small;
+}
+
+.overview-more-button {
+  font-size: smaller;
+  padding: 0 $space-size * 2 + 4px;
+}
+
+.app-row-origin-text {
+  font-size: smaller;
+}
+
+.app-listbox-header {
+  padding: $space-size;
+  border-bottom: 1px solid $border;
+}
+
+.image-list {
+  background-color: transparent;
+}
+
+box.star {
+  background-color: transparent;
+  background-image: none;
+}
+
+button.star {
+  outline-offset: 0;
+  background-color: transparent;
+  background-image: none;
+  border-image: none;
+  border-radius: 0;
+  border-width: 0;
+  padding: 0;
+  box-shadow: none;
+  outline-offset: -1px;
+}
+
+star-image {
+  color: $yellow-dark;
+}
+
+.dimmer-label {
+  opacity: 0.25;
+}
+
+.update-failed-details {
+  font-family: Monospace;
+  font-size: smaller;
+  padding: $space-size * 2 + 4px;
+}
+
+.upgrade-banner {
+  padding: 0px;
+  border-radius: $corner-radius;
+  border: none;
+}
+
+.upgrade-banner-background {
+  background: linear-gradient(to bottom, $green-light, $blue-light);
+  color: white;
+}
+
+.upgrade-buttons #button_upgrades_install {
+  padding-left: $space-size * 2 + 4px;
+  padding-right: $space-size * 2 + 4px;
+}
+
+scrolledwindow.list-page > viewport > clamp > box {
+  margin: $space-size * 4 $space-size * 2;
+  border-spacing: $space-size * 4;
+}
+
+.update-preferences preferencesgroup > box > box {
+  margin-top: $space-size * 3;
+}
+
+.section > label:not(:first-child) { margin-top: $space-size; }
+
+.section > box:not(:first-child) { margin-top: $space-size * 2; }
+
+clamp.status-page {
+	margin: $space-size * 6 $space-size * 2;
+}
+
+clamp.status-page .iconbox {
+  min-height: 128px;
+  min-width: 128px;
+}
+
+clamp.status-page .icon {
+  color: $text-disabled;
+  min-height: 32px;
+  min-width: 32px;
+}
+
+clamp.status-page .icon:not(:last-child) {
+  margin-bottom: $space-size * 6;
+}
+
+clamp.status-page .title:not(:last-child) {
+  margin-bottom: $space-size * 2;
+}
+
+app-context-bar {
+  .context-tile {
+    border: 1px solid $border;
+    background-color: transparent;
+    border-radius: 0;
+    padding: $space-size * 4 $space-size * 2 $space-size * 3.5 $space-size * 2;
+    outline-offset: 5px;
+    transition-property: outline, outline-offset, background-image;
+    border-bottom: none;
+    border-right: none;
+
+    &:hover {
+      background-image: none;
+      background-color: $overlay-hover;
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-color: $overlay-active;
+    }
+
+    &:focus:focus-visible {
+      outline-offset: -1px;
+    }
+  }
+
+  &.horizontal box:first-child .context-tile:first-child,
+  &.vertical .context-tile:first-child {
+    border-left: none;
+  }
+
+  &.horizontal .context-tile,
+  &.vertical box:first-child .context-tile {
+  	border-top: none;
+  }
+
+  > box:not(:first-child) > button.flat {
+    border-radius: 0;
+
+    &:last-child {
+      border-radius: 0 $corner-radius $corner-radius 0;
+    }
+  }
+
+  > box:first-child > button.flat {
+    border-radius: 0;
+
+    &:first-child {
+      border-radius: $corner-radius 0 0 $corner-radius;
+    }
+  }
+
+  > box > button.flat {
+    border-left-color: $border;
+  }
+}
+
+carousel.card {
+  border: none;
+  background-color: $fill;
+}
+
+.context-tile-lozenge {
+  min-height: 28px;
+  min-width: 28px;
+  padding: $space-size;
+  font-size: 18px;
+  font-weight: bold;
+  border-radius: $circular-radius;
+
+  &.large {
+    font-size: 24px;
+    padding: 16px;
+    min-width: 24px;  /* 60px minus the left and right padding */
+    min-height: 24px;  /* 60px minus the top and bottom padding */
+  }
+
+  &.wide-image image {
+    margin-top: -28px;
+    margin-bottom: -28px;
+  }
+
+  image { -gtk-icon-style: symbolic; }
+
+  &.grey {
+    color: $text;
+    background-color: $divider;
+  }
+
+  &.green, &.details-rating-0 {
+    color: darken($success, 15%);
+    background-color: rgba($success, 0.15);
+  }
+
+  &.blue,
+  &.details-rating-5 {
+    color: $blue-light;
+    background-color: rgba($blue-light, 0.15);
+  }
+
+  &.yellow, &.details-rating-12 {
+    color: darken($warning, 15%);
+    background-color: rgba($warning, 0.15);
+  }
+
+  &.details-rating-15 {
+    color: $orange-light;
+    background-color: rgba($orange-light, .15);
+  }
+
+  &.red, &.details-rating-18 {
+    color: darken($error, 15%);
+    background-color: rgba($error, 0.15);
+  }
+}
+
+.eol-red {
+  font-weight: bold;
+  color: $error;
+}
+
+window.narrow .app-title {
+  font-size: 16pt;
+}
+
+window.narrow .app-developer {
+  font-size: small;
+}
+
+.install-progress-label {
+  font-size: smaller;
+  font-feature-settings: "tnum";
+}
+
+scrolledwindow.fake-adw-status-page > viewport > box { margin: $space-size * 6 $space-size * 2; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp:not(:last-child) > box { margin-bottom: $space-size * 6; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .icon:not(:last-child) { margin-bottom: $space-size * 6; }
+scrolledwindow.fake-adw-status-page > viewport > box > clamp > box > .title:not(:last-child) { margin-bottom: $space-size * 2; }
+
+statuspage.icon-dropshadow image.icon {
+	-gtk-icon-shadow: 0 1px 12px rgba(0,0,0,0.05),
+	                  0 -1px rgba(0,0,0,0.05),
+	                  1px 0 rgba(0,0,0,0.1),
+	                  0 1px rgba(0,0,0,0.3),
+	                  -1px 0 rgba(0,0,0,0.1);
+}
+
+window.info scrollbar.vertical {
+  margin-top: 48px;
+  background: none;
+  box-shadow: none;
+}
+
+window.info scrollbar.vertical trough {
+  margin-top: 0;
+}
+
+// GsAppRow
+row.app > box.header {
+  margin-left: $space-size * 2;
+  margin-right: $space-size * 2;
+}
+
+row.app > box.header {
+  border-spacing: $space-size * 2;
+}
+
+row.app > box.header > image {
+  margin-top: $space-size * 2;
+  margin-bottom: $space-size * 2;
+}
+
+row.app label.warning {
+  color: $error;
+}
+
+// GtkSpinner
+
+// Ensure the spinner is hidden before the animation is triggered.
+@keyframes pre-delay {
+  from { opacity: 0; }
+  to { opacity: 0; }
+}
+
+@keyframes fade-in {
+  from { filter: opacity(0%); }
+}
+
+/* Give a fade-in animation to spinners. */
+spinner.fade-in:checked {
+  animation: pre-delay 0.5s linear 1, fade-in 1s linear 1, spin 1s linear infinite;
+  animation-delay: 0s, 0.5s, 0.5s;
+}
+
+// Leaflets
+window > contents > leaflet { // Gnome control center
+  > box > stack.background {
+    background-color: transparent;
+    background-image: linear-gradient(to bottom,
+                                      transparent,
+                                      transparent $large-size,
+                                      $background $large-size,
+                                      $background);
+  }
+}
+
+//
+// Gnome Weather
+//
+
+@define-color weather_temp_chart_fill_color #{rgba($warning, 0.5)};
+@define-color weather_temp_chart_stroke_color #{darken($warning, 10%)};
+@define-color weather_thermometer_warm_color #{if($variant == 'light', $yellow-dark, $yellow-light)};
+@define-color weather_thermometer_cold_color #{if($variant == 'light', $blue-dark, $blue-light)};
+
+$weather_thermometer_high_color: $yellow-light;
+$weather_thermometer_low_color: $blue-light;
+$weather_forecast_color: #ae7b03;
+
+#places-label {
+  font-weight: bold;
+}
+
+#temperature-label {
+  font-size: 32pt;
+  font-weight: 900;
+  margin-left: 9px;
+}
+
+#conditions-grid *:backdrop {
+  color: $text-secondary;
+}
+
+.content-view.cell {
+  font-weight: bold;
+}
+
+#locationEntry {
+  margin: $space-size;
+}
+
+.weather-popover {
+  margin-top: $space-size;
+}
+
+.forecast-card {
+  transition: border-radius 100ms ease-out;
+  border-radius: $corner-radius;
+}
+
+.forecast-card separator {
+  background-color: $border;
+}
+
+#daily-forecast-box {
+  > separator:last-child {
+    background-color: transparent;
+    min-width: 0;
+  }
+}
+
+#conditions-grid,
+#attributionGrid {
+  margin-left: $space-size * 3;
+  margin-right: $space-size * 3;
+}
+
+#weather-page .small .forecast-card {
+  margin-left: 0;
+  margin-right: 0;
+  border-radius: 0;
+  border-width: 1px 0;
+}
+
+.forecast-temperature-label {
+  font-weight: bold;
+  color: $weather_forecast_color;
+}
+
+WeatherThermometer {
+  margin-bottom: $space-size * 2;
+}
+
+WeatherThermometer > label.high {
+  font-weight: bold;
+  color: $weather_thermometer_high_color;
+}
+
+WeatherThermometer > label.low {
+  font-weight: bold;
+  color: $weather_thermometer_low_color;
+}
+
+.forecast-button {
+  margin: 0 $space-size * 2;
+}
+
+.forecast-graphic {
+  margin: $space-size * 3;
+}
+
+button.osd.circular {
+  border-radius: $circular-radius;
+  min-width: $small-size;
+  min-height: $small-size;
+}
+
+button.osd.circular > image {
+  padding: 0;
+}
+
+scrolledwindow.inline list,
+scrolledwindow.inline listview {
+  background: none;
+  color: inherit;
+}
+
+scrolledwindow.inline undershoot.top {
+  box-shadow: inset 0 1px $border;
+}
+
+.search-view {
+  background-color: $blue-dark;
+  color: on($blue-dark);
+}
+
+.search-view menubutton button:focus:focus-visible {
+  outline-color: rgba(white, 0.3);
+}
+
+image.circular {
+  min-width: $medium-size;
+  min-height: $medium-size;
+  padding: 0;
+  border-radius: $circular-radius;
+}
+
+// WeatherThermometerScale {
+//   border-radius: $circular-radius;
+//   background-image: linear-gradient(to bottom, $weather_thermometer_warm_color, $weather_thermometer_cold_color);
+//   margin: 0 36px;
+//   padding: 0;
+// }
+
+//
+// Gnome Clocks
+//
+
+.large-button {
+  padding: $space-size;
+}
+
+// alarms
+.alarm-time {
+  font-size: 2.5em;
+  font-weight: 300;
+}
+
+.clocks-ampm-toggle-button,
+.clocks-secondary-standalone-label {
+  font-size: 18pt;
+}
+
+.clocks-standalone-label,
+.clocks-ringing-label {
+  font-size: 6em;
+  font-weight: 300;
+}
+
+.clocks-ringing-title {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+.clocks-alarm-setup-time {
+  font-size: 32pt;
+}
+
+// Timer Panel
+.clocks-timer-label,
+.clocks-spinbutton {
+  font-size: 48pt;
+}
+
+// disguise insensitive spinbuttons as normal labels
+.timer-panel .timer-header {
+  font-size: 20pt;
+  font-weight: 300;
+}
+
+.timer-countdown {
+  font-size: 40pt;
+  font-weight: 300;
+}
+
+/* Stopwatch Panel */
+.lap-time {
+  font-weight: bold;
+}
+
+.stopped-stopwatch label,
+.running-stopwatch label,
+.paused-stopwatch label {
+  font-size: 70px;
+  font-weight: lighter;
+}
+
+.stopped-stopwatch .seconds-label {
+  font-weight: 300;
+}
+
+.running-stopwatch .seconds-label,
+.running-stopwatch .miliseconds-label {
+  color: $primary;
+}
+
+.stopped-stopwatch .miliseconds-label,
+.running-stopwatch .miliseconds-label,
+.paused-stopwatch .miliseconds-label {
+  font-size: 50px;
+}
+
+.running-stopwatch .seconds-label,
+.paused-stopwatch .seconds-label {
+  font-weight: 300;
+}
+
+// World
+.clock-location {
+  font-weight: bolder;
+}
+
+.hidden {
+  opacity: 0;
+}
+
+.clock-time {
+  font-size: 2em;
+  padding: 0.2em 0.5em;
+  border-radius: 1em;
+}
+
+.none .clock-time {
+  background: gtkalpha(currentColor, 0.2);
+}
+
+.night .clock-time {
+  color: $blue-dark;
+  background-color: gtkalpha($blue-light, 0.25);
+}
+
+.naut .clock-time,
+.astro .clock-time {
+  color: $orange-dark;
+  background-color: gtkalpha($orange-light, 0.25);
+}
+
+.civil .clock-time,
+.day .clock-time {
+  color: $yellow-dark;
+  background: gtkalpha($yellow-light, 0.25);
+}
+
+//
+// Builder
+//
+
+headerbar splitbutton {
+  notification button {
+    margin: 0;
+    min-height: $small-size;
+    min-width: $small-size;
+    padding: 0;
+  }
+}
+
+popover.background.global-search {
+  > arrow, > contents { padding: 0; }
+}
+
+panelframeswitcher {
+  padding: $space-size;
+  min-height: $medium-size;
+}
+
+.frameheader.header {
+  // min-height: $small-size;
+  background-color: $titlebar;
+
+  &:backdrop {
+    background-color: $titlebar-backdrop;
+  }
+
+  > button {
+    border: none;
+    margin: 0;
+    padding: $space-size / 2;
+  }
+
+  tabbar.inline {
+    > revealer > box {
+      min-height: $small-size;
+
+      .start-action {
+        padding: 0;
+        border: none;
+      }
+
+      .end-action {
+        padding: 0;
+        border-left: 1px solid $border;
+
+        button { margin: $space-size; }
+      }
+
+      tabbox {
+        border: none;
+        background: none;
+      }
+    }
+  }
+}
+
+panelstatusbar {
+  > menubutton > button,
+  > paneltogglebutton button { border-radius: 0; }
+}
+
+// Setting window
+.style-variant {
+  padding: 0 $space-size * 2;
+
+  button.toggle {
+    padding: 0;
+
+    &, &:hover, &:focus, &:active, &:checked {
+      background: none;
+      outline: none;
+      border: none;
+      box-shadow: none;
+    }
+
+    > stylevariantpreview > .wallpaper {
+      border-radius: $corner-radius;
+      outline-color: transparent;
+      outline-width: 3px;
+      outline-offset: $space-size / 2;
+      outline-style: solid;
+      box-shadow: none;
+    }
+
+    &:hover > stylevariantpreview > .wallpaper {
+      outline-color: $fill;
+    }
+
+    &:active > stylevariantpreview > .wallpaper {
+      outline-color: $track;
+    }
+
+    &:checked > stylevariantpreview > .wallpaper {
+      outline-color: $primary;
+    }
+  }
+}
+
+//
+// Amberol
+//
+
+playlistview {
+  scrollbar {
+    &.overlay-indicator {
+      &.dragging,
+      &.hovering { background-color: transparent; }
+    }
+  }
+
+  queuerow {
+    picture.cover,
+    image.card { border: none; }
+  }
+}
+
+//
+// Console
+//
+
+.exit-info {
+  padding: 6px;
+  border-top: 2px solid $primary;
+  background: rgba($primary, 0.9);
+  color: on($primary);
+}
+
+.error .exit-info {
+  border-top: 2px solid $error;
+  background: rgba($error, 0.9);
+  color: on($error);
+}
+
+//
+// dialogs
+//
+
+window.dialog {
+  > .dialog-vbox > box > scrolledwindow > viewport > widget {
+    > list.boxed-list {
+      border: none;
+      border-radius: 0;
+
+      > row {
+        &:first-child, &:last-child { border-radius: 0; }
+      }
+    }
+  }
+}
diff --git a/src/sass/libadwaita/base.scss b/src/sass/libadwaita/base.scss
new file mode 100644
index 00000000..0911b61c
--- /dev/null
+++ b/src/sass/libadwaita/base.scss
@@ -0,0 +1,10 @@
+$contrast: 'normal';
+$variant: 'light';
+
+@import 'palette';
+@import 'functions';
+@import 'variables';
+@import 'colors';
+@import 'drawing';
+@import 'common';
+@import 'compat-colors';
diff --git a/src/sass/libadwaita/defaults-dark.scss b/src/sass/libadwaita/defaults-dark.scss
new file mode 100644
index 00000000..7c56516c
--- /dev/null
+++ b/src/sass/libadwaita/defaults-dark.scss
@@ -0,0 +1,3 @@
+$variant: 'dark';
+
+@import 'defaults';
diff --git a/src/sass/libadwaita/defaults-light.scss b/src/sass/libadwaita/defaults-light.scss
new file mode 100644
index 00000000..97159a23
--- /dev/null
+++ b/src/sass/libadwaita/defaults-light.scss
@@ -0,0 +1,3 @@
+$variant: 'light';
+
+@import 'defaults';
diff --git a/src/sass/libadwaita/widgets/_avatar.scss b/src/sass/libadwaita/widgets/_avatar.scss
new file mode 100644
index 00000000..9eaea476
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_avatar.scss
@@ -0,0 +1,38 @@
+avatar {
+  border-radius: 9999px;
+  font-weight: bold;
+
+  // The list of colors to generate avatars.
+  // Each avatar color is represented by a font color, a gradient start color and a gradient stop color.
+  // There are 8 different colors for avtars in the list if you change the number of them you
+  // need to update the NUMBER_OF_COLORS in src/adw-avatar.c.
+  // The 2D list has this form: ((font-color, gradient-top-color, gradient-bottom-color)).
+  $avatarcolorlist: (
+   (#cfe1f5, #83b6ec, #337fdc), // blue
+   (#caeaf2, #7ad9f1, #0f9ac8), // cyan
+   (#cef8d8, #8de6b1, #29ae74), // green
+   (#e6f9d7, #b5e98a, #6ab85b), // lime
+   (#f9f4e1, #f8e359, #d29d09), // yellow
+   (#ffead1, #ffcb62, #d68400), // gold
+   (#ffe5c5, #ffa95a, #ed5b00), // orange
+   (#f8d2ce, #f78773, #e62d42), // raspberry
+   (#fac7de, #e973ab, #e33b6a), // magenta
+   (#e7c2e8, #cb78d4, #9945b5), // purple
+   (#d5d2f5, #9e91e8, #7a59ca), // violet
+   (#f2eade, #e3cf9c, #b08952), // beige
+   (#e5d6ca, #be916d, #785336), // brown
+   (#d8d7d3, #c0bfbc, #6e6d71), // gray
+  );
+
+  @for $i from 1 through length($avatarcolorlist) {
+    &.color#{$i} {
+      $avatarcolor: nth($avatarcolorlist, $i);
+      background-image: linear-gradient(nth($avatarcolor, 2), nth($avatarcolor, 3));
+      color: nth($avatarcolor, 1);
+    }
+  }
+
+  &.contrasted { color: white; }
+
+  &.image { background: none; }
+}
diff --git a/src/sass/libadwaita/widgets/_bottom-sheet.scss b/src/sass/libadwaita/widgets/_bottom-sheet.scss
new file mode 100644
index 00000000..0616dce8
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_bottom-sheet.scss
@@ -0,0 +1,45 @@
+
+bottom-sheet {
+  > dimming {
+    background-color: gtkalpha($shade_color, 2);
+  }
+
+  > sheet {
+    border-top-left-radius: $window_radius;
+    border-top-right-radius: $window_radius;
+    box-shadow: 0 2px 8px 2px transparentize(black, 0.93),
+                0 3px 20px 10px transparentize(black, 0.95),
+                0 6px 32px 16px transparentize(black, 0.98),
+                0 0 0 1px $shade_color;
+
+    > drag-handle {
+      background-color: gtkalpha(currentColor, .25);
+      min-width: 60px;
+      min-height: 4px;
+      margin: $base_padding;
+      border-radius: $circular_radius;
+    }
+
+    > outline {
+      border-top-left-radius: $window_radius;
+      border-top-right-radius: $window_radius;
+      box-shadow: inset 1px 0 $window_outline_color,
+                  inset -1px 0 $window_outline_color,
+                  inset 0 1px $window_outline_color;
+
+      &.flush-left {
+        box-shadow: inset -1px 0 $window_outline_color,
+                    inset 0 1px $window_outline_color;
+      }
+
+      &.flush-right {
+        box-shadow: inset 1px 0 $window_outline_color,
+                    inset 0 1px $window_outline_color;
+      }
+
+      &.flush-left.flush-right {
+        box-shadow: inset 0 1px $window_outline_color;
+      }
+    }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_buttons.scss b/src/sass/libadwaita/widgets/_buttons.scss
new file mode 100644
index 00000000..7a98bbaf
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_buttons.scss
@@ -0,0 +1,620 @@
+
+%button_basic {
+  @include button(normal);
+
+  &:focus { @include button(focus); }
+
+  &:hover { @include button(hover); -gtk-icon-filter: brightness(1.2); }
+
+  &.keyboard-activating, &:active { @include button(active); }
+
+  &:disabled { @include button(disabled); }
+
+  &:checked {
+    @include button(checked);
+
+    &:hover { @include button(checked-hover); }
+
+    &:active { @include button(checked-active); }
+
+    &:disabled { @include button(checked-disabled); }
+  }
+}
+
+%button_basic_flat {
+  @include button(flat-normal);
+
+  &:focus:not(:hover):not(:active) { @include button(flat-focus); }
+
+  &:hover { @include button(flat-hover); }
+
+  &.keyboard-activating, &:active { @include button(flat-active); }
+
+  &:disabled { @include button(flat-disabled); }
+
+  &:checked {
+    @include button(flat-checked);
+
+    &:hover { @include button(flat-checked-hover); }
+
+    &:active { @include button(flat-checked-active); }
+
+    &:disabled { @include button(flat-checked-disabled); }
+  }
+}
+
+%button_basic_raised {
+  background-color: $button_color;
+
+  &:hover {
+    background-color: $button_hover_color;
+  }
+
+  &.keyboard-activating,
+  &:active {
+    background-color: $button_active_color;
+  }
+
+  &:checked {
+    background-color: $button_checked_color;
+
+    &:hover {
+      background-color: $button_checked_hover_color;
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-color: $button_checked_active_color;
+    }
+  }
+}
+
+@at-root %opaque_button {
+  box-shadow: none;
+
+  @include focus-ring($outer: true, $offset: 1px, $transition: $button_transition);
+
+  .osd &:focus:focus-visible {
+    outline-color: $osd_focus_color;
+  }
+
+  &:hover {
+    background-image: image(gtkalpha(currentColor, .1));
+  }
+
+  &.keyboard-activating,
+  &:active {
+    background-image: image(transparentize(black, .8));
+  }
+
+  &:checked {
+    background-image: image(transparentize(black, .85));
+
+    &:hover {
+      background-image: image(transparentize(black, .95));
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-image: image(transparentize(black, .7));
+    }
+  }
+}
+
+%small_button {
+  min-height: $small_size;
+  min-width: $small_size;
+  padding: 0;
+  border-radius: $circular_radius;
+}
+
+$opaque_button_default_bg: gtkmix($window_bg_color, $window_fg_color, 85%);
+
+%button,
+button {
+  min-height: 24px;
+  min-width: 16px;
+  padding: ($medium_size - 24px) / 2 ($medium_size - 16px) / 2;
+  border-radius: $button_radius;
+  font-weight: bold;
+  @extend %button_basic;
+
+  .osd &:focus:focus-visible {
+    outline-color: $osd_focus_color;
+  }
+
+  &:disabled {
+    filter: opacity($disabled_opacity);
+
+    label {
+      filter: none;
+    }
+  }
+
+  &.image-button {
+    min-width: 24px;
+    padding-left: ($medium_size - 24px) / 2;
+    padding-right: ($medium_size - 24px) / 2;
+  }
+
+  &.text-button {
+    padding-left: $base_padding * 2 + 4px;
+    padding-right: $base_padding * 2 + 4px;
+  }
+
+  &.text-button.image-button,
+  &.image-text-button {
+    padding-left: $base_padding * 1.5;
+    padding-right: $base_padding * 1.5;
+
+    > box,
+    > box > box {
+      border-spacing: 4px;
+
+      > label {
+        padding-left: 2px;
+        padding-right: 2px;
+      }
+    }
+  }
+
+  &.arrow-button {
+    padding-left: $base_padding * 1.5;
+    padding-right: $base_padding * 1.5;
+
+    > box { border-spacing: 4px; }
+
+    &.text-button {
+      > box { border-spacing: 4px; }
+    }
+  }
+
+  @at-root %button_basic_drop_active,
+  &:drop(active) {
+    color: $drop_target_color;
+    box-shadow: inset 0 0 0 2px $drop_target_color;
+  }
+
+  // big standalone buttons like in Documents pager
+  @at-root %osd_button,
+  &.osd {
+    min-width: 32px;
+    min-height: 32px;
+    @include focus-ring($outer: true, $offset: 1px, $transition: $button_transition);
+
+    color: $osd_fg_color;
+    background-color: transparentize(black, .35);
+
+    &:hover {
+      color: white;
+      background-color: gtkalpha(gtkmix(black, currentColor, 85%), .65);
+    }
+
+    &.keyboard-activating,
+    &:active {
+      color: white;
+      background-color: gtkalpha(gtkmix(black, currentColor, 75%), .65);
+    }
+
+    &:checked {
+      background-color: gtkalpha(gtkmix(black, currentColor, 80%), .65);
+
+      &:hover {
+        background-color: gtkalpha(gtkmix(black, currentColor, 75%), .65);
+      }
+
+      &.keyboard-activating,
+      &:active {
+        background-color: gtkalpha(gtkmix(black, currentColor, 65%), .65);
+      }
+    }
+
+    // Specificity bump
+    &:drop(active) {
+      @extend %button_basic_drop_active;
+    }
+
+    .osd &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+  }
+
+  &.opaque {
+    @extend %opaque_button;
+
+    background-color: $opaque_button_default_bg;
+    color: $window_fg_color;
+  }
+
+  &.destructive-action {
+    @extend %opaque_button;
+
+    color: $destructive_fg_color;
+
+    &, &:checked {
+      background-color: $destructive_bg_color;
+    }
+  }
+
+  &.suggested-action {
+    @extend %opaque_button;
+
+    color: $accent_fg_color;
+
+    &, &:checked {
+      background-color: $accent_bg_color;
+    }
+  }
+
+  &.flat {
+    @extend %button_basic_flat;
+
+    .osd &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+
+    // Specificity bump
+    &:drop(active) {
+      @extend %button_basic_drop_active;
+    }
+  }
+
+  stackswitcher > & {
+    // to position the needs attention dot, padding is added to the button
+    // child, a label needs just lateral padding while an icon needs vertical
+    // padding added too.
+
+    > label {
+      padding: 0 6px;
+      margin: 0 -6px;
+    }
+
+    > image {
+      padding: 3px 6px;
+      margin: -3px -6px;
+    }
+
+    &.text-button { min-width: 100px; }
+
+    &.needs-attention {
+      > label,
+      > image { @extend %needs_attention; }
+    }
+  }
+
+  // hide separators
+  &.font {
+    separator { background-color: transparent; }
+    > box { border-spacing: 6px; }
+    > box > box > label { font-weight: bold; }
+  }
+
+  @at-root %circular_button,
+  &.circular { // force circular button shape
+    min-width: 34px;
+    min-height: 34px;
+    padding: 0;
+    border-radius: 9999px;
+
+    label { padding: 0; }
+  }
+
+  @at-root %pill_button,
+  &.pill {
+    padding: 10px 32px;
+    border-radius: 9999px;
+  }
+
+  &.card {
+    background-color: $card_bg_color;
+    background-clip: padding-box;
+    font-weight: inherit;
+    padding: 0;
+
+    @include focus-ring($offset: -1px, $transition: $button_transition);
+
+    &:hover {
+      background-image: image($view_hover_color);
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-image: image($view_active_color);
+    }
+
+    &:checked {
+      background-color: $card_bg_color;
+      background-image: image($view_selected_color);
+
+      &:hover { background-image: image($view_selected_hover_color); }
+
+      &.keyboard-activating,
+      &:active { background-image: image($view_selected_active_color); }
+
+      &.has-open-popup { background-image: image($view_selected_hover_color); }
+
+      .osd & {
+        background-color: gtkalpha(currentColor, .1);
+      }
+    }
+
+    &:drop(active) {
+      color: $drop_target_color;
+      box-shadow: inset 0 0 0 1px $drop_target_color;
+    }
+  }
+}
+
+%undecorated_button {
+  background-color: transparent;
+}
+
+button.color {
+  padding: 5px;
+
+  > colorswatch:only-child {
+    border-radius: 2.5px;
+
+    > overlay {
+      border-radius: 2px;
+    }
+
+    &:disabled {
+      filter: none;
+    }
+
+    &.light > overlay {
+      border-color: gtkalpha($view_fg_color, 0.1);
+    }
+  }
+}
+
+menubutton {
+  &.osd {
+    background: none;
+    color: inherit;
+
+    > button { @extend %osd_button; }
+  }
+
+  &.circular > button { @extend %circular_button; }
+  &.flat > button { @extend %button_basic_flat; }
+  &.pill > button { @extend %pill_button; }
+
+  &.suggested-action {
+    background-color: $accent_bg_color;
+    color: $accent_fg_color;
+  }
+
+  &.destructive-action {
+    background-color: $destructive_bg_color;
+    color: $destructive_fg_color;
+  }
+
+  &.opaque {
+    background-color: $opaque_button_default_bg;
+    color: $window_fg_color;
+  }
+
+  &.suggested-action,
+  &.destructive-action,
+  &.opaque {
+    border-radius: $button_radius;
+
+    &.circular, &.pill {
+      border-radius: $circular_radius;
+    }
+
+    > button {
+      @extend %opaque_button;
+
+      &, &:checked {
+        background-color: transparent;
+        color: inherit;
+      }
+    }
+  }
+
+  &.image-button > button {
+    min-width: 24px;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+
+  &.card > button {
+    border-radius: $card_radius;
+  }
+
+  arrow {
+    min-height: 16px;
+    min-width: 16px;
+    &.none {
+      -gtk-icon-source: -gtk-icontheme('open-menu-symbolic');
+    }
+    &.down {
+      -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+    }
+    &.up {
+      -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+    }
+    &.left {
+      -gtk-icon-source: -gtk-icontheme('pan-start-symbolic');
+    }
+    &.right {
+      -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+    }
+  }
+}
+
+splitbutton {
+  border-radius: $button_radius;
+
+  &, & > separator {
+    transition: $button_transition;
+    transition-property: background;
+  }
+
+  > separator {
+    margin-top: 6px;
+    margin-bottom: 6px;
+    background: none;
+  }
+
+  > menubutton > button {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  // Since the inner button doesn't have any style classes on it,
+  // we have to add them manually
+  &.image-button > button {
+    min-width: 24px;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+
+  &.text-button.image-button > button,
+  &.image-text-button > button {
+    padding-left: 9px;
+    padding-right: 9px;
+
+    > box {
+      border-spacing: 6px;
+    }
+  }
+
+  &:disabled {
+    filter: opacity($disabled_opacity);
+
+    > button, > menubutton > button {
+      filter: none;
+    }
+  }
+
+  // Reimplementing linked so we don't blow up css
+  > button:dir(ltr),
+  > menubutton > button:dir(rtl) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    margin-right: -1px;
+  }
+
+  > button:dir(rtl),
+  > menubutton > button:dir(ltr) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: -1px;
+  }
+
+  @at-root %flat_split_button,
+  &.flat {
+    > separator {
+      background: $border_color;
+    }
+
+    &:hover,
+    &:active,
+    &:checked {
+      background: $hover_color;
+
+      > separator {
+        background: none;
+      }
+    }
+
+    &:disabled {
+      filter: opacity($strong_disabled_opacity);
+
+      > button:disabled, > menubutton > button:disabled {
+        filter: none;
+      }
+    }
+
+    &:focus-within:focus-visible > separator {
+      background: none;
+    }
+
+    > button,
+    > menubutton > button {
+      @extend %button_basic_flat;
+
+      border-radius: $button_radius;
+    }
+  }
+
+  &.suggested-action {
+    background-color: $accent_bg_color;
+    color: $accent_fg_color;
+  }
+
+  &.destructive-action {
+    background-color: $destructive_bg_color;
+    color: $destructive_fg_color;
+  }
+
+  &.opaque {
+    background-color: $opaque_button_default_bg;
+    color: $window_fg_color;
+  }
+
+  &.suggested-action,
+  &.destructive-action,
+  &.opaque {
+    > button, > menubutton > button {
+      @extend %opaque_button;
+
+      &, &:checked {
+        color: inherit;
+        background-color: transparent;
+      }
+    }
+
+    $_separator_color: gtkalpha(currentColor, $dimmer_opacity);
+
+    > menubutton > button {
+      &:dir(ltr) { box-shadow: inset 1px 0 $_separator_color; }
+      &:dir(rtl) { box-shadow: inset -1px 0 $_separator_color; }
+    }
+  }
+
+  > menubutton > button > arrow.none {
+    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+  }
+}
+
+buttoncontent {
+  > box {
+    border-spacing: $base_padding;
+
+    > label {
+      font-weight: bold;
+
+      &:dir(ltr) { padding-right: 2px; }
+      &:dir(rtl) { padding-left: 2px; }
+    }
+  }
+
+  .arrow-button > box > &,
+  splitbutton > button > & {
+    > box > label {
+      &:dir(ltr) { padding-right: 0; }
+      &:dir(rtl) { padding-left: 0; }
+    }
+  }
+}
+
+tabbutton {
+  label {
+    font-weight: 800;
+    font-size: 8pt;
+
+    &.small {
+      font-size: 6pt;
+    }
+  }
+
+  indicatorbin > indicator,
+  indicatorbin > mask {
+    transform: translate(-1px, 1px);
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_calendar.scss b/src/sass/libadwaita/widgets/_calendar.scss
new file mode 100644
index 00000000..e2fdc04c
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_calendar.scss
@@ -0,0 +1,54 @@
+calendar {
+  color: $view_fg_color;
+  background-clip: padding-box;
+  border: 1px solid $border_color;
+  font-feature-settings: "tnum";
+
+  > header {
+    border-bottom: 1px solid $border_color;
+
+    > button {
+      @extend %button_basic_flat;
+      border-radius: 0;
+    }
+  }
+
+  > grid {
+    padding-left: 3px;
+    padding-bottom: 3px;
+
+    > label.today {
+      box-shadow: inset 0px -2px $border_color;
+
+      &:selected {
+        box-shadow: none;
+      }
+    }
+
+    > label {
+      @include focus-ring($focus-state: ':focus');
+      margin-top: 3px;
+      margin-right: 3px;
+
+      &.day-number {
+        padding: 3px;
+
+        &:checked {
+          border-radius: $button_radius;
+          background-color: gtkalpha($accent_bg_color, 0.3);
+        }
+
+        &:selected {
+          border-radius: $button_radius;
+
+          background-color: $accent_bg_color;
+          color: $accent_fg_color;
+        }
+      }
+
+      &.day-number.other-month {
+        color: gtkalpha(currentColor, 0.3);
+      }
+    }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_checks.scss b/src/sass/libadwaita/widgets/_checks.scss
new file mode 100644
index 00000000..e0cadb24
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_checks.scss
@@ -0,0 +1,90 @@
+checkbutton {
+  border-spacing: $base_padding / 2 + 1px;
+  border-radius: $button_radius + 3px;
+  padding: $base_padding / 2;
+
+  @include focus-ring();
+
+  .osd &:focus:focus-visible {
+    outline-color: $osd_focus_color;
+  }
+
+  &.text-button {
+    // this is for a nice focus on check and radios text
+    padding: $base_padding / 2 + 1px;
+  }
+}
+
+check,
+radio {
+  min-height: 20px;
+  min-width: 20px;
+  -gtk-icon-size: 20px;
+  padding: 0;
+  box-shadow: 0 0 0 6px transparent;
+  background-color: gtkalpha(currentColor, 0.12);
+  transition: $transition,
+              box-shadow $ripple-fade-out-duration / 2 $ease-out;
+
+  &:not(:checked):not(:indeterminate) {
+    &:hover {
+      box-shadow: 0 0 0 6px gtkalpha(currentColor, 0.05);
+      background-color: gtkalpha(currentColor, 0.15);
+    }
+  
+    &:active {
+      box-shadow: 0 0 0 6px gtkalpha(currentColor, 0.12);
+      background-color: gtkalpha(currentColor, 0.20);
+    }
+  }
+
+  &:checked,
+  &:indeterminate {
+    background-color: $accent_bg_color;
+    color: $accent_fg_color;
+    box-shadow: none;
+
+    &:hover { background-image: image(gtkalpha(currentColor, 0.1)); }
+    &:active { background-image: image(gtkalpha(currentColor, 0.2)); }
+  }
+
+  &:disabled {
+    filter: opacity($disabled_opacity);
+  }
+
+  .osd & {
+    &:checked,
+    &:indeterminate {
+      background-color: $osd_fill_bg_color;
+      color: $osd_fill_fg_color;
+    }
+  }
+}
+
+check {
+  border-radius: 100%;
+
+  &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/checkbox-checked-symbolic.svg")), -gtk-recolor(url("assets/checkbox-checked-symbolic@2.svg"))); }
+  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/checkbox-mixed-symbolic.svg")), -gtk-recolor(url("assets/checkbox-mixed-symbolic@2.svg"))); }
+}
+
+radio {
+  border-radius: 100%;
+
+  &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/radio-checked-symbolic.svg")), -gtk-recolor(url("assets/radio-checked-symbolic@2.svg"))); }
+  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/radio-mixed-symbolic.svg")), -gtk-recolor(url("assets/radio-mixed-symbolic@2.svg"))); }
+}
+
+checkbutton.selection-mode {
+  border-radius: $circular_radius;
+
+  check, radio {
+    padding: $base_padding / 2;
+    border-radius: $circular_radius;
+  }
+
+  label {
+    &:dir(ltr) { margin-right: $base_padding; }
+    &:dir(rtl) { margin-left: $base_padding; }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_color-chooser.scss b/src/sass/libadwaita/widgets/_color-chooser.scss
new file mode 100644
index 00000000..514d33e8
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_color-chooser.scss
@@ -0,0 +1,109 @@
+colorswatch {
+  // 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.
+
+  @include focus-ring($width: 4px, $offset: -2px);
+
+  // 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: $button_radius + 0.5px;
+    border-top-right-radius: $button_radius + 0.5px;
+
+    > overlay {
+      border-top-left-radius: $button_radius;
+      border-top-right-radius: $button_radius;
+    }
+  }
+
+  &.bottom {
+    border-bottom-left-radius: $button_radius + 0.5px;
+    border-bottom-right-radius: $button_radius + 0.5px;
+
+    > overlay {
+      border-bottom-left-radius: $button_radius;
+      border-bottom-right-radius: $button_radius;
+    }
+  }
+
+  &.left,
+  &:first-child:not(.top) {
+    border-top-left-radius: $button_radius + 0.5px;
+    border-bottom-left-radius: $button_radius + 0.5px;
+
+    > overlay {
+      border-top-left-radius: $button_radius;
+      border-bottom-left-radius: $button_radius;
+    }
+  }
+
+  &.right,
+  &:last-child:not(.bottom) {
+    border-top-right-radius: $button_radius + 0.5px;
+    border-bottom-right-radius: $button_radius + 0.5px;
+
+    > overlay {
+      border-top-right-radius: $button_radius;
+      border-bottom-right-radius: $button_radius;
+    }
+  }
+
+  @if $contrast == 'high' {
+    > overlay {
+      box-shadow: inset 0 0 0 1px gtkalpha($view_fg_color, .5);
+    }
+  }
+
+  &.dark > overlay {
+    color: white;
+  }
+
+  &.light > overlay {
+    color: transparentize(black, .25);
+
+    @if $contrast != 'high' {
+      box-shadow: inset 0 0 0 1px gtkalpha($view_fg_color, 0.1);
+    }
+  }
+
+  &:drop(active) {
+    &.light > overlay {
+      box-shadow: inset 0 0 0 2px $drop_target_color;
+    }
+
+    &.dark > overlay {
+      box-shadow: inset 0 0 0 2px $drop_target_color;
+    }
+  }
+
+  &#add-color-button {
+    > overlay {
+      @extend %button_basic;
+
+      border-radius: $button_radius 0 0 $button_radius;
+    }
+
+    &:only-child > overlay { border-radius: $button_radius; }
+  }
+
+  &:disabled {
+    filter: opacity($disabled_opacity);
+  }
+
+  &#editor-color-sample {
+    border-radius: $button_radius;
+
+    > overlay { border-radius: $button_radius + 0.5px; }
+  }
+}
+
+plane {
+  @include focus-ring($offset: 2px, $outer: true);
+}
+
+// colorscale popup
+colorchooser .popover.osd { border-radius: $popover_radius; }
diff --git a/src/sass/libadwaita/widgets/_column-view.scss b/src/sass/libadwaita/widgets/_column-view.scss
new file mode 100644
index 00000000..486bd03a
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_column-view.scss
@@ -0,0 +1,112 @@
+columnview {
+  @include focus-ring();
+
+  &:drop(active) {
+    box-shadow: none;
+  }
+
+  > header > button {
+    @extend %undecorated_button;
+    padding: $base_padding / 2 $base_padding;
+    border-radius: 0;
+    box-shadow: none;
+    line-height: 100%;
+    border-left: 1px solid $border_color;
+
+    &:first-child {
+      border-left-width: 0;
+    }
+
+    > box {
+      color: gtkalpha(currentColor, 0.4);
+      font-weight: 700;
+      font-size: 9pt;
+      border-spacing: $base_padding;
+    }
+
+    &:hover > box {
+      color: gtkalpha(currentColor, 0.7);
+      box-shadow: none;
+    }
+
+    &:active > box {
+      color: currentColor;
+    }
+
+    sort-indicator {
+      &.ascending {
+        -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+      }
+      &.descending {
+        -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+      }
+
+      min-height: 16px;
+      min-width: 16px;
+    }
+  }
+
+  button.dnd,
+  header.button.dnd { // for treeview-like derive widgets
+    &:active, &:selected, &:hover, & {
+      color: $accent_fg_color;
+      background-color: $accent_bg_color;
+      transition: none;
+    }
+  }
+
+  // Remove the default background of the internal list view
+  // since we already apply a background to the column view
+  // with the .view class. Doing this will avoid overdraw.
+  &.view > listview.view {
+    background: none;
+    color: inherit;
+  }
+
+  // move padding to child cells
+  > listview > row {
+    padding: 0;
+
+    // align horizontal sizing with header buttons
+    > cell {
+      padding: 8px 6px;
+
+      &:not(:first-child) {
+        border-left: 1px solid transparent;
+      }
+    }
+  }
+
+  // make column separators visible when :show-column-separators is true
+  &.column-separators {
+    > listview > row > cell,
+    > header > button {
+      border-left-color: $border_color;
+    }
+  }
+
+  > listview:not(.horizontal).separators > row:not(.separator) {
+    border-top: 1px solid $border_color;
+    border-bottom: none;
+  }
+
+  // shrink vertically for .data-table
+  &.data-table > listview > row > cell {
+    padding-top: $base_padding / 2;
+    padding-bottom: $base_padding / 2;
+  }
+
+  @include undershoot(top, $shade_color, true);
+}
+
+columnview row:not(:selected) cell editablelabel:not(.editing):focus-within {
+  outline: 2px solid $focus_border_color;
+}
+
+columnview row:not(:selected) cell editablelabel.editing:focus-within {
+  outline: 2px solid $accent_color;
+}
+
+treeexpander {
+  border-spacing: $base_padding / 2 + 1px;
+}
diff --git a/src/sass/libadwaita/widgets/_deprecated.scss b/src/sass/libadwaita/widgets/_deprecated.scss
new file mode 100644
index 00000000..0abf24b4
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_deprecated.scss
@@ -0,0 +1,343 @@
+// The following styles are deprecated in GTK and should be removed for GTK 5.x
+
+// .linked >                  element            child
+$deprecated_linked_widgets: ("combobox",         "> box > button.combo"),
+                            ("appchooserbutton", "> combobox > box > button.combo");
+
+/***********************
+ * GtkAppChooserDialog *
+ ***********************/
+
+window.appchooser {
+  headerbar.titlebar {
+    @extend .flat;
+    @extend %headerbar-shrunk;
+
+    > windowhandle {
+      padding-top: 3px;
+    }
+
+    box.start + box {
+      margin-top: -6px;
+      margin-bottom: -6px;
+      min-height: 12px;
+    }
+  }
+
+  searchbar {
+    @extend %searchbar-flat;
+
+    background: none;
+  }
+
+  &.csd searchbar {
+    @extend %searchbar-shrunk;
+  }
+
+  .dialog-vbox > box > box:not(.dialog-action-area) {
+    margin: 6px;
+  }
+
+  .dialog-action-area {
+    margin-top: 0;
+  }
+}
+
+/****************
+ * GtkAssistant *
+ ****************/
+
+window.assistant {
+  .sidebar {
+    padding: $menu-margin;
+    background-color: $sidebar_bg_color;
+    color: $sidebar_fg_color;
+
+    &:not(separator) {
+      &:dir(ltr) {
+        border-right: none;
+        box-shadow: inset -1px 0 $border_color;
+      }
+
+      &:dir(rtl) {
+        box-shadow: inset 1px 0 $border_color;
+      }
+    }
+
+    &:backdrop {
+      background-color: $sidebar_backdrop_color;
+      transition: background-color $backdrop_transition;
+    }
+
+    > label {
+      padding: 6px 12px;
+      border-radius: $menuitem_radius;
+
+      &.highlight {
+        background-color: $selected_color;
+      }
+    }
+  }
+}
+
+/***************
+ * GtkComboBox *
+ ***************/
+
+combobox {
+  @extend dropdown;
+
+  // Since cell view is taller than a plain label, make sure
+  // the button doesn't get stretched with a larger font
+  button {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    min-height: 30px;
+  }
+}
+
+/***************
+ * GtkIconView *
+ ***************/
+
+iconview {
+  @extend %view;
+
+  @if $contrast == 'high' {
+    &:selected {
+      box-shadow: inset 0 0 0 1px $border_color;
+    }
+  }
+
+  @include focus-ring();
+
+  &:drop(active) {
+    box-shadow: none;
+  }
+
+  > dndtarget:drop(active) {
+    border-style: solid;
+    border-width: 1px;
+    border-color: $drop_target_color;
+  }
+}
+
+/**************
+ * GtkInfoBar *
+ **************/
+
+infobar {
+  > revealer > box {
+    padding: 6px;
+    padding-bottom: 7px;
+    border-spacing: 6px;
+    box-shadow: inset 0 -1px $border_color;
+
+    > box {
+      border-spacing: 6px;
+    }
+  }
+
+  &.action:hover > revealer > box {
+    background-image: image(gtkalpha(currentColor, .05));
+  }
+
+  &.action:active > revealer > box {
+    background-image: image(gtkalpha(currentColor, .1));
+  }
+
+  @each $i_type, $i_color in (info, $accent_bg_color),
+                             (question, $accent_bg_color),
+                             (warning, $warning_bg_color),
+                             (error, $error_bg_color) {
+    &.#{$i_type} > revealer > box {
+      background-color: gtkmix($i_color, $window_bg_color, 30%);
+      color: $window_fg_color;
+    }
+  }
+
+ .close {
+    min-width: 18px;
+    min-height: 18px;
+    padding: 4px;
+    border-radius: 50%;
+    @extend %button_basic_flat;
+  }
+}
+
+/****************
+ * GtkStatusBar *
+ ****************/
+
+statusbar {
+  padding: 6px 10px 6px 10px;
+}
+
+/***************
+ * GtkTreeView *
+ ***************/
+
+// To be used for opaque elements overlaid atop the selected row
+$treeview_selection_opaque: gtkmix(currentColor, $view_bg_color, 10%);
+$treeview_borders_opaque: gtkmix(currentColor, $view_bg_color, if($contrast == 'high', 40%, 20%));
+
+treeview.view {
+  @extend columnview;
+
+  border-left-color: $treeview_borders_opaque; // this is actually the tree lines color,
+  border-top-color: $treeview_borders_opaque; // while this is the grid lines color, better then nothing
+
+  &:selected {
+    &:focus, & {
+      border-radius: 0;
+    }
+  }
+
+  &.separator {
+    min-height: 2px;
+    color: $border_color;
+  }
+
+  &.expander {
+    // GtkTreeView uses the larger of the expander’s min-width and min-height
+    min-width: 16px;
+    min-height: 16px;
+    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+
+    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
+
+    color: gtkalpha(currentColor, .7);
+
+    &:hover, &:active { color: currentColor; }
+
+    &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+
+    &:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
+  }
+
+  > dndtarget:drop(active) {
+    border-style: solid none;
+    border-width: 1px;
+    border-color: $drop_target_color;
+
+    &.after { border-top-style: none; }
+
+    &.before { border-bottom-style: none; }
+  }
+
+  > header > button {
+    padding-left: 4px;
+    padding-right: 4px;
+    border-bottom: 1px solid $border_color;
+  }
+
+  &.progressbar { // progress bar in treeviews
+    &, &:selected {
+      background-color: $accent_bg_color;
+      color: $accent_fg_color;
+    }
+
+    box-shadow: none;
+  }
+
+  &.trough { // progress bar trough in treeviews
+    background-color: gtkalpha(currentColor, 0.1);
+  }
+
+  ~ undershoot.top {
+    box-shadow: none;
+    background: none;
+  }
+
+  acceleditor > label {
+    // see tests/testaccel in GTK to test
+    background-color: $treeview_selection_opaque;
+  }
+}
+
+treeview.navigation-sidebar {
+  padding: 0;
+
+  &:selected {
+    &:focus, & {
+      background-color: $selected_color;
+    }
+  }
+}
+
+treeview entry {
+  &:focus-within {
+    &:dir(rtl), &:dir(ltr) { // specificity bump hack
+      background-color: $view_bg_color;
+      transition-property: color, background;
+    }
+  }
+
+  &.flat, & {
+    border-radius: 0;
+    background-image: none;
+    background-color: $view_bg_color;
+
+    &:focus-within { border-color: $accent_color; }
+  }
+}
+
+treeview spinbutton:not(.vertical) {
+  min-height: 0;
+  border-style: none;
+  border-radius: 0;
+
+  > text {
+    min-height: 0;
+    padding: 1px 2px;
+  }
+}
+
+// The following styles are deprecated in libadwaita and should be removed in 2.x
+
+// Deprecated: use .boxed-list instead
+list.content {
+  @extend .boxed-list;
+}
+
+// Deprecated: use .navigation-sidebar instead
+.sidebar {
+  &:not(separator) {
+    &:dir(ltr),
+    &.left,
+    &.left:dir(rtl) {
+      border-right: 1px solid $border_color;
+      border-left-style: none;
+    }
+
+    &:dir(rtl),
+    &.right {
+      border-left: 1px solid $border_color;
+      border-right-style: none;
+    }
+  }
+
+  listview.view,
+  list {
+    background-color: transparent;
+    color: inherit;
+  }
+
+  paned &,
+  .sidebar-pane & {
+    &.left, &.right,
+    &.left:dir(rtl),
+    &:dir(rtl), &:dir(ltr), & { border-style: none; }}
+}
+
+// Deprecated: use .title-1
+.large-title {
+  font-weight: 300;
+  font-size: 24pt;
+}
+
+// Deprecated: use AdwToolbarView
+
+headerbar.flat {
+  @extend %headerbar-flat;
+}
diff --git a/src/sass/libadwaita/widgets/_dialogs.scss b/src/sass/libadwaita/widgets/_dialogs.scss
new file mode 100644
index 00000000..0a1cb7d9
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_dialogs.scss
@@ -0,0 +1,125 @@
+.dialog-action-area {
+  margin: $base_padding;
+  border-spacing: $base_padding;
+}
+
+/****************
+ * Print dialog *
+*****************/
+
+window.print {
+  drawing {
+    color: $window_fg_color;
+    background: none;
+    border: none;
+    padding: 0;
+
+    paper {
+      background-color: white;
+      color: transparentize(black, .2);
+      background-clip: padding-box;
+      border: 1px solid $border_color;
+    }
+  }
+
+  headerbar.titlebar {
+    @extend .flat;
+  }
+
+  .dialog-action-box {
+    @extend .view;
+  }
+}
+
+/********************
+ * Page setup dalog *
+ ********************/
+
+window.pagesetup {
+  headerbar.titlebar {
+    @extend .flat;
+  }
+}
+
+/******************
+ * GtkAboutDialog *
+ ******************/
+
+window.aboutdialog {
+  headerbar.titlebar {
+    @extend .flat;
+  }
+
+  image.large-icons {
+    -gtk-icon-size: 128px;
+  }
+}
+
+/*************************
+ * GtkColorChooserDialog *
+ *************************/
+window.colorchooser {
+  headerbar.titlebar {
+    @extend .flat;
+  }
+}
+
+/*************
+ * AdwDialog *
+ *************/
+
+floating-sheet {
+  > dimming {
+    background-color: gtkalpha($shade_color, 2);
+  }
+
+  > sheet {
+    border-radius: $window_radius;
+    box-shadow: 0 2px 8px 2px transparentize(black, 0.93),
+                0 3px 20px 10px transparentize(black, 0.95),
+                0 6px 32px 16px transparentize(black, 0.98),
+                0 0 0 1px $shade_color;
+    outline: 1px solid $window_outline_color;
+    outline-offset: -1px;
+  }
+}
+
+dialog.bottom-sheet {
+  &.landscape sheet {
+    margin-left: 30px;
+    margin-right: 30px;
+
+    > outline {
+      &.flush-left, &.flush-right, &.flush-left.flush-right {
+        box-shadow: inset 1px 0 $window_outline_color,
+                    inset -1px 0 $window_outline_color,
+                    inset 0 1px $window_outline_color;
+      }
+    }
+  }
+}
+
+dialog-host > dialog.background {
+  background: none;
+
+  sheet {
+    background-color: $window_bg_color;
+    color: $window_fg_color;
+  }
+}
+
+dialog-host > dialog.view {
+  background: none;
+
+  sheet {
+    @extend %view;
+  }
+}
+
+dialog-host > dialog.osd {
+  background: none;
+
+  sheet {
+    @extend %osd;
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_dropdowns.scss b/src/sass/libadwaita/widgets/_dropdowns.scss
new file mode 100644
index 00000000..efdb07b7
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_dropdowns.scss
@@ -0,0 +1,38 @@
+dropdown {
+  > button > box {
+    border-spacing: 6px;
+
+    > stack > row.activatable {
+      &:hover, &:active { background: none; }
+    }
+  }
+
+  arrow {
+    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+    min-height: 16px;
+    min-width: 16px;
+  }
+
+  &:drop(active) { // FIXME: untested
+    box-shadow: none;
+
+    button.combo { @extend %button_basic_drop_active; }
+  }
+
+  popover.menu {
+    padding-top: 6px;
+
+    listview > row {
+      min-width: 0;
+    }
+
+    // dropdowns with searchboxes on top
+    .dropdown-searchbar {
+      padding: 6px;
+
+      + scrolledwindow {
+        @include undershoot(top, $popover_shade_color);
+      }
+    }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_emoji-chooser.scss b/src/sass/libadwaita/widgets/_emoji-chooser.scss
new file mode 100644
index 00000000..4718ac29
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_emoji-chooser.scss
@@ -0,0 +1,91 @@
+popover.emoji-picker > contents {
+  padding: 0;
+}
+
+.emoji-searchbar {
+  padding: 6px;
+}
+
+.emoji-toolbar {
+  // flowbox children already have 3px padding, so we only need 3px more to
+  // get the regular 6px. We also don't need spacing, for the same reason.
+  padding: 3px;
+}
+
+button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+  @extend %circular_button;
+  @extend %button_basic_flat;
+
+  min-width: 32px;
+  min-height: 32px;
+}
+
+popover.emoji-picker emoji {
+  font-size: x-large;
+  padding: 6px;
+  border-radius: $button_radius;
+
+  &:focus,
+  &:hover {
+    background: $hover_color;
+  }
+
+  &:active {
+    background: $active_color;
+  }
+
+  @if $contrast == 'high' {
+    &:focus,
+    &:hover,
+    &:active {
+      box-shadow: inset 0 0 0 1px $border_color;
+    }
+  }
+}
+
+popover.emoji-picker scrolledwindow.view {
+  background: none;
+  color: inherit;
+
+  @include undershoot(top, $popover_shade_color);
+  @include undershoot(bottom, $popover_shade_color);
+}
+
+// Emoji completion popover
+
+popover.emoji-completion > contents {
+  padding: $menu_margin;
+  padding-bottom: $menu_margin - 2px;
+}
+
+emoji-completion-row {
+  // emoji extends quite a bit into the padding, so we can't use the same padding on all sides
+  padding: $menu_padding - 6px;
+  margin-bottom: 2px;
+  border-radius: $menuitem_radius;
+
+  &:dir(ltr) { padding-right: $menu_padding; }
+  &:dir(rtl) { padding-left: $menu_padding; }
+
+   > box {
+    border-spacing: $menu_padding - 6px;
+  }
+
+  &:focus,
+  &:hover {
+    background-color: $selected_color;
+    color: $popover_fg_color;
+  }
+
+  &:active {
+    background-color: $active_color; // matching buttons
+  }
+
+  @if $contrast == 'high' {
+    &:focus,
+    &:hover,
+    &:active {
+      box-shadow: inset 0 0 0 1px $border_color;
+    }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_entries.scss b/src/sass/libadwaita/widgets/_entries.scss
new file mode 100644
index 00000000..c7e47f1c
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_entries.scss
@@ -0,0 +1,103 @@
+%entry,
+entry {
+  %entry_basic, & {
+    min-height: $medium_size;
+    padding-left: $base_padding * 1.5;
+    padding-right: $base_padding * 1.5;
+    border-radius: $button_radius;
+    border-spacing: $base_padding;
+    background-color: $button_color;
+    background-clip: padding-box;
+    caret-color: currentColor;
+
+    @include focus-ring($focus-state: ':focus-within');
+
+    .osd &:focus-within {
+      outline-color: $osd_focus_color;
+    }
+
+    > text {
+      > placeholder {
+        @extend .dim-label;
+      }
+
+      > block-cursor {
+        color: $view_bg_color;
+        background-color: $view_fg_color;
+      }
+    }
+
+    &.flat {
+      &:focus-within, &:disabled, & {
+        min-height: 0;
+        padding: 2px;
+        background-color: transparent;
+        box-shadow: none;
+        border-radius: 0;
+      }
+    }
+
+    &:disabled { filter: opacity($disabled_opacity); }
+
+    // entry error and warning style
+    @each $e_type, $e_color in (error,   $error_color),
+                               (warning, $warning_color),
+                               (success, $success_color) {
+      &.#{$e_type} {
+        @include focus-ring($focus-state: ':focus-within', $fc: gtkalpha(currentColor, $focus_border_opacity));
+
+        > text {
+          > selection:focus-within { background-color: gtkalpha($e_color, .2); }
+
+          > cursor-handle > contents { background-color: currentColor; }
+        }
+
+        > progress > trough > progress {
+          border-color: currentColor;
+        }
+      }
+    }
+
+    > image { // icons inside the entry
+      opacity: if($contrast == 'high', .85, .7);
+
+      &:hover { opacity: 1; }
+
+      &:active {
+        opacity: if($contrast == 'high', .9, .8);
+      }
+
+      &.left { margin-right: 6px; }
+      &.right { margin-left: 6px; }
+    }
+
+    &.password image.caps-lock-indicator {
+      opacity: $dimmer_opacity;
+    }
+
+    &:drop(active) {
+      &:focus-within, & {
+        border-color: $drop_target_color;
+        box-shadow: inset 0 0 0 1px $drop_target_color;
+      }
+    }
+  }
+
+  > progress {
+    margin-bottom: 3px;
+
+    > trough > progress {
+      background-color: transparent;
+      background-image: none;
+      border-radius: 0;
+      border-width: 0 0 2px;
+      border-color: $accent_bg_color;
+      border-style: solid;
+      box-shadow: none;
+    }
+  }
+
+  .osd & > progress > trough > progress {
+    border-color: $osd_fill_bg_color;
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_expanders.scss b/src/sass/libadwaita/widgets/_expanders.scss
new file mode 100644
index 00000000..77de60c7
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_expanders.scss
@@ -0,0 +1,27 @@
+expander {
+  min-width: 16px;
+  min-height: 16px;
+  -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+  &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
+
+  &:disabled { filter: opacity($disabled_opacity); }
+
+  &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+}
+
+expander-widget {
+  @include focus-ring("> box > title");
+
+  > box > title {
+    border-radius: $button_radius;
+
+    > expander {
+      opacity: .7;
+    }
+
+    &:hover > expander,
+    &:active > expander {
+      opacity: 1;
+    }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_file-chooser.scss b/src/sass/libadwaita/widgets/_file-chooser.scss
new file mode 100644
index 00000000..cc5aa65e
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_file-chooser.scss
@@ -0,0 +1,229 @@
+placessidebar {
+  .navigation-sidebar > row {
+    // Needs overriding of the `.navigation-sidebar > row` padding
+    padding: 0;
+
+    // Using margins/padding directly in the SidebarRow
+    // will make the animation of the new bookmark row jump
+    > revealer { padding: 0 14px; }
+
+    image.sidebar-icon {
+      &:dir(ltr) { padding-right: 8px; }
+      &:dir(rtl) { padding-left: 8px; }
+    }
+
+    label.sidebar-label {
+      &:dir(ltr) { padding-right: 2px; }
+      &:dir(rtl) { padding-left: 2px; }
+    }
+
+    @at-root button.sidebar-button {
+      @extend %button_basic_flat;
+
+      min-height: 26px;
+      min-width: 26px;
+      margin-top: $base_padding / 2;
+      margin-bottom: $base_padding / 2;
+      padding: 0;
+      border-radius: 100%;
+    }
+
+    // in the sidebar case it makes no sense to click the selected row
+    &:selected:active { box-shadow: none; }
+
+    &.sidebar-placeholder-row {
+      padding: 0 8px;
+      min-height: 2px;
+      background-image: image($drop_target_color);
+      background-clip: content-box;
+    }
+
+    &.sidebar-new-bookmark-row { color: $accent_color; }
+
+    &:drop(active):not(:disabled) {
+      color: $drop_target_color;
+      box-shadow: inset 0 0 0 1px $drop_target_color;
+    }
+  }
+}
+
+row {
+  image.sidebar-icon {
+    opacity: 0.7; // see bug #786613 for details on this oddity
+  }
+
+  .sidebar-button {
+    opacity: 0.7;
+
+    &:hover,
+    &:active,
+    &.keyboard-activating {
+      opacity: 1;
+    }
+  }
+}
+
+placesview {
+  .server-list-button > image {
+    transition: -gtk-icon-transform 200ms $ease-out-quad;
+    -gtk-icon-transform: rotate(0turn);
+  }
+
+  .server-list-button:checked > image {
+    -gtk-icon-transform: rotate(-0.5turn);
+  }
+
+  > actionbar > revealer > box > box {
+    border-spacing: $base_padding;
+  }
+}
+
+filechooser {
+  box-shadow: 0 1px $border_color;
+
+  // Make the toolbar buttons flat like on an actual toolbar
+  #pathbarbox > stack > box > {
+    button,
+    box > button,
+    menubutton > button {
+      @extend %button_basic_flat;
+    }
+  }
+
+  pathbar button {
+    &:not(.image-button) {
+      padding-left: $base_padding * 1.5;
+      padding-right: $base_padding * 1.5;
+    }
+
+    // Icon + label buttons
+    > box {
+      border-spacing: 4px;
+
+      > label {
+        padding-left: 2px;
+        padding-right: 2px;
+      }
+    }
+  }
+
+  columnview > listview > row > cell {
+    padding: 0;
+
+    > filelistcell {
+      padding: 8px $base_padding;
+    }
+  }
+
+  gridview {
+    @include undershoot(top, $shade_color, true);
+    padding: $base_padding * 2.5;
+
+    > child {
+      border-radius: $card_radius;
+      padding: 0;
+      margin: $base_padding / 2;
+
+      > filelistcell {
+        padding: $base_padding $base_padding * 2;
+      }
+
+      & filethumbnail image {
+        filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.3));
+      }
+
+      & box {
+        border-spacing: $base_padding;
+      }
+    }
+  }
+
+  // Style the outer action bar with a toolbar view-like shadow
+  > box > actionbar {
+    box-shadow: 0 -1px $border_color;
+
+    > revealer > box {
+      box-shadow: none;
+      padding-top: $base_padding;
+    }
+  }
+
+  // Style the remote search action bar like a banner
+  scrolledwindow + actionbar > revealer > box {
+    background-color: gtkmix($accent_bg_color, $view_bg_color, 30%);
+    color: $window_fg_color;
+    box-shadow: none;
+    padding-top: $base_padding;
+    font-weight: bold;
+
+    &:backdrop {
+      background-color: gtkmix($accent_bg_color, $view_bg_color, 15%);
+    }
+  }
+
+  placesview {
+    // Only the bottom undershoot, since the action bar is guaranteed to be
+    // there, while the search bar can show and hide. That's a problem, since
+    // we only need top undershoot when it's visible, to avoid a double shadow.
+    > stack > scrolledwindow {
+      @include undershoot(bottom);
+    }
+
+    // Make the Connect to Server action bar flat
+    > actionbar > revealer > box {
+      background: $view_bg_color;
+      color: $view_fg_color;
+      box-shadow: none;
+      padding-top: $base_padding;
+
+      &:backdrop {
+        background: $view_bg_color;
+        transition: none;
+      }
+    }
+  }
+
+  placessidebar {
+    background-color: $sidebar_bg_color;
+    color: $sidebar_fg_color;
+
+    &:backdrop {
+      background-color: $sidebar_backdrop_color;
+      transition: background-color $backdrop_transition;
+    }
+  }
+
+  // The separator is a part of GtkPaned, so it needs to be styled separately
+  paned.horizontal > separator {
+    &:dir(ltr) {
+      box-shadow: inset 1px 0 $sidebar_bg_color,
+                  inset 1px 0 $border_color;
+
+      &:backdrop {
+        box-shadow: inset 1px 0 $sidebar_backdrop_color,
+                    inset 1px 0 $border_color;
+      }
+    }
+
+    &:dir(rtl) {
+      box-shadow: inset -1px 0 $sidebar_bg_color,
+                  inset -1px 0 $border_color;
+
+      &:backdrop {
+        box-shadow: inset -1px 0 $sidebar_backdrop_color,
+                    inset -1px 0 $border_color;
+      }
+    }
+
+    &:backdrop {
+      transition: box-shadow $backdrop_transition;
+    }
+  }
+}
+
+/* Fix header bar height in the file chooser */
+window.filechooser headerbar box.start + box.vertical {
+  margin-top: -$base_padding;
+  margin-bottom: -$base_padding;
+  min-height: 12px;
+}
diff --git a/src/sass/libadwaita/widgets/_header-bar.scss b/src/sass/libadwaita/widgets/_header-bar.scss
new file mode 100644
index 00000000..a7db42c2
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_header-bar.scss
@@ -0,0 +1,336 @@
+headerbar {
+  min-height: $large_size;
+  background-color: $headerbar_backdrop_color;
+  color: $headerbar_fg_color;
+  box-shadow: inset 0 -1px $headerbar_border_color;
+  margin: 0 -1px;
+  @extend %toolbar;
+
+  > windowhandle > box {
+    padding: $base_padding $base_padding + 1px;
+
+    > box.start,
+    > box.end {
+      border-spacing: $base_padding;
+    }
+
+    &, > widget {
+      > box.start:dir(ltr),
+      > box.end:dir(rtl) {
+        margin-right: $base_padding;
+      }
+
+      > box.start:dir(rtl),
+      > box.end:dir(ltr) {
+        margin-left: $base_padding;
+      }
+    }
+  }
+
+  &:backdrop {
+    background-color: $headerbar_bg_color;
+    transition: background-color $backdrop_transition;
+
+    > windowhandle {
+      // opacity looks weird with GtkSwitch, but filter works fine
+      filter: opacity(0.5);
+
+      transition: filter $backdrop_transition;
+    }
+  }
+
+  &.default-decoration {
+    padding: 0;
+    margin: 0;
+    box-shadow: none;
+    border: none;
+    min-height: $medium_size;
+
+    > windowhandle > box {
+      padding: $base_padding / 2;
+    }
+
+    windowcontrols {
+      > button {
+        @if $window_button == 'mac' {
+          min-width: 16px;
+          min-height: 16px;
+          margin: 0 $base_padding - 2px;
+          padding: 0;
+        } @else {
+          min-width: 22px;
+          min-height: 22px;
+          margin: 0 $base_padding - 2px;
+          padding: 0;
+        }
+      }
+
+      > .icon {
+        margin: $base_padding;
+      }
+    }
+  }
+}
+
+window > {
+  .titlebar:not(.flat) {
+    box-shadow: inset 0 -1px $headerbar_border_color;
+  }
+
+  .titlebar headerbar:not(.flat) {
+    box-shadow: inset 0 -1px $headerbar_border_color;
+  }
+
+  headerbar.titlebar,
+  .titlebar headerbar {
+    min-height: $large_size;
+
+    > windowhandle > box {
+      padding-bottom: $base_padding;
+    }
+
+    &.default-decoration {
+      min-height: $medium_size;
+
+      > windowhandle > box {
+        padding: $base_padding / 2;
+      }
+    }
+  }
+}
+
+%headerbar-flat {
+  background: none;
+  box-shadow: none;
+  color: inherit;
+  min-height: $large_size;
+
+  > windowhandle > box {
+    padding-bottom: $base_padding;
+  }
+
+  &.default-decoration {
+    min-height: $medium_size;
+
+    > windowhandle > box {
+      padding: $base_padding / 2;
+    }
+  }
+}
+
+%headerbar-inline {
+  @extend %headerbar-flat;
+
+  &:backdrop {
+    transition: none;
+
+    > windowhandle {
+      filter: none;
+      transition: none;
+    }
+  }
+
+  window.devel & > windowhandle {
+    background-image: none;
+  }
+}
+
+%headerbar-shrunk {
+  min-height: $large_size - $base_padding;
+
+  > windowhandle > box {
+    padding-top: $base_padding / 2;
+    padding-bottom: $base_padding / 2;
+  }
+
+  &.default-decoration {
+    min-height: $medium_size;
+
+    > windowhandle > box {
+      padding-top: 0px;
+      padding-bottom: 0px;
+    }
+  }
+}
+
+.titlebar:not(headerbar) {
+  separator { background-color: $headerbar_border_color; }
+}
+
+/*********************
+ * GtkWindowControls *
+ *********************/
+
+$titlebutton_min: $button-min;
+$titlebutton_max: $button-max;
+$titlebutton_close: $button-close;
+
+%mac_window_button {
+  min-height: 16px;
+  min-width: 16px;
+  padding: ($medium_size - 16px) / 2 0;
+  margin-left: $base_padding - 2px;
+  margin-right: $base_padding - 2px;
+  box-shadow: none;
+
+  &.minimize, &.maximize, &.close {
+    color: transparent;
+    background: none;
+
+    &:hover, &:active {
+      box-shadow: none;
+    }
+
+    &:active > image {
+      background-color: gtkalpha(black, if($topbar == 'dark', 0.25, 0.12));
+    }
+
+    &:hover, &:active {
+      color: if($colorscheme != 'dracula', white, rgba(black, 0.5));
+    }
+
+    &:backdrop {
+      > image { background-color: gtkalpha($headerbar_fg_color, 0.3); }
+
+      &:hover, &:active {
+        color: gtkalpha($headerbar_fg_color, 0.45);
+      }
+    }
+  }
+
+  &.minimize { // Window minimize button
+    > image { background-color: $titlebutton_min; }
+
+    &:active > image {
+      background-color: gtkmix($headerbar_fg_color, $titlebutton_min, 25%);
+    }
+  }
+
+  &.maximize { // Window maximize button
+    > image { background-color: $titlebutton_max; }
+
+    &:active > image {
+      background-color: gtkmix($headerbar_fg_color, $titlebutton_max, 25%);
+    }
+  }
+
+  &.close { // Window close button
+    > image { background-color: $titlebutton_close; }
+
+    &:active > image {
+      background-color: gtkmix($headerbar_fg_color, $titlebutton_close, 25%);
+    }
+  }
+}
+
+%normal_window_button {
+  min-height: 22px;
+  min-width: 22px;
+  padding: ($medium-size - 22px) / 2 0;
+  margin-left: $base_padding - 2px;
+  margin-right: $base_padding - 2px;
+
+  &.minimize, &.maximize, &.close {
+    color: gtkalpha($headerbar_fg_color, 0.75);
+
+    &, &:hover, &:active, &:backdrop {
+      background: none;
+      box-shadow: none;
+    }
+
+    > image { background-color: gtkalpha(currentColor, 0.1); }
+
+    &:hover {
+      color: $headerbar_fg_color;
+
+      > image { background-color: gtkalpha(currentColor, 0.15); }
+    }
+
+    &:active {
+      color: $headerbar_fg_color;
+
+      > image { background-color: gtkalpha(currentColor, 0.2); }
+    }
+
+    &:backdrop {
+      opacity: 0.65;
+    }
+  }
+}
+
+windowcontrols {
+  border-spacing: $base_padding;
+
+  &:not(.empty) {
+    &.start:dir(ltr),
+    &.end:dir(rtl) {
+      margin-right: $base_padding;
+      margin-left: $base_padding;
+    }
+
+    &.start:dir(rtl),
+    &.end:dir(ltr) {
+      margin-left: $base_padding;
+      margin-right: $base_padding;
+    }
+  }
+
+  > button {
+    @if $window_button == 'mac' {
+      @extend %mac_window_button;
+    } @else {
+      @extend %normal_window_button;
+    }
+
+    > image {
+      padding: 0;
+      border-radius: 100%;
+      transition: $button_transition;
+    }
+  }
+
+  > .icon {
+    margin: 9px;
+  }
+}
+
+/******************
+ * AdwWindowTitle *
+ ******************/
+
+headerbar,
+windowtitle {
+  .title {
+    padding-left: 12px;
+    padding-right: 12px;
+    font-weight: bold;
+  }
+
+  .subtitle {
+    font-size: smaller;
+    padding-left: 12px;
+    padding-right: 12px;
+    @extend .dim-label;
+  }
+}
+
+windowtitle {
+  margin-top: -6px;
+  margin-bottom: -6px;
+  min-height: 12px;
+}
+
+// Development versions of apps to use a differently styled headerbar
+
+window.devel {
+  headerbar > windowhandle {
+    background-image: cross-fade(5% -gtk-recolor(url("assets/devel-symbolic.svg")),
+                                 image(transparent));
+    background-repeat: repeat-x;
+  }
+
+  dialog headerbar > windowhandle {
+    background-image: unset;
+    background-repeat: unset;
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_labels.scss b/src/sass/libadwaita/widgets/_labels.scss
new file mode 100644
index 00000000..10f3a187
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_labels.scss
@@ -0,0 +1,92 @@
+label {
+  caret-color: currentColor;
+
+  &.separator {
+    @extend .dim-label;
+  }
+
+  &:disabled {
+    filter: opacity($disabled_opacity);
+  }
+}
+
+.dim-label {
+  opacity: $dim_label_opacity;
+}
+
+.accent {
+  color: $accent_color;
+}
+
+.success {
+  color: $success_color;
+}
+
+.warning {
+  color: $warning_color;
+}
+
+.error {
+  color: $error_color;
+}
+
+/**********************
+ * General Typography *
+ **********************/
+
+.title-1 {
+  font-weight: 800;
+  font-size: 20pt;
+}
+
+.title-2 {
+  font-weight: 800;
+  font-size: 15pt;
+}
+
+.title-3 {
+  font-weight: 700;
+  font-size: 15pt;
+}
+
+.title-4 {
+  font-weight: 700;
+  font-size: 13pt;
+}
+
+.heading {
+  font-weight: 700;
+  font-size: 11pt;
+}
+
+.body {
+  font-weight: 400;
+  font-size: 11pt;
+}
+
+.caption-heading {
+  font-weight: 700;
+  font-size: 9pt;
+}
+
+.caption {
+  font-weight: 400;
+  font-size: 9pt;
+}
+
+.monospace {
+  font-family: monospace;
+}
+
+.numeric {
+  font-feature-settings: "tnum";
+}
+
+/*******************
+ * Editable Labels *
+ *******************/
+
+editablelabel > stack > text {
+  color: $view_fg_color;
+  background-color: $view_bg_color;
+}
diff --git a/src/sass/libadwaita/widgets/_level-bar.scss b/src/sass/libadwaita/widgets/_level-bar.scss
new file mode 100644
index 00000000..bf75593d
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_level-bar.scss
@@ -0,0 +1,100 @@
+$_levelbar_size: 8px;
+$_levelbar_border_radius: 99px;
+
+levelbar {
+  &:disabled {
+    filter: opacity($disabled_opacity);
+  }
+
+  &.horizontal {
+    trough > block {
+      min-height: $_levelbar_size;
+      border-radius: $_levelbar_border_radius;
+
+      &.empty,
+      &.full {
+        border-radius: $_levelbar_border_radius;
+      }
+    }
+
+    // segmented level bar
+    &.discrete > trough > block {
+      min-height: $_levelbar_size;
+      margin-right: 2px;
+      min-width: 26px;
+      border-radius: 0;
+
+      &:first-child {
+        border-radius: $_levelbar_border_radius 0 0 $_levelbar_border_radius;
+      }
+
+      &:last-child {
+        border-radius: 0 $_levelbar_border_radius $_levelbar_border_radius 0;
+        margin-right: 0;
+      }
+    }
+  }
+
+  &.vertical {
+    trough > block {
+      min-width: $_levelbar_size;
+      border-radius: $_levelbar_border_radius;
+
+      &.empty,
+      &.full {
+        border-radius: $_levelbar_border_radius;
+      }
+    }
+
+    // segmented level bar
+    &.discrete > trough > block {
+      min-width: $_levelbar_size;
+      margin-bottom: 2px;
+      min-height: 26px;
+      border-radius: 0;
+
+      &:first-child {
+        border-radius: $_levelbar_border_radius $_levelbar_border_radius 0 0;
+      }
+
+      &:last-child {
+        border-radius: 0 0 $_levelbar_border_radius $_levelbar_border_radius;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  > trough {
+    padding: 0;
+
+    // level bar colours
+    > block {
+      &.low {
+        background-color: $warning_bg_color;
+      }
+
+      &.high,
+      &:not(.empty) {
+        background-color: $fill_color;
+      }
+
+      &.full {
+        background-color: $success_bg_color;
+      }
+
+      &.empty {
+        background-color: $trough_color;
+
+        @if $contrast == "high" {
+          box-shadow: inset 0 0 0 1px $border_color;
+        }
+      }
+    }
+  }
+
+  .osd & > trough > block {
+    &.high, &:not(.empty) {
+      background-color: $osd_fill_bg_color;
+    }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_linked.scss b/src/sass/libadwaita/widgets/_linked.scss
new file mode 100644
index 00000000..90e71884
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_linked.scss
@@ -0,0 +1,46 @@
+// .linked >        element       child
+$_linked_widgets: ("%button",     ""),
+                  ("button",      ""),
+                  ("menubutton",  "> button"),
+                  ("dropdown",    "> button"),
+                  ("colorbutton", "> button"),
+                  ("fontbutton",  "> button"),
+                  ("tabbutton",   "> button"),
+                  ("%entry",      ""),
+                  ("entry",       "");
+
+$_linked_widgets: join($_linked_widgets, $deprecated_linked_widgets);
+
+@each $widget, $child in $_linked_widgets {
+  .linked:not(.vertical) > {
+    #{$widget} {
+      &:dir(ltr):not(:first-child) #{$child},
+      &:dir(rtl):not(:last-child) #{$child} {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        margin-left: -1px;
+      }
+
+      &:dir(ltr):not(:last-child) #{$child},
+      &:dir(rtl):not(:first-child) #{$child} {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
+  .linked.vertical {
+    #{$widget} {
+      &:not(:first-child) #{$child} {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        margin-top: -1px;
+      }
+
+      &:not(:last-child) #{$child} {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_links.scss b/src/sass/libadwaita/widgets/_links.scss
new file mode 100644
index 00000000..3377f266
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_links.scss
@@ -0,0 +1,53 @@
+link,
+button.link {
+  color: $link_color;
+  text-decoration: underline;
+  font-weight: inherit;
+
+  &:visited {
+    color: $link_visited_color;
+  }
+
+  &:hover {
+    color: gtkshade($link_color, 1.1);
+  }
+
+  &:active {
+    color: $link_color;
+  }
+
+  &:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
+
+  .osd & {
+    color: $osd_link_color;
+
+    &:visited {
+      color: $osd_link_visited_color;
+    }
+
+    &:active {
+      color: $osd_link_color;
+    }
+  }
+}
+
+link {
+  @include focus-ring();
+
+  .osd &:focus:focus-visible {
+    outline-color: $osd_focus_color;
+  }
+}
+
+button.link {
+  &,
+  &:hover,
+  &:active,
+  &:checked {
+    @extend %undecorated_button;
+  }
+
+  > label {
+    text-decoration: underline;
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_lists.scss b/src/sass/libadwaita/widgets/_lists.scss
new file mode 100644
index 00000000..3f63a116
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_lists.scss
@@ -0,0 +1,576 @@
+$row_transition: background-color 200ms $ease-out-quad,
+                 background-image 200ms $ease-out-quad,
+                 border-radius 200ms $ease-out-quad;
+
+listview,
+list {
+  color: $view_fg_color;
+  background-color: $view_bg_color;
+  background-clip: padding-box;
+  border-color: $border_color;
+
+  > row {
+    padding: $base_padding / 2;
+    background-clip: padding-box;
+  }
+
+  > row.expander { padding: 0px; }
+  > row.expander .row-header { padding: $base_padding / 2; }
+
+  &.horizontal row.separator,
+  &.separators.horizontal > row:not(.separator) {
+    border-left: 1px solid $border_color;
+  }
+
+  &:not(.horizontal) row.separator,
+  &.separators:not(.horizontal) > row:not(.separator) {
+    border-bottom: 1px solid $border_color;
+  }
+}
+
+list.frame { border-radius: $button_radius; }
+
+listview > header {
+  @extend .heading;
+  padding: $base_padding / 2;
+  padding-top: $base_padding * 3;
+  padding-bottom: $base_padding;
+}
+
+row {
+  @include focus-ring();
+
+  .osd & {
+    &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+
+    &.activatable {
+      &:hover { background-color: $hover_color; }
+
+      &:active { background-color: $active_color; }
+
+      // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
+      &.has-open-popup { background-color: $hover_color; }
+
+      &:selected {
+        &:hover { background-color: $selected_hover_color; }
+
+        &:active { background-color: $selected_active_color; }
+
+        &.has-open-popup { background-color: $selected_hover_color; }
+      }
+    }
+
+    &:selected {
+      background-color: $selected_color;
+    }
+  }
+
+  background-clip: padding-box;
+
+  &.activatable {
+    transition: $transition,
+                background-size $ripple_fade_out_duration $ease_out,
+                background-image $ripple_fade_out_opacity_duration $ease_out,
+                font-weight 0;
+    box-shadow: none;
+    background-color: transparent;
+    background-image: radial-gradient(circle, transparent 10%, transparent 0%);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 1000% 1000%;
+
+    &:hover { background-color: $view_hover_color; }
+
+    &:active {
+      transition: $transition,
+                  background-size 0ms,
+                  background-image 0ms,
+                  font-weight 0ms;
+      animation: ripple $ripple_fade_in_duration $ease_out forwards;
+      background-image: radial-gradient(circle, $view_hover_color 10%, transparent 0%);
+      background-size: 0% 0%;
+      background-color: $view_hover_color;
+      box-shadow: none;
+    }
+
+    // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
+    &.has-open-popup { background-color: $view_hover_color; }
+
+    &:selected {
+      &:hover { background-color: $view_selected_hover_color; }
+
+      &:active { background-color: $view_selected_active_color; }
+
+      &.has-open-popup { background-color: $view_selected_hover_color; }
+    }
+  }
+
+  &:selected {
+    background-color: $view_selected_color;
+  }
+}
+
+/*******************************************************
+ * Rich Lists                                          *
+ * Large list usually containing lots of widgets       *
+ * https://gitlab.gnome.org/GNOME/gtk/-/issues/3073    *
+ *******************************************************/
+
+.rich-list { /* rich lists usually containing other widgets than just labels/text */
+  > row {
+    padding: $base_padding + 2px $base_padding * 2;
+    min-height: 32px; /* should be tall even when only containing a label */
+
+    > box {
+      border-spacing: 12px;
+    }
+  }
+
+  > header {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+}
+
+/****************
+ * AdwActionRow *
+ ****************/
+
+row {
+  label.subtitle {
+    font-size: smaller;
+    @extend .dim-label;
+  }
+
+  > box.header {
+    margin-left: 12px;
+    margin-right: 12px;
+    border-spacing: 6px;
+    min-height: 50px;
+
+    > .icon:disabled {
+      filter: opacity($disabled_opacity);
+    }
+
+    > box.title {
+      margin-top: 6px;
+      margin-bottom: 6px;
+      border-spacing: 3px;
+      padding: 0;
+
+      // Specificity bump for header bar
+      &,
+      > .title,
+      > .subtitle {
+        padding: 0;
+        font-weight: inherit;
+      }
+    }
+
+    > .prefixes,
+    > .suffixes {
+      border-spacing: 6px;
+    }
+
+    > .icon,
+    > .prefixes {
+      &:dir(ltr) { margin-right: 6px; }
+      &:dir(rtl) { margin-left: 6px; }
+    }
+  }
+
+  &.property > box.header > box.title > {
+    .title {
+      font-size: smaller;
+      @extend .dim-label;
+    }
+
+    .subtitle {
+      font-size: inherit;
+      opacity: 1;
+    }
+  }
+}
+
+/******************************
+ * AdwEntryRow and AdwSpinRow *
+ ******************************/
+
+row.entry {
+  &:disabled {
+    text {
+      opacity: $disabled_opacity;
+    }
+
+    .dim-label, .subtitle {
+      opacity: 1;
+    }
+  }
+
+  .edit-icon, .indicator {
+    min-width: 24px;
+    min-height: 24px;
+    padding: 5px;
+  }
+
+  .edit-icon:disabled {
+    opacity: $strong_disabled_opacity;
+  }
+
+  .indicator {
+    opacity: $dimmer_opacity;
+  }
+
+  &.monospace {
+    font-family: inherit;
+
+    text {
+      font-family: monospace;
+    }
+  }
+}
+
+row.spin {
+  spinbutton {
+    background: none;
+    border-spacing: 6px;
+    box-shadow: none;
+
+    &, &:focus {
+      outline: none;
+    }
+
+    > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child,
+    > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+      &, &:dir(ltr):last-child, &:dir(rtl):first-child {
+        @extend %button_basic;
+        @extend %circular_button;
+        min-width: 30px;
+        min-height: 30px;
+        margin: 10px 2px;
+        border: none;
+      }
+    }
+  }
+
+  &:disabled spinbutton {
+    > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):last-child,
+    > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+      &, &:dir(ltr):last-child, &:dir(rtl):first-child {
+        &:disabled {
+          filter: none;
+        }
+      }
+    }
+  }
+}
+
+row.entry,
+row.spin {
+  @include focus-ring($focus-state: '.focused', $offset: -1px, $transition: $row_transition);
+
+  &:not(:selected).activatable.focused:hover,
+  &:not(:selected).activatable.focused:active {
+    background-color: transparent;
+  }
+
+  @each $e_type, $e_color, $e_bg_color, $e_fg_color in (error,   $error_color,   $error_bg_color,   $error_fg_color),
+                                                       (warning, $warning_color, $warning_bg_color, $warning_fg_color),
+                                                       (success, $success_color, $success_bg_color, $success_fg_color) {
+    &.#{$e_type} {
+      @include focus-ring($focus-state: '.focused', $offset: -1px, $fc: gtkalpha(currentColor, $focus_border_opacity), $transition: $row_transition);
+
+      text {
+        > selection:focus-within { background-color: gtkalpha($e_color, .2); }
+
+        > cursor-handle > contents { background-color: currentColor; }
+      }
+
+      .dim-label, .subtitle {
+        opacity: 1;
+      }
+
+      .suggested-action {
+        background-color: $e_bg_color;
+        color: $e_fg_color;
+      }
+    }
+  }
+}
+
+/***************
+ * AdwComboRow *
+ ***************/
+
+row.combo {
+  image.dropdown-arrow:disabled {
+    filter: opacity($disabled_opacity);
+  }
+
+  listview.inline {
+    background: none;
+    border: none;
+    box-shadow: none;
+    color: inherit;
+
+    &, &:disabled {
+      background: none;
+      color: inherit;
+    }
+  }
+
+  popover > contents {
+    min-width: 120px;
+
+    .combo-searchbar {
+      margin: 6px;
+
+      + scrolledwindow {
+        @include undershoot(top, $popover_shade_color);
+      }
+    }
+  }
+}
+
+/******************
+ * AdwExpanderRow *
+ ******************/
+
+@mixin margin-start($margin) {
+  &:dir(ltr) {
+    margin-left: $margin;
+  }
+
+  &:dir(rtl) {
+    margin-right: $margin;
+  }
+}
+
+%boxed_list {
+  background-color: $card_bg_color;
+  color: $card_fg_color;
+  border-radius: $button_radius;
+  box-shadow: 0 0 0 1px $border_color;
+}
+
+%boxed_list_row {
+  @include focus-ring($offset: -1px, $transition: $row_transition);
+
+  .osd &:focus:focus-visible {
+    outline-color: $osd_focus_color;
+  }
+
+  border-bottom: 1px solid gtkalpha(currentColor, .08);
+
+  &:not(:selected).activatable {
+    &:hover {
+      background-color: gtkalpha(currentColor, .03);
+    }
+
+    &:active {
+      background-color: gtkalpha(currentColor, .08);
+    }
+
+    &.has-open-popup {
+      background-color: gtkalpha(currentColor, .03);
+    }
+  }
+}
+
+row.expander {
+  // Drop transparent background on expander rows to let nested rows handle it,
+  // avoiding double highlights.
+  background: none;
+  padding: 0px;
+
+  > box > list {
+    background: none;
+    color: inherit;
+  }
+
+  list.nested {
+    background-color: gtkalpha($card_shade_color, .5);
+    color: inherit;
+  }
+
+  list.nested > row {
+    @extend %boxed_list_row;
+  }
+
+  // AdwExpanderRow arrow rotation
+
+  image.expander-row-arrow {
+    @extend .dim-label;
+
+    transition: -gtk-icon-transform 200ms $ease-out-quad;
+    @include margin-start(3px);
+
+    &:dir(ltr) {
+      -gtk-icon-transform: rotate(0.5turn);
+    }
+
+    &:dir(rtl) {
+      -gtk-icon-transform: rotate(-0.5turn);
+    }
+
+    &:disabled {
+      filter: opacity($disabled_opacity);
+    }
+  }
+
+  &:checked image.expander-row-arrow {
+    -gtk-icon-transform: rotate(0turn);
+    opacity: 1;
+
+    &:not(:disabled) {
+      color: $accent_color;
+    }
+  }
+
+  .osd &:checked image.expander-row-arrow:not(:disabled) {
+    color: inherit;
+  }
+
+  &.property box > list > row {
+    @extend .property;
+  }
+}
+
+/***************
+ * AdwButtonRow *
+ ***************/
+
+row.button {
+  > box {
+    margin-left: 12px;
+    margin-right: 12px;
+    border-spacing: 6px;
+    min-height: 50px;
+  }
+
+  .title {
+    @extend .heading;
+  }
+
+  &.suggested-action {
+    color: $accent_color;
+  }
+
+  &.destructive-action {
+    color: $destructive_color;
+  }
+}
+
+/*****************
+ * Boxed Lists *
+ *****************/
+
+list.boxed-list {
+  @extend %boxed_list;
+
+  > row {
+    // Regular rows and expander header rows background
+    &, &.expander row.header {
+      @extend %boxed_list_row;
+    }
+
+    &.expander {
+      border: none;
+    }
+
+    // Rounded top
+    &:first-child {
+      &, &.expander row.header {
+        border-top-left-radius: $button_radius;
+        border-top-right-radius: $button_radius;
+      }
+    }
+
+    // Rounded bottom
+    &:last-child {
+      &,
+      &.expander:not(:checked),
+      &.expander:not(:checked) row.header,
+      &.expander:checked list.nested,
+      &.expander:checked list.nested > row:last-child {
+        border-bottom-left-radius: $button_radius;
+        border-bottom-right-radius: $button_radius;
+        border-bottom-width: 0;
+      }
+    }
+  }
+}
+
+list.boxed-list-separate {
+  background: none;
+  color: $card_fg_color;
+
+  > row {
+    @extend %boxed_list;
+    border: none;
+    margin-bottom: 12px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    @include focus-ring($offset: -1px, $transition: $row_transition);
+
+    .osd &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+
+    &:not(.expander) {
+      &:not(:selected).activatable {
+        &:hover {
+          background-color: $card_bg_color;
+          background-image: image(gtkalpha(currentColor, .03));
+        }
+
+        &:active {
+          background-color: $card_bg_color;
+          background-image: image(gtkalpha(currentColor, .08));
+        }
+
+        &.has-open-popup {
+          background-color: $card_bg_color;
+          background-image: image(gtkalpha(currentColor, .03));
+        }
+      }
+    }
+
+    &.entry, &.spin {
+      &:not(:selected).activatable.focused:hover,
+      &:not(:selected).activatable.focused:active {
+        background-color: $card_bg_color;
+        background-image: none;
+      }
+
+      @each $e_type, $e_color in (error,   $error_color),
+                                 (warning, $warning_color),
+                                 (success, $success_color) {
+        &.#{$e_type} {
+          color: $e_color;
+        }
+      }
+    }
+
+    &.expander {
+      row.header {
+        @extend %boxed_list_row;
+        border-top-left-radius: $button_radius;
+        border-top-right-radius: $button_radius;
+      }
+
+      &:not(:checked) row.header,
+      &.expander:checked list.nested,
+      &.expander:checked list.nested > row:last-child {
+        border-bottom-left-radius: $button_radius;
+        border-bottom-right-radius: $button_radius;
+        border-bottom: none;
+      }
+    }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_menus.scss b/src/sass/libadwaita/widgets/_menus.scss
new file mode 100644
index 00000000..038f09b7
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_menus.scss
@@ -0,0 +1,252 @@
+popover.menu {
+  > contents {
+    min-width: 120px;
+  }
+
+  scrollbar.vertical > range > trough > slider {
+    min-height: 30px;
+  }
+
+  box.inline-buttons {
+    padding: 0 $menu_padding;
+
+    button.image-button.model {
+      @extend %button_basic_flat;
+      min-height: 32px;
+      min-width: 32px;
+      padding: 0;
+      border: none;
+      outline: none;
+      transition: none;
+
+      &:selected {
+        background-color: $selected_color;
+
+        &:active {
+          background-color: $selected_active_color;
+        }
+      }
+    }
+  }
+
+  box.circular-buttons {
+    padding: $menu_padding $menu_padding $base_padding;
+
+    button.circular.image-button.model {
+      @extend %button_basic_flat;
+      outline: none;
+      padding: 11px;
+      box-shadow: inset 0 0 0 1px $border_color;
+
+      &:selected {
+        background-color: $selected_hover_color;
+
+        &:active {
+          background-color: $selected_active_color;
+        }
+      }
+    }
+  }
+
+  > contents {
+    padding: 0;
+
+    &, > scrolledwindow > viewport {
+      > stack > box {
+        padding: $menu_margin;
+      }
+    }
+  }
+
+  separator {
+    margin: $base_padding 0;
+  }
+
+  list separator {
+    margin: 0;
+  }
+
+  accelerator {
+    color: gtkalpha(currentColor, $dim_label_opacity);
+
+    &:dir(ltr) { margin-left: $menu_padding; }
+    &:dir(rtl) { margin-right: $menu_padding; }
+  }
+
+  check,
+  radio {
+    min-width: 16px;
+    min-height: 16px;
+    -gtk-icon-size: 16px;
+    padding: 0;
+
+    &,
+    &:hover:checked,
+    &:hover:indeterminate,
+    &:hover:not(:checked):not(:indeterminate),
+    &:active:checked,
+    &:active:indeterminate,
+    &:active:not(:checked):not(:indeterminate), {
+      background: none;
+      box-shadow: none;
+      color: inherit;
+    }
+  }
+
+  radio {
+    &:checked, &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/menu-radio-symbolic.svg")), -gtk-recolor(url("assets/menu-radio-symbolic@2.svg"))); }
+  }
+
+  .osd & {
+    check, radio {
+      background: none;
+      color: inherit;
+    }
+  }
+
+  radio, check {
+    padding: 0;
+    border: 1px solid gtkalpha(currentColor, $dimmer_opacity);
+  }
+
+  check,
+  radio,
+  arrow {
+    &.left {
+      margin-left: -2px;
+      margin-right: $base_padding;
+    }
+
+    &.right {
+      margin-left: $base_padding;
+      margin-right: -2px;
+    }
+  }
+
+  modelbutton {
+    min-height: 32px;
+    min-width: 40px;
+    padding: 0 $menu_padding;
+    border-radius: $menuitem_radius;
+    @include button(flat-normal);
+
+    &:focus:not(:hover):not(:active) {
+      outline: none;
+      background: none;
+      transition: none;
+    }
+
+    &:hover,
+    &:selected { @include button(flat-hover); }
+
+    &:active { @include button(flat-active); }
+
+    arrow {
+      background: none;
+      min-width: 16px;
+      min-height: 16px;
+      opacity: $dimmer_opacity;
+
+      &:hover { background: none; }
+
+      &:disabled {
+        filter: opacity($disabled_opacity);
+      }
+
+      &.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
+
+      &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
+    }
+  }
+
+  label.title {
+    font-weight: bold;
+    padding: 4px ($menu_padding + 20px); //this will fall apart with font sizing
+  }
+
+  list, listview {
+    background: none;
+    color: inherit;
+
+    > row {
+      border-radius: $menuitem_radius;
+      padding: 0 $menu_padding;
+      min-height: 32px;
+      min-width: 40px;
+
+      &:selected {
+        background: none;
+      }
+
+      &:hover {
+        &, &:selected.activatable {
+          background-color: $selected_color;
+        }
+      }
+
+      &:active {
+        &, &:selected.activatable {
+          background-color: $selected_active_color;
+        }
+      }
+
+      &.has-open-popup {
+        &, &:selected.activatable {
+          background-color: $selected_color;
+        }
+      }
+
+      > box {
+        border-spacing: $base_padding;
+      }
+    }
+  }
+
+  // Standalone lists should have same margins as menu sections,
+  // but we don't want that on lists inside sections themselves
+  contents > list,
+  contents > listview,
+  scrolledwindow > viewport > list,
+  scrolledwindow > listview {
+    padding: $menu_margin 0; //only vertical padding. horizontal row size would clip
+
+    > row {
+      margin: 0 $menu_margin;
+
+      padding: 9px $menu_padding;
+      min-height: 0;
+    }
+  }
+}
+
+menubar {
+  box-shadow: inset 0 -1px $border_color;
+  padding-bottom: 1px;
+
+  > item {
+    min-height: 16px;
+    padding: 4px 8px;
+    border-radius: $button_radius;
+
+    &:selected { //Seems like it :hover even with keyboard focus
+      background-color: $selected_color;
+    }
+
+    //nested submenus
+    popover.menu popover.menu {
+      padding: 0 0 4px 0;
+    }
+
+    popover.menu popover.menu > contents {
+      margin: 0;
+      border-radius: $popover_radius; //including top
+    }
+  }
+}
+
+%menubar-inline {
+  box-shadow: none;
+  padding-bottom: 0;
+}
+
+%menubar-shrunk {}
diff --git a/src/sass/libadwaita/widgets/_message-dialog.scss b/src/sass/libadwaita/widgets/_message-dialog.scss
new file mode 100644
index 00000000..7d82f715
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_message-dialog.scss
@@ -0,0 +1,155 @@
+/********************
+ * GtkMessageDialog *
+ ********************/
+
+window.dialog.message {
+  .titlebar {
+    min-height: 20px;
+    background: none;
+    box-shadow: none;
+    border-style: none;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+  }
+
+  box.dialog-vbox.vertical {
+    margin-top: 6px;
+    border-spacing: 24px;
+
+    > box > box > box > label.title {
+      font-weight: 800;
+      font-size: 15pt;
+    }
+  }
+
+  &.csd {
+    // bigger radius for better antialiasing
+    border-bottom-left-radius: $window_radius+1;
+    border-bottom-right-radius: $window_radius+1;
+
+    .dialog-action-area {
+      border-top: 1px solid $border_color;
+      margin: 0;
+      border-spacing: 0;
+
+      > button {
+        @extend %button_basic_flat;
+        padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround
+        border-radius: 0;
+        border: none;
+        background-clip: padding-box;
+        border-left: 1px solid $border_color;
+
+        &:first-child {
+          border-bottom-left-radius: $window_radius+1;
+          border-left: none;
+        }
+
+        &:last-child {
+          border-bottom-right-radius: $window_radius+1;
+        }
+
+        &.suggested-action {
+          color: $accent_color;
+        }
+
+        &.destructive-action {
+          color: $destructive_color;
+        }
+      }
+    }
+  }
+}
+
+/********************
+ * AdwMessageDialog *
+ ********************/
+
+window.messagedialog,
+dialog-host > dialog.alert sheet,
+window.dialog-window.alert {
+  background-color: $dialog_bg_color;
+  color: $dialog_fg_color;
+}
+
+dialog-host > dialog.alert.floating sheet,
+window.dialog-window.alert {
+  border-radius: $window_radius+1;
+  outline: none;
+}
+
+window.messagedialog,
+dialog.alert {
+  .message-area {
+    padding: 24px 30px;
+    border-spacing: 24px;
+
+    &.has-heading.has-body {
+      border-spacing: 10px;
+    }
+  }
+
+  .response-area > button {
+    padding: 10px 14px;
+    border-radius: 0;
+
+    &.suggested {
+      color: $accent_color;
+    }
+
+    &.destructive {
+      color: $destructive_color;
+    }
+  }
+
+ .response-area {
+    &:not(.compact) > button {
+      margin-top: -1px;
+      margin-right: -1px;
+      margin-left: -1px;
+
+      &:first-child:dir(ltr),
+      &:last-child:dir(rtl) {
+        margin-left: 0;
+      }
+
+      &:last-child:dir(ltr),
+      &:first-child:dir(rtl) {
+        margin-right: 0;
+      }
+    }
+
+    &.compact > button {
+      margin-top: -1px;
+      margin-bottom: -1px;
+
+      &:first-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+window.messagedialog,
+dialog.alert.floating {
+ .response-area {
+    &:not(.compact) > button {
+      &:first-child:dir(ltr),
+      &:last-child:dir(rtl) {
+        border-bottom-left-radius: $window_radius+1;
+      }
+
+      &:last-child:dir(ltr),
+      &:first-child:dir(rtl) {
+        border-bottom-right-radius: $window_radius+1;
+      }
+    }
+
+    &.compact > button {
+      &:first-child {
+        border-bottom-left-radius: $window_radius+1;
+        border-bottom-right-radius: $window_radius+1;
+      }
+    }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_misc.scss b/src/sass/libadwaita/widgets/_misc.scss
new file mode 100644
index 00000000..23d55c54
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_misc.scss
@@ -0,0 +1,215 @@
+/**********
+ * Frames *
+ **********/
+frame,
+.frame {
+  border: 1px solid $border_color;
+}
+
+frame {
+  border-radius: $button_radius;
+
+  > label {
+    margin: $base_padding / 2 + 1px;
+  }
+}
+
+/**************
+ * Separators *
+ **************/
+
+separator {
+  background: $border_color;
+  min-width: 1px;
+  min-height: 1px;
+
+  &.spacer {
+    background: none;
+
+    &.horizontal { min-width: 12px; }
+    &.vertical { min-height: 12px; }
+  }
+}
+
+/*********************
+ * App Notifications *
+ *********************/
+
+.app-notification {
+  @extend %osd;
+
+  padding: 10px;
+  border-spacing: 10px;
+  border-radius: 0 0 $card_radius $card_radius;
+  background-color: $osd_bg_color;
+  background-image: linear-gradient(to bottom, transparentize(black, 0.8),
+                                               transparent 2px);
+  background-clip: padding-box;
+
+  border { border: none; }
+}
+
+/**********
+ * Toasts *
+ **********/
+
+toast {
+  @extend %osd;
+  margin: $base_padding * 2;
+  margin-bottom: $base_padding * 4;
+  border-radius: 150px;
+  border-spacing: $base_padding;
+  padding: $base_padding;
+
+  &:dir(ltr) { padding-left: $base_padding * 2; }
+  &:dir(rtl) { padding-right: $base_padding * 2; }
+
+  > widget {
+    margin: 0 $base_padding;
+  }
+}
+
+/**************
+ * GtkVideo *
+ **************/
+
+video {
+  & image.osd {
+    min-width: 64px;
+    min-height: 64px;
+    border-radius: 32px;
+  }
+}
+
+/******************
+ * AdwAboutWindow *
+ ******************/
+
+window.about,
+dialog.about {
+  .main-page {
+    > viewport > clamp > box {
+      margin: $base_padding * 2;
+      border-spacing: $base_padding;
+
+      > box {
+        margin-top: 18px;
+        border-spacing: 18px;
+        margin-bottom: $base_padding;
+      }
+    }
+
+    .app-version {
+      padding: $base_padding / 2 $base_padding * 3;
+      color: $accent_color;
+      border-radius: $circular_radius;
+      margin-top: $base_padding / 2;
+    }
+  }
+
+  .subpage {
+    > viewport > clamp > box {
+      margin: 18px 12px;
+      border-spacing: 18px;
+    }
+
+    > clamp > textview {
+      background: none;
+      color: inherit;
+    }
+  }
+}
+
+/*****************
+ * AdwStatusPage *
+ *****************/
+
+statuspage {
+  > scrolledwindow > viewport > box {
+    margin: 36px 12px;
+    border-spacing: 36px;
+
+    > clamp > box {
+      border-spacing: $base_padding * 2;
+
+      > .icon {
+        -gtk-icon-size: 128px;
+
+        color: gtkalpha(currentColor, $dim_label_opacity);
+
+        &:disabled {
+          opacity: $disabled_opacity;
+        }
+
+        &:not(:last-child) {
+          margin-bottom: 24px;
+        }
+      }
+    }
+  }
+
+  &.compact > scrolledwindow > viewport > box {
+    margin: 24px 12px;
+    border-spacing: 24px;
+
+    > clamp > box {
+      > .icon {
+        -gtk-icon-size: 96px;
+
+        &:not(:last-child) {
+          margin-bottom: 12px;
+        }
+      }
+
+      > .title {
+        font-size: 18pt;
+      }
+    }
+  }
+}
+
+/* Cards */
+
+.card {
+  @at-root %card, & {
+    background-color: $card_bg_color;
+    color: $card_fg_color;
+    border-radius: $card_radius;
+    box-shadow: 0 0 0 1px $border;
+
+    .osd &, &.osd {
+      background-color: gtkalpha(currentColor, .1);
+      color: inherit;
+      box-shadow: none;
+    }
+  }
+
+  @include focus-ring($offset: -1px);
+
+  .osd &, &.osd {
+    &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+  }
+
+  &.activatable {
+    transition: $focus_transition, $button_transition;
+
+    &:hover {
+      background-image: image(gtkalpha(currentColor, .03));
+    }
+
+    &:active {
+      background-image: image(gtkalpha(currentColor, .08));
+    }
+  }
+}
+
+/* Transition shadows */
+
+flap,
+leaflet,
+navigation-view,
+overlay-split-view {
+  @include transition-shadows($shade_color);
+}
diff --git a/src/sass/libadwaita/widgets/_notebook.scss b/src/sass/libadwaita/widgets/_notebook.scss
new file mode 100644
index 00000000..3bade472
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_notebook.scss
@@ -0,0 +1,216 @@
+notebook {
+  @include focus-ring("> header > tabs > tab:checked", $offset: -2px, $focus-state: ':focus:focus-visible');
+
+  > header {
+    padding: 1px;
+    border-color: $border_color;
+    border-width: 1px;
+    background-clip: padding-box;
+
+    > tabs { margin: -1px; }
+
+    &.top {
+      border-bottom-style: solid;
+      > tabs {
+        margin-bottom: -2px;
+        > tab {
+          &:hover { box-shadow: inset 0 -4px $border_color; }
+
+          &:checked { box-shadow: inset 0 -4px $accent_bg_color; }
+        }
+      }
+    }
+
+    &.bottom {
+      border-top-style: solid;
+      > tabs {
+        margin-top: -2px;
+        > tab {
+          &:hover { box-shadow: inset 0 4px $border_color; }
+
+          &:checked { box-shadow: inset 0 4px $accent_bg_color; }
+        }
+      }
+    }
+
+    &.left {
+      border-right-style: solid;
+      > tabs {
+        margin-right: -2px;
+        > tab {
+          &:hover { box-shadow: inset -4px 0 $border_color; }
+
+          &:checked { box-shadow: inset -4px 0 $accent_bg_color; }
+        }
+      }
+    }
+
+    &.right {
+      border-left-style: solid;
+      > tabs {
+        margin-left: -2px;
+        > tab {
+          &:hover { box-shadow: inset 4px 0 $border_color; }
+
+          &:checked { box-shadow: inset 4px 0 $accent_bg_color; }
+        }
+      }
+    }
+
+    &.top > tabs > arrow {
+      @extend %notebook_vert_arrows;
+
+      border-top-style: none;
+    }
+
+    &.bottom > tabs > arrow {
+      @extend %notebook_vert_arrows;
+
+      border-bottom-style: none;
+    }
+
+    @at-root %notebook_vert_arrows {
+      margin-left: -5px;
+      margin-right: -5px;
+      padding-left: 4px;
+      padding-right: 4px;
+
+      &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
+
+      &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
+    }
+
+    &.left > tabs > arrow {
+      @extend %notebook_horz_arrows;
+
+      border-left-style: none;
+    }
+
+    &.right > tabs > arrow {
+      @extend %notebook_horz_arrows;
+
+      border-right-style: none;
+    }
+
+    @at-root %notebook_horz_arrows {
+      margin-top: -5px;
+      margin-bottom: -5px;
+      padding-top: 4px;
+      padding-bottom: 4px;
+
+      &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
+
+      &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+    }
+
+    > tabs > arrow {
+      @extend %button_basic;
+      @extend %button_basic_flat;
+
+      min-height: 16px;
+      min-width: 16px;
+      border-radius: 0;
+
+      &:hover:not(:active) {
+        box-shadow: none;
+      }
+    }
+
+    > tabs > tab {
+      transition: $focus_transition;
+      min-height: 30px;
+      min-width: 30px;
+      padding: 3px 12px;
+
+      font-weight: normal;
+
+      &:hover, &:active {
+        background-color: $hover_color;
+      }
+
+      &:not(:checked) {
+        outline-color: transparent;
+      }
+
+      &:disabled {
+        filter: opacity($disabled_opacity);
+
+        label, button {
+          filter: none;
+        }
+      }
+
+      // colors the button like the label, overridden otherwise
+      button.flat {
+        color: gtkalpha(currentColor, 0.3);
+        &:hover, &:active { color: currentColor; }
+
+        padding: 0;
+        margin-top: 4px;
+        margin-bottom: 4px;
+        // FIXME: generalize .small-button?
+        min-width: 20px;
+        min-height: 20px;
+
+        &:last-child {
+          margin-left: 4px;
+          margin-right: -4px;
+        }
+
+        &:first-child {
+          margin-left: -4px;
+          margin-right: 4px;
+        }
+      }
+    }
+
+    &.top,
+    &.bottom {
+      > tabs {
+        padding-left: 4px;
+        padding-right: 4px;
+
+        &:not(:only-child) {
+          margin-left: 3px;
+          margin-right: 3px;
+
+          &:first-child { margin-left: -1px; }
+          &:last-child { margin-right: -1px; }
+        }
+
+        > tab {
+          margin-left: 4px;
+          margin-right: 4px;
+        }
+      }
+    }
+
+    &.left,
+    &.right {
+      > tabs {
+        padding-top: 4px;
+        padding-bottom: 4px;
+
+        &:not(:only-child) {
+          margin-top: 3px;
+          margin-bottom: 3px;
+
+          &:first-child { margin-top: -1px; }
+          &:last-child { margin-bottom: -1px; }
+        }
+
+        > tab {
+          margin-top: 4px;
+          margin-bottom: 4px;
+        }
+      }
+    }
+
+    &.top > tabs > tab { padding-bottom: 4px; }
+    &.bottom > tabs > tab { padding-top: 4px; }
+  }
+
+  > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
+    background-color: $view_bg_color;
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_paned.scss b/src/sass/libadwaita/widgets/_paned.scss
new file mode 100644
index 00000000..baf320af
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_paned.scss
@@ -0,0 +1,46 @@
+paned {
+  > separator {
+    min-width: 1px;
+    min-height: 1px;
+    background: none;
+    background-size: 1px 1px;
+
+    &.wide {
+      min-width: 5px;
+      min-height: 5px;
+    }
+  }
+
+  &.horizontal > separator {
+    &:dir(ltr) {
+      margin: 0 -8px 0 0;
+      padding: 0 8px 0 0;
+      box-shadow: inset 1px 0 $border_color;
+    }
+    &:dir(rtl) {
+      margin: 0 0 0 -8px;
+      padding: 0 0 0 8px;
+      box-shadow: inset -1px 0 $border_color;
+    }
+
+    &.wide {
+      margin: 0;
+      padding: 0;
+      box-shadow: inset  1px 0 $border_color,
+                  inset -1px 0 $border_color;
+    }
+  }
+
+  &.vertical > separator {
+    margin: 0 0 -8px 0;
+    padding: 0 0 8px 0;
+    box-shadow: inset 0 1px $border_color;
+
+    &.wide {
+      margin: 0;
+      padding: 0;
+      box-shadow: inset 0  1px $border_color,
+                  inset 0 -1px $border_color;
+    }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_popovers.scss b/src/sass/libadwaita/widgets/_popovers.scss
new file mode 100644
index 00000000..380c6650
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_popovers.scss
@@ -0,0 +1,88 @@
+toolbarview.undershoot-top    popover scrolledwindow undershoot.top,
+toolbarview.undershoot-bottom popover scrolledwindow undershoot.bottom {
+  background: none;
+  box-shadow: none;
+}
+
+popover {
+  &.background {
+    background-color: transparent;
+    font: initial;
+  }
+
+  > arrow,
+  > contents {
+    background-color: $popover_bg_color;
+    color: $popover_fg_color;
+    background-clip: border-box;
+    border: 1px solid gtkmix(white, $popover_bg_color, 8%);
+    box-shadow: 0 1px 5px 1px transparentize(black, .91),
+                0 2px 14px 3px transparentize(black, .95),
+                0 0 0 1px $headerbar_darker_shade_color;
+  }
+
+  > contents {
+    padding: $base_padding;
+    border-radius: $popover_radius;
+
+    > list,
+    > .view,
+    > toolbar {
+      border-style: none;
+      background-color: transparent;
+    }
+
+    separator {
+      background-color: gtkalpha(currentColor, 0.08);
+    }
+  }
+
+  .osd &,
+  &.touch-selection,
+  &.magnifier {
+    background-color: transparent;
+
+    > arrow,
+    > contents {
+      @extend %osd;
+
+      border: 1px solid transparentize(white, 0.9);
+      box-shadow: none;
+    }
+  }
+
+  toolbarview.undershoot-top scrolledwindow {
+    @include undershoot(top, $popover_shade_color);
+  }
+
+  toolbarview.undershoot-bottom scrolledwindow {
+    @include undershoot(bottom, $popover_shade_color);
+  }
+
+  scrolledwindow {
+    &.undershoot-top {
+      @include undershoot(top, $popover_shade_color);
+    }
+
+    &.undershoot-bottom {
+      @include undershoot(bottom, $popover_shade_color)
+    }
+
+    &.undershoot-start {
+      &:dir(ltr) { @include undershoot(left, $popover_shade_color); }
+      &:dir(rtl) { @include undershoot(right, $popover_shade_color); }
+    }
+
+    &.undershoot-end {
+      &:dir(ltr) { @include undershoot(right, $popover_shade_color); }
+      &:dir(rtl) { @include undershoot(left, $popover_shade_color); }
+    }
+  }
+
+  flap,
+  leaflet,
+  navigation-view,
+  overlay-split-view {
+    @include transition-shadows($popover_shade_color);
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_preferences.scss b/src/sass/libadwaita/widgets/_preferences.scss
new file mode 100644
index 00000000..32acce52
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_preferences.scss
@@ -0,0 +1,18 @@
+preferencespage > scrolledwindow > viewport > clamp > box {
+  margin: 24px 12px;
+  border-spacing: 24px;
+}
+
+preferencesgroup > box {
+  &, .labels {
+    border-spacing: $base_padding;
+  }
+
+  > box.header:not(.single-line) {
+    margin-bottom: $base_padding;
+  }
+
+  > box.single-line {
+    min-height: 34px;
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_progress-bar.scss b/src/sass/libadwaita/widgets/_progress-bar.scss
new file mode 100644
index 00000000..8386f952
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_progress-bar.scss
@@ -0,0 +1,93 @@
+progressbar {
+  // sizing
+  &.horizontal {
+    > trough {
+      min-width: 150px;
+      &, > progress { min-height: 8px; }
+    }
+  }
+
+  &.vertical {
+    > trough {
+      min-height: 80px;
+      &, > progress { min-width: 8px; }
+    }
+  }
+
+  > text {
+    @extend .dim-label;
+    @extend .numeric;
+    font-size: smaller;
+  }
+
+  &:disabled {
+    filter: opacity($disabled_opacity);
+  }
+
+  > trough {
+    @extend %scale_trough;
+
+    > progress {
+      @extend %scale_highlight; /* share most of scales' */
+
+      $_progress-radius: 99px;
+
+      border-radius: $_progress-radius;
+
+      &.left {
+        border-top-left-radius: $_progress-radius;
+        border-bottom-left-radius: $_progress-radius;
+      }
+
+      &.right {
+        border-top-right-radius: $_progress-radius;
+        border-bottom-right-radius: $_progress-radius;
+      }
+
+      &.top {
+        border-top-right-radius: $_progress-radius;
+        border-top-left-radius: $_progress-radius;
+      }
+
+      &.bottom {
+        border-bottom-right-radius: $_progress-radius;
+        border-bottom-left-radius: $_progress-radius;
+      }
+    }
+  }
+
+  &.osd {
+    // Thin progress bar with no trough, usually goes under the header bar
+    min-width: 2px;
+    min-height: 2px;
+    background-color: transparent;
+    color: inherit;
+
+    > trough {
+      border-style: none;
+      border-radius: 0;
+      background-color: transparent;
+      box-shadow: none;
+
+      > progress {
+        border-style: none;
+        border-radius: 0;
+      }
+
+    }
+
+    &.horizontal {
+      > trough, > trough > progress { min-height: 2px; }
+    }
+
+    &.vertical {
+      > trough, > trough > progress { min-width: 2px; }
+    }
+  }
+
+  > trough.empty > progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
+
+  .osd & > trough > progress {
+    background-color: $osd_fill_bg_color;
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_scale.scss b/src/sass/libadwaita/widgets/_scale.scss
new file mode 100644
index 00000000..bb3155e6
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_scale.scss
@@ -0,0 +1,232 @@
+$_slider_border_color: transparentize(black, if($contrast == 'high', .65, .9));
+
+%scale_trough {
+  border-radius: 99px;
+  background-color: $trough_color;
+
+  @if $contrast == "high" {
+    box-shadow: inset 0 0 0 1px $border_color;
+  }
+}
+
+%scale_highlight {
+  border-radius: 99px;
+  background-color: $fill_color;
+  color: $fill_text_color;
+}
+
+scale {
+  // sizing
+  $_marks_length: 6px;
+  $_marks_distance: 6px;
+
+  min-height: 10px;
+  min-width: 10px;
+  padding: 12px;
+
+  @include focus-ring("> trough > slider", $offset: 0);
+
+  > trough {
+    @extend %scale_trough;
+
+    // the colored part of the backing bit
+    > highlight { @extend %scale_highlight; }
+
+    // this is another differently styled part of the backing bit, the most relevant use case is for example
+    // in media player to indicate how much video stream as been cached
+    > fill {
+      @extend %scale_trough;
+    }
+
+    > slider {
+      background-color: $slider_color;
+      box-shadow: 0 0 0 1px $_slider_border_color, 0 2px 4px transparentize(black, .8);
+
+      border-radius: 100%;
+
+      // the slider is inside the trough, so to have make it bigger there's a negative margin
+      min-width: 20px;
+      min-height: 20px;
+      margin: -8px;
+    }
+  }
+
+  &:hover, &:active {
+    > trough {
+      background-color: $trough_hover_color;
+
+      > highlight {
+        background-image: image(gtkalpha(currentColor, .1));
+      }
+
+      > slider {
+        background-color: $slider_hover_color;
+      }
+    }
+  }
+
+  .osd & {
+    &:focus:focus-visible > trough {
+      outline-color: $osd_focus_color;
+    }
+
+    > trough > highlight {
+      background-color: $osd_fill_bg_color;
+      color: $osd_fill_fg_color;
+    }
+  }
+
+  &:disabled {
+    filter: opacity($disabled_opacity);
+
+    > trough > slider {
+      box-shadow: 0 0 0 1px $_slider_border_color, 0 2px 4px transparent;
+      outline-color: transparentize(black, if($contrast == 'high', .5, .8));
+    }
+  }
+
+  // click-and-hold the slider to activate
+  &.fine-tune {
+    padding: 9px;
+
+    &.horizontal {
+      min-height: 16px;
+    }
+
+    &.vertical {
+      min-width: 16px;
+    }
+
+    > trough {
+      // to make the trough grow in fine-tune mode
+      > slider { margin: -5px; }
+    }
+  }
+
+  > value {
+    @extend .dim-label;
+    @extend .numeric;
+  }
+
+  &.marks-before:not(.marks-after),
+  &.marks-after:not(.marks-before) {
+    > trough > slider {
+      transform: rotate(45deg);
+
+      // Adjust box-shadow for the 45deg rotation, for 0px 2px we ideally want
+      // 1/√2px 1/√2px, round that to 1px 1px
+      box-shadow: 0 0 0 1px $_slider_border_color, 1px 1px 4px transparentize(black, .8);
+
+      &:disabled {
+        box-shadow: 0 0 0 1px $_slider_border_color, 1px 1px 4px transparent;
+      }
+    }
+  }
+
+  &.horizontal {
+    > marks {
+      color: gtkalpha(currentColor, $dim_label_opacity);
+      &.top    { margin-bottom: $_marks_distance; }
+      &.bottom { margin-top: $_marks_distance; }
+
+      indicator {
+        background-color: currentColor;
+        min-height: $_marks_length;
+        min-width: 1px;
+      }
+    }
+
+    > value.left  { margin-right: 9px; }
+    > value.right { margin-left: 9px; }
+
+    &.fine-tune > marks {
+      &.top { margin-top: 3px; }
+      &.bottom { margin-bottom: 3px; }
+
+      indicator { min-height: ($_marks_length - 3px); }
+    }
+
+    &.marks-before {
+      padding-top: 0;
+
+       > trough > slider {
+        border-top-left-radius: 0;
+      }
+    }
+
+    &.marks-after {
+      padding-bottom: 0;
+
+      > trough > slider {
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    &.marks-before.marks-after > trough > slider {
+      border-radius: 100%;
+    }
+  }
+
+  &.vertical {
+    > marks {
+      color: gtkalpha(currentColor, $dim_label_opacity);
+      &.top    { margin-right: $_marks_distance; }
+      &.bottom { margin-left: $_marks_distance; }
+
+      indicator {
+        background-color: currentColor;
+        min-height: 1px;
+        min-width: $_marks_length;
+      }
+    }
+
+    > value.top    { margin-bottom: 9px; }
+    > value.bottom { margin-top: 9px; }
+
+    &.fine-tune > marks {
+      &.top { margin-left: 3px; }
+      &.bottom { margin-right: 3px; }
+
+      indicator { min-height: ($_marks_length - 3px); }
+    }
+
+    &.marks-before {
+      padding-left: 0;
+
+      > trough > slider {
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    &.marks-after {
+      padding-right: 0;
+
+      > trough > slider {
+        border-top-right-radius: 0;
+      }
+    }
+  }
+
+  &.color {
+    padding: 0;
+
+    > trough {
+      border: none;
+      background: none;
+      border-radius: 10px;
+
+      > slider {
+        margin: 0;
+        background-color: transparentize(white, .2);
+      }
+    }
+
+    &.fine-tune {
+      padding: 2px;
+
+      > trough > slider {
+        margin: -2px;
+      }
+    }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_scrolling.scss b/src/sass/libadwaita/widgets/_scrolling.scss
new file mode 100644
index 00000000..536307e4
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_scrolling.scss
@@ -0,0 +1,172 @@
+$osd_scrollbar_outline_color: transparentize(black, .5);
+
+scrollbar {
+  $_slider_min_length: 40px;
+  $_slider_width: 8px;
+  $_scrollbar_transition: all 200ms linear;
+
+  > range > trough {
+    margin: 7px;
+    transition: $_scrollbar_transition;
+    border-radius: 10px;
+
+    > slider {
+      min-width: $_slider_width;
+      min-height: $_slider_width;
+      margin: -6px;
+      border: 6px solid transparent;
+      border-radius: 10px;
+      background-clip: padding-box;
+      transition: $_scrollbar_transition;
+      background-color: gtkalpha(currentColor, .2);
+
+      &:hover { background-color: gtkalpha(currentColor, .4); }
+
+      &:active { background-color: gtkalpha(currentColor, .6); }
+
+      &:disabled { opacity: 0; }
+    }
+  }
+
+  &.horizontal > range > trough {
+    margin-top: 6px;
+    margin-bottom: 6px;
+  }
+
+  &.vertical > range > trough {
+    margin-left: 6px;
+    margin-right: 6px;
+  }
+
+  &.overlay-indicator {
+    background: none;
+    color: inherit;
+    box-shadow: none;
+    padding: 0;
+
+    > range > trough {
+      outline: 1px solid transparent;
+
+      > slider {
+        outline: 1px solid gtkalpha($scrollbar_outline_color, .6);
+
+        .osd & {
+          outline: 1px solid gtkalpha($osd_scrollbar_outline_color, .6);
+        }
+
+        outline-offset: -6px;
+      }
+    }
+
+    &:not(.hovering) > range > trough > slider {
+      min-width: 3px;
+      min-height: 3px;
+      outline-color: gtkalpha($scrollbar_outline_color, .35);
+
+      .osd & {
+        outline-color: gtkalpha($osd_scrollbar_outline_color, .35);
+      }
+    }
+
+    &.hovering > range > trough {
+      background-color: gtkalpha(currentColor, .1);
+    }
+
+    &.horizontal {
+      > range > trough > slider {
+        min-width: $_slider_min_length;
+      }
+
+      &.hovering > range > trough > slider {
+        min-height: $_slider_width;
+      }
+
+      &:not(.hovering) > range > trough {
+        margin-top: 3px;
+        margin-bottom: 3px;
+      }
+    }
+
+    &.vertical {
+      > range > trough > slider {
+        min-height: $_slider_min_length;
+      }
+
+      &.hovering > range > trough > slider {
+        min-width: $_slider_width;
+      }
+
+      &:not(.hovering) > range > trough {
+        margin-left: 3px;
+        margin-right: 3px;
+      }
+    }
+  }
+
+  &.horizontal > range > trough > slider { min-width: $_slider_min_length; }
+  &.vertical > range > trough > slider { min-height: $_slider_min_length; }
+
+  > range.fine-tune > trough > slider {
+    &, &:hover, &:active {
+      background-color: gtkalpha($accent_color, .6);
+    }
+  }
+}
+
+scrolledwindow {
+  // This is used when content is touch-dragged past boundaries.
+  // draws a box on top of the content, the size changes programmatically.
+  > overshoot {
+    &.top {
+      @include overshoot(top);
+    }
+
+    &.bottom {
+      @include overshoot(bottom);
+    }
+
+    &.left {
+      @include overshoot(left);
+    }
+
+    &.right {
+      @include overshoot(right);
+    }
+  }
+
+  &.undershoot-top {
+    @include undershoot(top);
+  }
+
+  &.undershoot-bottom {
+    @include undershoot(bottom);
+  }
+
+  &.undershoot-start {
+    &:dir(ltr) { @include undershoot(left); }
+    &:dir(rtl) { @include undershoot(right); }
+  }
+
+  &.undershoot-end {
+    &:dir(ltr) { @include undershoot(right); }
+    &:dir(rtl) { @include undershoot(left); }
+  }
+}
+
+toolbarview.undershoot-top scrolledwindow {
+  @include undershoot(top);
+}
+
+toolbarview.undershoot-bottom scrolledwindow {
+  @include undershoot(bottom);
+}
+
+.about {
+  toolbarview.undershoot-top scrolledwindow {
+    @include undershoot(top, $style: frame);
+  }
+  
+  toolbarview.undershoot-bottom scrolledwindow {
+    @include undershoot(bottom, $style: frame);
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_shortcuts-window.scss b/src/sass/libadwaita/widgets/_shortcuts-window.scss
new file mode 100644
index 00000000..04f3b04f
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_shortcuts-window.scss
@@ -0,0 +1,55 @@
+shortcuts-section {
+  margin: 20px;
+}
+
+.shortcuts-search-results {
+  margin: 20px;
+  border-spacing: 24px;
+}
+
+// shortcut window keys
+shortcut {
+  border-spacing: 6px;
+  border-radius: 6px;
+  @include focus-ring($outer: true, $offset: 4px);
+
+  > .keycap {
+    min-width: 20px;
+    min-height: 25px;
+    padding: 2px 6px;
+
+    @extend %card;
+
+    border-radius: $button_radius;
+    font-size: smaller;
+  }
+}
+
+shortcuts-section stackswitcher.circular {
+  border-spacing: 12px;
+
+  > button.circular,
+  > button.text-button.circular {
+    min-width: 32px;
+    min-height: 32px;
+    padding: 0;
+  }
+}
+
+window.shortcuts {
+  headerbar.titlebar {
+    @extend .flat;
+    @extend %headerbar-shrunk;
+
+    > windowhandle {
+      padding-top: 3px;
+    }
+  }
+
+  searchbar {
+    @extend %searchbar-flat;
+    @extend %searchbar-shrunk;
+
+    background: none;
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_sidebars.scss b/src/sass/libadwaita/widgets/_sidebars.scss
new file mode 100644
index 00000000..cd7b48a9
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_sidebars.scss
@@ -0,0 +1,210 @@
+
+.sidebar-pane {
+  background-color: $sidebar_bg_color;
+  color: $sidebar_fg_color;
+
+  &:backdrop {
+    background-color: $sidebar_backdrop_color;
+    transition: background-color $backdrop_transition;
+  }
+
+  flap,
+  leaflet,
+  navigation-view,
+  overlay-split-view {
+    @include transition-shadows($sidebar_shade_color);
+  }
+
+  banner > revealer > widget {
+    background-color: gtkmix($accent_bg_color, $sidebar_bg_color, 30%);
+    color: $sidebar_fg_color;
+
+    &:backdrop {
+      background-color: gtkmix($accent_bg_color, $sidebar_backdrop_color, 15%);
+    }
+  }
+
+  &:dir(ltr), &.end:dir(rtl) {
+    &, banner > revealer > widget {
+      box-shadow: inset -1px 0 $sidebar_border_color;
+    }
+  }
+
+  &:dir(rtl), &.end:dir(ltr) {
+    &, banner > revealer > widget {
+      box-shadow: inset 1px 0 $sidebar_border_color;
+    }
+  }
+}
+
+.sidebar-pane, .content-pane {
+  toolbarview.undershoot-top scrolledwindow {
+    @include undershoot(top, $sidebar_shade_color, $style: frame);
+  }
+
+  toolbarview.undershoot-bottom scrolledwindow {
+    @include undershoot(bottom, $sidebar_shade_color, $style: frame);
+  }
+
+  scrolledwindow {
+    &.undershoot-top {
+      @include undershoot(top, $sidebar_shade_color, $style: frame);
+    }
+
+    &.undershoot-bottom {
+      @include undershoot(bottom, $sidebar_shade_color, $style: frame);
+    }
+
+    &.undershoot-start {
+      &:dir(ltr) { @include undershoot(left, $sidebar_shade_color, $style: frame); }
+      &:dir(rtl) { @include undershoot(right, $sidebar_shade_color, $style: frame); }
+    }
+
+    &.undershoot-end {
+      &:dir(ltr) { @include undershoot(right, $sidebar_shade_color, $style: frame); }
+      &:dir(rtl) { @include undershoot(left, $sidebar_shade_color, $style: frame); }
+    }
+  }
+}
+
+/* Middle pane in three-pane setups */
+.content-pane .sidebar-pane,
+.sidebar-pane .content-pane {
+  background-color: $secondary_sidebar_bg_color;
+  color: $secondary_sidebar_fg_color;
+
+  &:backdrop {
+    background-color: $secondary_sidebar_backdrop_color;
+    transition: background-color $backdrop_transition;
+  }
+
+  toolbarview.undershoot-top scrolledwindow {
+    @include undershoot(top, $secondary_sidebar_shade_color);
+  }
+
+  toolbarview.undershoot-bottom scrolledwindow {
+    @include undershoot(bottom, $secondary_sidebar_shade_color);
+  }
+
+  scrolledwindow {
+    &.undershoot-top {
+      @include undershoot(top, $secondary_sidebar_shade_color);
+    }
+
+    &.undershoot-bottom {
+      @include undershoot(bottom, $secondary_sidebar_shade_color)
+    }
+
+    &.undershoot-start {
+      &:dir(ltr) { @include undershoot(left, $secondary_sidebar_shade_color); }
+      &:dir(rtl) { @include undershoot(right, $secondary_sidebar_shade_color); }
+    }
+
+    &.undershoot-end {
+      &:dir(ltr) { @include undershoot(right, $secondary_sidebar_shade_color); }
+      &:dir(rtl) { @include undershoot(left, $secondary_sidebar_shade_color); }
+    }
+  }
+
+  flap,
+  leaflet,
+  navigation-view,
+  overlay-split-view {
+    @include transition-shadows($secondary_sidebar_shade_color);
+  }
+
+  banner > revealer > widget {
+    background-color: gtkmix($accent_bg_color, $secondary_sidebar_bg_color, 30%);
+    color: $secondary_sidebar_fg_color;
+
+    &:backdrop {
+      background-color: gtkmix($accent_bg_color, $secondary_sidebar_backdrop_color, 15%);
+    }
+  }
+
+  &:dir(ltr), &.end:dir(rtl) {
+    &, banner > revealer > widget {
+      box-shadow: inset -1px 0 $sidebar_border_color;
+    }
+  }
+
+  &:dir(rtl), &.end:dir(ltr) {
+    &, banner > revealer > widget {
+      box-shadow: inset 1px 0 $sidebar_border_color;
+    }
+  }
+}
+
+.sidebar-pane .sidebar-pane {
+  background-color: transparent;
+  color: inherit;
+}
+
+stacksidebar row {
+  padding: 10px 4px;
+
+  > label {
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+
+  &.needs-attention > label {
+    @extend %needs_attention;
+    background-size: 6px 6px, 0 0;
+  }
+}
+
+/**********************
+ * Navigation Sidebar *
+ **********************/
+
+.navigation-sidebar {
+  &, &.view, &.view:disabled {
+    background-color: transparent;
+    color: inherit;
+  }
+
+  &.background {
+    &, &:disabled {
+      background-color: $window_bg_color;
+      color: $window_fg_color;
+    }
+  }
+
+  row {
+    &.activatable {
+      &:hover { background-color: $hover_color; }
+
+      &:active { background-color: $active_color; }
+
+      // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
+      &.has-open-popup { background-color: $hover_color; }
+
+      &:selected {
+        &:hover { background-color: $selected_hover_color; }
+
+        &:active { background-color: $selected_active_color; }
+
+        &.has-open-popup { background-color: $selected_hover_color; }
+      }
+    }
+
+    &:selected {
+      background-color: $selected_color;
+    }
+  }
+
+  padding: $menu-margin 0; //only vertical padding. horizontal row size would clip
+
+  > separator {
+    margin: $menu-margin;
+    background: none;
+  }
+
+  > row {
+    min-height: 36px;
+    padding: 0 8px;
+    border-radius: $menuitem_radius;
+    margin: 0 $menu_margin 2px;
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_spin-button.scss b/src/sass/libadwaita/widgets/_spin-button.scss
new file mode 100644
index 00000000..4f806add
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_spin-button.scss
@@ -0,0 +1,72 @@
+spinbutton {
+  @extend %entry;
+  @extend .numeric;
+
+  padding: 0;
+  border-spacing: 0;
+
+  /* :not here just to bump specificity above that of the list button styling */
+  > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque),
+  > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+    @extend %button_basic_flat;
+
+    margin: 0;
+
+    border-radius: 0;
+    box-shadow: none;
+
+    border-style: solid;
+    border-color: gtkalpha(currentColor, if($contrast == 'high', .5, .1));
+  }
+
+  &:not(.vertical) {
+    > text {
+      min-width: 28px;
+      padding: 6px;
+    }
+
+    /* :not here just to bump specificity above that of the list button styling */
+    > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque),
+    > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+      min-height: 16px;
+      min-width: 22px;
+      padding-bottom: 0;
+      padding-top: 0;
+      border-left-width: 1px;
+
+      &:dir(rtl) {
+        border-left-width: 0;
+        border-right-width: 1px;
+      }
+
+      &:dir(ltr):last-child {
+        border-radius: 0 $button_radius $button_radius 0;
+      }
+
+      &:dir(rtl):first-child {
+        border-radius: $button_radius 0 0 $button_radius;
+      }
+    }
+  }
+
+  &.vertical {
+    > text {
+      min-height: 30px;
+      min-width: 30px;
+    }
+
+    /* :not here just to bump specificity above that of the list button styling */
+    > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque),
+    > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+      &:last-child {
+        border-top-width: 1px;
+        border-radius: 0 0 $button_radius $button_radius;
+      }
+
+      &:first-child {
+        border-bottom-width: 1px;
+        border-radius: $button_radius $button_radius 0 0;
+      }
+    }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_spinner.scss b/src/sass/libadwaita/widgets/_spinner.scss
new file mode 100644
index 00000000..ab1f0202
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_spinner.scss
@@ -0,0 +1,16 @@
+@keyframes spin {
+  to { transform: rotate(1turn); }
+}
+
+spinner {
+  background: none;
+  opacity: 0; // non spinning spinner makes no sense
+  -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
+
+  &:checked {
+    opacity: 1;
+    animation: spin 1s linear infinite;
+
+    &:disabled { opacity: $disabled_opacity; }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_switch.scss b/src/sass/libadwaita/widgets/_switch.scss
new file mode 100644
index 00000000..e6163093
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_switch.scss
@@ -0,0 +1,52 @@
+switch {
+  // similar to GtkScale
+  border-radius: $circular_radius;
+  padding: $base_padding / 2;
+  background-color: $trough_color;
+  transition: all $duration $ease-out;
+
+  &:hover { background-color: $trough_hover_color; }
+  &:active { background-color: $trough_active_color; }
+
+  // @include focus-ring($offset: 1px, $outer: true);
+
+  &:disabled {
+    filter: opacity($disabled_opacity);
+  }
+
+  > slider {
+    min-width: $small_size - 6px;
+    min-height: $small_size - 6px;
+    border-radius: 50%;
+    background-color: $slider_color;
+    box-shadow: $shadow-z3;
+  }
+
+  &:hover > slider,
+  &:active > slider {
+    box-shadow: 0 0 0 6px gtkalpha(currentColor, .1);
+  }
+
+  &:checked {
+    color: $accent_fg_color;
+    background-color: $accent_bg_color;
+
+    &:hover { background-image: image(gtkalpha(currentColor, .1)); }
+    &:active { background-image: image(transparentize(black, .8)); }
+
+    > slider {
+      background-color: $slider_hover_color;
+    }
+  }
+
+  .osd & {
+    &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+
+    &:checked {
+      background-color: transparentize($osd_fill_bg_color, .15);
+      color: $osd_fill_fg_color;
+    }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_tab-view.scss b/src/sass/libadwaita/widgets/_tab-view.scss
new file mode 100644
index 00000000..5c4324a9
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_tab-view.scss
@@ -0,0 +1,268 @@
+tabbar {
+  .box {
+    background-color: $headerbar_bg_color;
+    color: $headerbar_fg_color;
+    box-shadow: inset 0 -1px $headerbar_border_color;
+    padding: 1px;
+    padding-top: 0;
+
+    &:backdrop {
+      background-color: $headerbar_backdrop_color;
+      transition: background-color $backdrop_transition;
+
+      > scrolledwindow,
+      > .start-action,
+      > .end-action {
+        filter: opacity(0.5);
+        transition: filter $backdrop_transition;
+      }
+    }
+  }
+
+  tabbox {
+    padding-bottom: 6px;
+    padding-top: 6px;
+    min-height: 34px;
+
+    > tabboxchild {
+      @include focus-ring($focus-state: ':focus-within:focus-visible');
+      border-radius: $button_radius;
+    }
+
+    > separator {
+      margin-top: 3px;
+      margin-bottom: 3px;
+      transition: opacity 150ms ease-in-out;
+
+      &.hidden {
+        opacity: 0;
+      }
+    }
+
+    > revealer > indicator {
+      min-width: 2px;
+      border-radius: 2px;
+      margin: 3px 6px;
+      background: gtkalpha($accent_color, 0.5);
+    }
+  }
+
+  tab {
+    transition: background 150ms ease-in-out;
+
+    @if $contrast == 'high' {
+      &:hover,
+      &:active,
+      &:selected {
+        box-shadow: inset 0 0 0 1px $border_color;
+      }
+    }
+
+    &:selected {
+      background-color: $selected_color;
+
+      &:hover { background-color: $selected_hover_color; }
+      &:active { background-color: $selected_active_color; }
+    }
+
+    &:hover { background-color: $hover_color; }
+    &:active { background-color: $active_color; }
+  }
+
+  tabbox.single-tab tab {
+    &, &:hover, &:active {
+      background: none;
+
+      @if $contrast == 'high' {
+        box-shadow: none;
+      }
+    }
+  }
+
+  .start-action,
+  .end-action {
+    padding: 6px 5px;
+  }
+
+  .start-action:dir(ltr),
+  .end-action:dir(rtl) {
+    padding-right: 0;
+  }
+
+  .start-action:dir(rtl),
+  .end-action:dir(ltr) {
+    padding-left: 0;
+  }
+
+  &.inline {
+    @extend %tabbar-inline;
+  }
+}
+
+%tabbar-inline .box {
+  background-color: transparent;
+  color: inherit;
+  box-shadow: none;
+  padding-bottom: 0;
+
+  &:backdrop {
+    background-color: transparent;
+    transition: none;
+
+    > scrolledwindow,
+    > .start-action,
+    > .end-action {
+      filter: none;
+      transition: none;
+    }
+  }
+}
+
+%tabbar-shrunk {
+  tabbox,
+  .start-action,
+  .end-action {
+    padding-top: 3px;
+    padding-bottom: 3px;
+  }
+}
+
+dnd tab {
+  background-color: $headerbar_bg_color;
+  background-image: image($selected_active_color);
+  color: $headerbar_fg_color;
+
+  box-shadow: 0 0 0 1px transparentize(black, 0.97),
+              0 1px 3px 1px transparentize(black, .93),
+              0 2px 6px 2px transparentize(black, .97);
+
+  @if $contrast == 'high' {
+    outline: 1px solid $border_color;
+    outline-offset: -1px;
+  }
+
+  margin: 25px;
+}
+
+tabbar,
+dnd {
+  tab {
+    min-height: 26px;
+    padding: 4px;
+    border-radius: $button_radius;
+
+    button.image-button {
+      padding: 0;
+      margin: 0;
+      min-width: 24px;
+      min-height: 24px;
+      border-radius: 99px;
+    }
+
+    indicator {
+      min-height: 2px;
+      border-radius: 2px;
+      background: gtkalpha($accent_color, 0.5);
+      transform: translateY(4px);
+    }
+  }
+}
+
+tabgrid > tabgridchild {
+  @include focus-ring(".card", $offset: 0, $outer: true);
+}
+
+tabthumbnail {
+  border-radius: $card_radius + 4px;
+
+  > box {
+    margin: 6px;
+  }
+
+  &:drop(active) {
+    box-shadow: inset 0 0 0 2px gtkalpha($drop_target_color, .4);
+    background-color: gtkalpha($drop_target_color, .1);
+  }
+
+  transition: box-shadow 200ms $ease-out-quad, background-color $ease-out-quad;
+
+  .needs-attention {
+    &:dir(ltr) { transform: translate(8px, -8px); }
+    &:dir(rtl) { transform: translate(-8px, -8px); }
+
+    > widget {
+      background: $accent_color;
+      min-width: 12px;
+      min-height: 12px;
+      border-radius: 8px;
+      margin: 3px;
+      box-shadow: 0 1px 2px gtkalpha($accent_color, .4);
+    }
+  }
+
+  .card {
+    picture {
+      outline: 1px solid $window_outline_color;
+      outline-offset: -1px;
+      border-radius: $card_radius;
+    }
+
+    background: none;
+    color: inherit;
+
+    @if $contrast == 'high' {
+      box-shadow: 0 0 0 1px transparentize(black, 0.5),
+                  0 1px 3px 1px transparentize(black, .93),
+                  0 2px 6px 2px transparentize(black, .97);
+    }
+  }
+
+  &.pinned .card {
+    background-color: $thumbnail_bg_color;
+    color: $thumbnail_fg_color;
+
+    @if $contrast == 'high' {
+      outline: 1px solid $window_outline_color;
+      outline-offset: -1px;
+    }
+  }
+
+  .icon-title-box {
+    border-spacing: 6px;
+  }
+
+  .tab-unpin-icon {
+    margin: 6px;
+    min-width: 24px;
+    min-height: 24px;
+  }
+
+  button.circular {
+    margin: 6px;
+    background-color: gtkalpha($thumbnail_bg_color, .75);
+    min-width: 24px;
+    min-height: 24px;
+
+    @if $contrast == 'high' {
+      box-shadow: 0 0 0 1px currentColor;
+    }
+
+    &:hover {
+      background-color: gtkalpha(gtkmix($thumbnail_bg_color, currentColor, 90%), .75);
+    }
+
+    &:active {
+      background-color: gtkalpha(gtkmix($thumbnail_bg_color, currentColor, 80%), .75);
+    }
+  }
+}
+
+taboverview > .overview  .new-tab-button {
+  margin: 18px;
+}
+
+tabview:drop(active),
+tabbox:drop(active),
+tabgrid:drop(active) {
+  box-shadow: none;
+}
diff --git a/src/sass/libadwaita/widgets/_text-selection.scss b/src/sass/libadwaita/widgets/_text-selection.scss
new file mode 100644
index 00000000..2d596f5b
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_text-selection.scss
@@ -0,0 +1,30 @@
+cursor-handle {
+  all: unset;
+  padding: 24px 20px;
+
+  > contents {
+    min-width: 20px;
+    min-height: 20px;
+    border-radius: 50%;
+
+    background-color: $accent_bg_color;
+  }
+
+  &.top > contents {
+    border-top-right-radius: 0;
+  }
+
+  &.bottom > contents {
+    border-top-left-radius: 0;
+    transform: translateX(1px);
+  }
+
+  &.insertion-cursor > contents {
+    border-top-left-radius: 0;
+    transform: translateX(1px) translateY(4px) rotate(45deg);
+  }
+}
+
+magnifier {
+  background-color: $view_bg_color;
+}
diff --git a/src/sass/libadwaita/widgets/_toolbars.scss b/src/sass/libadwaita/widgets/_toolbars.scss
new file mode 100644
index 00000000..65653319
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_toolbars.scss
@@ -0,0 +1,319 @@
+%toolbar {
+  button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+    &.arrow-button,
+    &.image-button,
+    &.image-text-button {
+      @extend %button_basic_flat;
+    }
+  }
+
+  &.osd button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+    &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+  }
+
+  menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+    &.image-button > button {
+      @extend %button_basic_flat;
+    }
+  }
+
+  .linked button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+    &.arrow-button,
+    &.image-button,
+    &.image-text-button {
+      @extend %button_basic_raised;
+    }
+  }
+
+  menubutton.raised > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+    &.arrow-button,
+    &.image-button,
+    &.image-text-button {
+      @extend %button_basic_raised;
+    }
+  }
+
+  menubutton.suggested-action,
+  menubutton.destructive-action,
+  menubutton.opaque {
+    > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+      @extend %opaque_button;
+
+      color: inherit;
+      background-color: transparent;
+    }
+  }
+
+  splitbutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+    @extend %flat_split_button;
+  }
+
+  switch {
+    margin-top: 4px;
+    margin-bottom: 4px;
+  }
+
+  // Reset styles for popovers
+  popover {
+    button:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+      &.arrow-button,
+      &.image-button,
+      &.image-text-button {
+        @extend %button_basic_raised;
+      }
+    }
+
+    menubutton:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+      &.image-button > button {
+        @extend %button_basic_raised;
+      }
+    }
+  }
+}
+
+.toolbar {
+  padding: 6px;
+  border-spacing: 6px;
+  @extend %toolbar;
+
+  // stand-alone OSD toolbars
+  &.osd {
+    padding: 12px;
+    border-radius: $card_radius;
+  }
+}
+
+%toolbar-shrunk {
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+/****************
+ * GtkSearchBar *
+ ****************/
+
+searchbar {
+  > revealer > box {
+    padding: 6px 6px 7px 6px;
+    background-color: $headerbar_backdrop_color;
+    color: $headerbar_fg_color;
+    box-shadow: inset 0 -1px $headerbar_border_color;
+
+    &:backdrop {
+      background-color: $headerbar_bg_color;
+      transition: background-color $backdrop_transition;
+
+      > * {
+        filter: opacity(.5);
+        transition: filter $backdrop_transition;
+      }
+    }
+
+    @extend %toolbar;
+
+   .close {
+      min-width: 18px;
+      min-height: 18px;
+      padding: 4px;
+      border-radius: 50%;
+      @extend %button_basic_flat;
+
+      &:dir(ltr) {
+        margin-left: 10px;
+        margin-right: 4px;
+      }
+
+      &:dir(rtl) {
+        margin-left: 4px;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  &.inline {
+    @extend %searchbar-inline;
+  }
+}
+
+%searchbar-flat > revealer > box {
+  background-color: transparent;
+  color: inherit;
+  box-shadow: none;
+  padding-bottom: 6px;
+}
+
+%searchbar-inline {
+  @extend %searchbar-flat;
+
+  > revealer > box:backdrop {
+    background-color: transparent;
+    transition: none;
+
+    > * {
+      filter: none;
+      transition: none;
+    }
+  }
+}
+
+%searchbar-shrunk > revealer > box {
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+/****************
+ * GtkActionBar *
+ ****************/
+
+actionbar > revealer > box {
+  background-color: $headerbar_backdrop_color;
+  color: $headerbar_fg_color;
+  box-shadow: inset 0 1px $headerbar_border_color;
+  padding: 7px 6px 6px 6px;
+  @extend %toolbar;
+
+  &, > box.start, > box.end {
+    border-spacing: $base_padding;
+  }
+
+  &:backdrop {
+    background-color: $headerbar_bg_color;
+    transition: background-color $backdrop_transition;
+
+    > * {
+      filter: opacity(.5);
+      transition: filter $backdrop_transition;
+    }
+  }
+}
+
+%actionbar-inline > revealer > box {
+  background-color: transparent;
+  color: inherit;
+  box-shadow: none;
+  padding-top: $base_padding;
+
+  &:backdrop {
+    background-color: transparent;
+    transition: none;
+
+    > * {
+      filter: none;
+      transition: none;
+    }
+  }
+}
+
+%actionbar-shrunk > revealer > box {
+  padding-top: $base_padding / 2;
+  padding-bottom: $base_padding / 2;
+}
+
+/*************
+ * AdwBanner *
+ *************/
+banner > revealer > widget {
+  /* There are 2 more instances in _sidebars.css, keep in sync with that */
+  background-color: gtkmix($accent_bg_color, $window_bg_color, 30%);
+  color: $window_fg_color;
+  padding: $base_padding;
+
+  &:backdrop {
+    background-color: gtkmix($accent_bg_color, $window_bg_color, 15%);
+    transition: background-color $backdrop_transition;
+
+    > label, > button {
+      filter: opacity(.5);
+      transition: filter $backdrop_transition;
+    }
+  }
+}
+
+/******************
+ * AdwToolbarView *
+ ******************/
+toolbarview {
+  > .top-bar,
+  > .bottom-bar {
+    headerbar { @extend %headerbar-inline; }
+    searchbar { @extend %searchbar-inline; }
+    actionbar { @extend %actionbar-inline; }
+    menubar   { @extend %menubar-inline; }
+    tabbar    { @extend %tabbar-inline; }
+
+    .collapse-spacing {
+      padding-top: $base_padding / 2;
+      padding-bottom: $base_padding / 2;
+
+      headerbar { @extend %headerbar-shrunk; }
+      searchbar { @extend %searchbar-shrunk; }
+      actionbar { @extend %actionbar-shrunk; }
+      menubar   { @extend %menubar-shrunk; }
+      .toolbar  { @extend %toolbar-shrunk; }
+      tabbar    { @extend %tabbar-shrunk; }
+
+      viewswitcherbar { @extend %viewswitcherbar-shrunk; }
+    }
+  }
+
+  &.undershoot-top    scrolledwindow { @include undershoot(top); }
+  &.undershoot-bottom scrolledwindow { @include undershoot(bottom); }
+
+  window.devel & > .top-bar {
+    background-image: cross-fade(5% -gtk-recolor(url("assets/devel-symbolic.svg")),
+                                 image(transparent));
+    background-repeat: repeat-x;
+  }
+
+  window.devel dialog & > .top-bar {
+    background-image: unset;
+    background-repeat: unset;
+  }
+
+  > .top-bar,
+  > .bottom-bar {
+    background-color: $headerbar_backdrop_color;
+    color: $headerbar_fg_color;
+
+    &:backdrop {
+      background-color: $headerbar_bg_color;
+      transition: background-color $backdrop_transition;
+
+      > windowhandle {
+        filter: opacity(.5);
+        transition: filter $backdrop_transition;
+      }
+    }
+  }
+
+  > .top-bar {
+    box-shadow: 0 1px $border_color;
+
+    &.border {
+      box-shadow: 0 1px $border_color;
+    }
+  }
+
+  > .bottom-bar {
+    box-shadow: 0 -1px $border_color;
+
+    &.border {
+      box-shadow: 0 -1px $border_color;
+    }
+  }
+
+  .sidebar-pane &,
+  .content-pane &,
+  .about & { // reset
+    > .top-bar,
+    > .bottom-bar {
+      box-shadow: none;
+
+      &, &:backdrop {
+        background-color: transparent;
+      }
+    }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_tooltip.scss b/src/sass/libadwaita/widgets/_tooltip.scss
new file mode 100644
index 00000000..2ed45776
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_tooltip.scss
@@ -0,0 +1,20 @@
+tooltip {
+  &.background {
+    // background-color needs to be set this way otherwise it gets drawn twice
+    // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
+    background-color: transparentize(black, 0.2);
+    background-clip: padding-box;
+    border: 1px solid $tooltip_border_color; // this subtle border is meant to
+                                              // not make the tooltip melt with
+                                              // very dark backgrounds
+    color: white;
+  }
+
+  padding: 6px 10px;
+  border-radius: 9px;
+  box-shadow: none; // otherwise it gets inherited by windowframe.csd
+
+  > box {
+    border-spacing: $base_padding;
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_view-switcher.scss b/src/sass/libadwaita/widgets/_view-switcher.scss
new file mode 100644
index 00000000..afc708fd
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_view-switcher.scss
@@ -0,0 +1,123 @@
+viewswitcher {
+  border-spacing: 3px;
+
+  &.narrow {
+    margin-top: -3px;
+    margin-bottom: -3px;
+    min-height: 6px;
+  }
+
+  button.toggle {
+    padding: 0;
+
+    > stack > box {
+      &.narrow {
+        font-size: 0.75rem;
+        padding-top: 4px;
+
+        > label {
+          min-height: 18px;
+          padding-left: 3px;
+          padding-right: 3px;
+          padding-bottom: 2px;
+        }
+      }
+
+      &.wide {
+        padding: 2px 12px;
+        border-spacing: 6px;
+      }
+    }
+  }
+}
+
+/**********************
+ * AdwViewSwitcherBar *
+ **********************/
+
+viewswitcherbar actionbar > revealer > box {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 7px;
+}
+
+%viewswitcherbar-shrunk actionbar > revealer > box {
+  // Not 0px because view switcher has negative margin
+  padding-top: 6px;
+}
+
+/************************
+ * AdwViewSwitcherTitle *
+ ************************/
+
+viewswitchertitle {
+  margin-top: -6px;
+  margin-bottom: -6px;
+
+  viewswitcher {
+    margin-left: 12px;
+    margin-right: 12px;
+
+    &.narrow {
+      margin-top: 3px;
+      margin-bottom: 3px;
+    }
+
+    &.wide {
+      margin-top: 6px;
+      margin-bottom: 6px;
+    }
+  }
+
+  windowtitle {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+/*******************
+ * AdwIndicatorBin *
+ *******************/
+
+indicatorbin {
+  > indicator, > mask {
+    min-width: 6px;
+    min-height: 6px;
+    border-radius: 100px;
+  }
+
+  > indicator {
+    margin: 1px;
+    background: gtkalpha(currentColor, .4);
+  }
+
+  > mask {
+    padding: 1px;
+    background: black;
+  }
+
+  &.needs-attention > indicator {
+    background: $accent_color;
+  }
+
+  &.badge {
+    > indicator,
+    > mask {
+      min-height: 13px;
+    }
+
+    > indicator > label {
+      font-size: 0.6rem;
+      font-weight: bold;
+      padding-left: 4px;
+      padding-right: 4px;
+      color: white;
+    }
+
+    &.needs-attention > indicator {
+      background: $accent_bg_color;
+
+      > label { color: $accent_fg_color; }
+    }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_views.scss b/src/sass/libadwaita/widgets/_views.scss
new file mode 100644
index 00000000..8dd24e48
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_views.scss
@@ -0,0 +1,80 @@
+.view,
+%view {
+  color: $view_fg_color;
+  background-color: $view_bg_color;
+
+  &:disabled {
+    color: gtkalpha(currentColor, .5);
+    background-color: gtkmix($window_bg_color, $view_bg_color, 60%);
+  }
+
+  &:selected {
+    &:focus, & {
+      background-color: $view_selected_color;
+
+      border-radius: $button_radius;
+    }
+  }
+}
+
+// window.view { // reset
+//   color: $window_fg_color;
+//   background-color: $window_bg_color;
+// }
+
+textview {
+  caret-color: currentColor;
+
+  > text {
+    @extend %view;
+
+    background-color: transparent;
+  }
+
+  > border {
+    background-color: gtkmix($window_bg_color, $view_bg_color, 50%);
+  }
+
+  &:drop(active) {
+    caret-color: $drop_target_color;
+  }
+}
+
+rubberband {
+  border: 1px solid $accent_color;
+  background-color: gtkalpha($accent_color, 0.2);
+}
+
+flowbox > flowboxchild,
+gridview > child {
+  padding: 3px;
+  border-radius: $button_radius;
+
+  @include focus-ring();
+
+  &:selected {
+    background-color: $view_selected_color;
+
+    @if $contrast == 'high' {
+      box-shadow: inset 0 0 0 1px $border_color;
+    }
+  }
+}
+
+gridview > child.activatable {
+  &:hover { background-color: $view_hover_color; }
+
+  &:active { background-color: $view_active_color; }
+
+  &:selected {
+    &:hover { background-color: $view_selected_hover_color; }
+
+    &:active { background-color: $view_selected_active_color; }
+  }
+
+  @if $contrast == 'high' {
+    &:hover, &:active {
+      box-shadow: inset 0 0 0 1px $border_color;
+    }
+  }
+}
diff --git a/src/sass/libadwaita/widgets/_window.scss b/src/sass/libadwaita/widgets/_window.scss
new file mode 100644
index 00000000..9352bf64
--- /dev/null
+++ b/src/sass/libadwaita/widgets/_window.scss
@@ -0,0 +1,71 @@
+
+window {
+  border: none;
+
+  &.csd {
+    margin: 0;
+    border-radius: $window_radius;
+    outline: 1px solid $window_outline_color;
+    outline-offset: -1px;
+
+    @if $rimless == 'true' {
+      box-shadow: $shadow-z16,
+      0 0 36px transparent;
+    } @else {
+      box-shadow: $shadow-z16,
+      0 0 36px transparent,
+      0 0 0 1px $headerbar_darker_shade_color;
+    }
+
+    &:backdrop {
+      // the transparent shadow here is to enforce that the shadow extents don't
+      // change when we go to backdrop, to prevent jumping windows.
+      // The biggest shadow should be in the same order then in the active state
+      // or the jumping will happen during the transition.
+      transition: box-shadow $backdrop_transition;
+
+      @if $rimless == 'true' {
+        box-shadow: $shadow-z4,
+        0 0 36px transparent;
+      } @else {
+        box-shadow: $shadow-z4,
+        0 0 36px transparent,
+        0 0 0 1px $headerbar_darker_shade_color;
+      }
+    }
+
+    // &.dialog.message,
+    // &.messagedialog { }
+
+    &.tiled,
+    &.tiled-top,
+    &.tiled-left,
+    &.tiled-right,
+    &.tiled-bottom {
+      border-radius: 0;
+      outline: none;
+    }
+
+    &.maximized,
+    &.fullscreen {
+      border-radius: 0;
+      outline: none;
+      box-shadow: none;
+      transition: none;
+    }
+  }
+
+  &.solid-csd {
+    margin: 0;
+    padding: 2px;
+    border-radius: 0;
+    background-color: $headerbar_bg_color;
+    border: 1px solid $headerbar_darker_shade_color;
+  }
+
+  // server-side decorations as used by mutter
+  &.ssd {
+    // just doing borders, wm draws actual shadows
+    box-shadow: 0 0 0 1px $headerbar_darker_shade_color;
+  }
+}