Revert "Propose a different traditional ok implentation (#290)"

This reverts commit 9bf6f4ec2f77fd09a12ba2b68416e81a13b4ca3d.

1 files changed, 0 insertions, 4411 deletions

diff --git a/desktop-themes/YaruOk/gtk-4.0/_common.scss b/desktop-themes/YaruOk/gtk-4.0/_common.scss
deleted file mode 100755
index 5eb62f50..00000000
--- a/desktop-themes/YaruOk/gtk-4.0/_common.scss
+++ /dev/null
@@ -1,4411 +0,0 @@
-@function gtkalpha($c,$a) {
-  @return unquote("alpha(#{$c},#{$a})");
-}
-
-$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-$asset_suffix: if($variant=='dark', '-dark', '');
-$backdrop_transition: 200ms ease-out;
-$button_transition: all 200ms $ease-out-quad;
-$focus_transition: outline-width 200ms $ease-out-quad, outline-offset 200ms $ease-out-quad;
-$button_radius: 4px; // Yaru change: we want everything to be less round
-$menu_radius: 3px; // Yaru change: we want everything to be less round
-$menu_margin: $menu_radius; //margin around menuitems & sidebar items
-$window_radius: $button_radius + 3;
-$popover_radius: $button_radius + 2; // Yaru change: we want everything to be less round
-
-/***************
- * Base States *
- ***************/
-.background {
-  color: $fg_color;
-  background-color: $bg_color;
-
-  &:backdrop {
-    text-shadow: none;
-    -gtk-icon-shadow: none;
-  }
-}
-
-dnd {
-  color: $fg-color;
-}
-
-.normal-icons {
-  -gtk-icon-size: 16px;
-}
-
-.large-icons {
-  -gtk-icon-size: 32px;
-}
-
-/*
-   These wildcard seems unavoidable, need to investigate.
-   Wildcards are bad and troublesome, use them with care,
-   or better, just don't.
-   Every time a wildcard is used a kitten dies, painfully.
-*/
-
-spinner:disabled,
-arrow:disabled,
-scrollbar:disabled,
-check:disabled,
-radio:disabled,
-treeview.expander:disabled { -gtk-icon-filter: opacity(0.5); }
-
-.view,
-%view {
-  color: $text_color;
-  background-color: $base_color;
-
-  &:disabled {
-    color: $insensitive_fg_color;
-    background-color: $insensitive_bg_color;
-  }
-
-  &:selected {
-    &:focus, & {
-      @extend %selected_items;
-
-      border-radius: 3px;
-    }
-  }
-}
-
-textview {
-  > text {
-    @extend %view;
-
-    > selection { &:focus, & { @extend %selected_items; }}
-  }
-
-  &:drop(active) {
-    caret-color: $drop_target_color;
-  }
-}
-
-textview > border { background-color: mix($bg_color, $base_color, 50%); }
-
-iconview {
-  @extend .view;
-
-  @include focus-ring();
-
-  &:drop(active) {
-    box-shadow: none;
-  }
-
-  > dndtarget:drop(active) {
-    border-style: solid;
-    border-width: 1px;
-    border-color: $selected_borders_color;
-  }
-}
-
-rubberband {
-  border: 1px solid darken($selected_bg_color, 10%);
-  background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
-}
-
-flowbox {
-  > rubberband { @extend rubberband; }
-
-  > flowboxchild {
-    padding: 3px;
-    transition: $focus_transition;
-
-    @include focus-ring();
-
-    &:selected {
-      outline-color: $alt_focus_border_color;
-
-      @extend %selected_items;
-    }
-  }
-}
-
-gridview {
-  > rubberband { @extend rubberband; }
-
-  > child {
-    padding: 3px;
-    transition: $focus_transition;
-
-    @include focus-ring();
-
-    &:selected {
-      outline-color: $alt_focus_border_color;
-
-      @extend %selected_items;
-    }
-
-    box { //cells
-      border-spacing: 8px; //label separation
-      margin: 12px;
-    }
-  }
-}
-
-coverflow cover {
-  color: $text_color;
-  background-color: $base_color;
-  border: 1px solid black;
-}
-
-label {
-  @include focus-ring();
-
-  &.separator {
-    @extend .dim-label;
-  }
-
-  &:selected { @extend %nobg_selected_items; }
-
-  > selection {
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
-  }
-
-  &:disabled {
-    color: $insensitive_fg_color;
-
-    button & { color: inherit; }
-
-    > selection { @extend %selected_items_disabled; }
-  }
-
-  &.error {
-   color: $error_color;
-   &:disabled { color: transparentize($error_color,0.5); }
-  }
-}
-
-.dim-label {
-  opacity: $dim_label_opacity;
-  text-shadow: none;
-}
-
-window.assistant {
-  .sidebar {
-    padding: $menu-margin;
-    border-top: 1px solid $borders_color;
-  }
-
-  &.csd .sidebar { border-top-style: none; }
-
-  .sidebar > label { padding: 6px 12px; }
-
-  .sidebar > label.highlight {
-    background-color: $menu_selected_color;
-    border-radius: $menu-margin;
-  }
-}
-
-window.aboutdialog image.large-icons {
-  -gtk-icon-size: 128px;
-}
-
-%osd,
-.osd {
-  color: $osd_fg_color;
-  border: none;
-  background-color: $osd_bg_color;
-  background-clip: padding-box;
-  -gtk-icon-shadow: 0 1px black;
-
-}
-
-
-/*********************
- * Spinner Animation *
- *********************/
-@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: 0.5; }
-  }
-}
-
-/**********************
- * General Typography *
- **********************/
-
-.large-title {
-   font-weight: 300;
-   font-size: 24pt;
-}
-.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;
-}
-
-/****************
- * Text Entries *
- ****************/
-
-%entry,
-entry {
-  %entry_basic, & {
-    min-height: 32px;
-    padding-left: 8px;
-    padding-right: 8px;
-    border: 1px solid;
-    border-radius: $button_radius;
-    border-spacing: 6px;
-    transition: all 200ms $ease-out-quad;
-
-    @include entry(normal);
-
-    @include focus-ring($focus-state: 'focus-within');
-
-    > image { // icons inside the entry
-      &.left { margin-right: 6px; }
-      &.right { margin-left: 6px; }
-    }
-
-    > text > placeholder {
-      @extend .dim-label;
-    }
-
-    > text > block-cursor {
-      @include entry(block_cursor);
-    }
-
-    &.flat {
-      &:focus-within, &:backdrop, &:disabled, &:backdrop:disabled, & {
-        min-height: 0;
-        padding: 2px;
-        background-color: transparent;
-        border-color: transparent;
-        border-radius: 0;
-      }
-    }
-
-    &:focus-within {
-      @include entry(focus);
-      > placeholder {
-        opacity: 0; /* We hide placeholders on focus */
-      }
-    }
-
-    &:disabled { @include entry(insensitive); }
-
-    > text > selection { @extend %selected_items; }
-
-    // entry error and warning style
-    @each $e_type, $e_color in (error, $error_color),
-                               (warning, $warning_color) {
-      &.#{$e_type} {
-        color: $e_color;
-
-        @include focus-ring($focus-state: 'focus-within', $fc: transparentize($e_color, 0.5));
-
-        &:focus-within { @include entry(focus, $e_color); }
-
-        > selection { background-color: $e_color; }
-      }
-    }
-
-    > image { // entry icons colors
-      color: mix($fg_color, $base_color, 80%);
-
-      &:hover { color: $fg_color; }
-
-      &:active { color: $selected_bg_color; }
-
-    }
-
-    &.password image.caps-lock-indicator {
-      color: mix($backdrop_fg_color, $backdrop_base_color, 80%);
-    }
-
-    &:drop(active) {
-      &:focus-within, & {
-        border-color: $drop_target_color;
-        box-shadow: inset 0 0 0 1px $drop_target_color;
-      }
-    }
-
-    .osd & {
-      @include entry(osd);
-
-      &:focus-within { @include entry(osd-focus); }
-
-      &:disabled { @include entry(osd-insensitive); }
-    }
-  }
-
-  > progress {
-    margin-bottom: 2px;
-  }
-
-  progress > trough > progress {
-    background-color: transparent;
-    background-image: none;
-    border-radius: 0;
-    border-width: 0 0 2px;
-    border-color: $selected_bg_color;
-    border-style: solid;
-    box-shadow: none;
-
-  }
-
-   // linked entries
-  .linked:not(.vertical) > & { @extend %linked; }
-
-  .linked:not(.vertical) > &:drop(active) + &,
-  .linked:not(.vertical) > &:drop(active) + button,
-  .linked:not(.vertical) > &:drop(active) + menubutton > button,
-  .linked:not(.vertical) > &:drop(active) + dropdown > button,
-  .linked:not(.vertical) > &:drop(active) + colorbutton > button,
-  .linked:not(.vertical) > &:drop(active) + fontbutton > button,
-  .linked:not(.vertical) > &:drop(active) + filechooserbutton > button,
-  .linked:not(.vertical) > &:drop(active) + filechooserbutton > combobox > box > button.combo,
-  .linked:not(.vertical) > &:drop(active) + appchooserbutton > combobox > box > button.combo,
-  .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
-
-  // Vertically linked entries
-  // FIXME: take care of "colored" entries
-  .linked.vertical > & {
-    @extend %linked_vertical;
-
-    // brighter border between linked entries
-    &:not(:disabled) + entry:not(:disabled),
-    &:not(:disabled) + %entry:not(:disabled) {
-      border-top-color: mix($borders_color, $base_color, 30%);
-    }
-
-    // brighter border between linked insensitive entries
-    &:disabled + %entry:disabled,
-    &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, 30%); }
-
-    + %entry:drop(active):not(:only-child),
-    + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; }
-
-    &:drop(active):not(:only-child) {
-      + %entry,
-      + entry,
-      + button,
-      + menubutton > button,
-      + dropdown > button,
-      + colorbutton > button,
-      + fontbutton > button,
-      + filechooserbutton > button,
-      + filechooserbutton > combobox > box > button.combo,
-      + appchooserbutton > combobox > box > button.combo,
-      + combobox > box > button.combo { border-top-color: $drop_target_color; }
-    }
-  }
-
-  &.error { color: $error_color; }
-}
-
-treeview entry {
-  &:focus-within {
-    &:dir(rtl), &:dir(ltr) { // specificity bump hack
-      background-color: $base_color;
-      transition-property: color, background;
-    }
-  }
-
-  &.flat, & {
-    border-radius: 0;
-    background-image: none;
-    background-color: $base_color;
-
-    &:focus-within { border-color: $selected_bg_color; }
-  }
-}
-
-/*******************
- * Editable Labels *
- *******************/
-editablelabel > stack > text {
-  @include entry(normal);
-}
-
-/***********
- * Buttons *
- ***********/
-// stuff for .needs-attention
-$_dot_color: if($variant=='light', $selected_bg_color,
-                                   lighten($selected_bg_color,15%));
-@keyframes needs_attention {
-  from { background-image: radial-gradient(farthest-side, $_dot_color 0%, transparentize($_dot_color, 1) 0%); }
-  to { background-image: radial-gradient(farthest-side, $_dot_color 95%, transparentize($_dot_color, 1)); }
-}
-
-%button,
-button {
-  @at-root %button_basic, & {
-
-    min-height: 24px;
-    min-width: 16px;
-    padding: 4px 9px;
-    border: 1px solid;
-    border-radius: $button_radius;
-    transition: $button_transition;
-
-    @include button(normal);
-
-    @include focus-ring();
-
-    &:hover {
-      @include button(hover);
-      -gtk-icon-filter: brightness(1.2);
-    }
-
-    &:active,
-    &:checked {
-      @include button(active);
-
-      transition-duration: 50ms;
-    }
-
-    &:checked:hover { @include button(checked-hover); }
-    &:checked:active { @include button(checked-active); }
-
-    &:backdrop {
-      &.flat, & {
-        @include button(backdrop);
-
-        transition: $backdrop_transition;
-        -gtk-icon-filter: none;
-
-        &:active,
-        &:checked { @include button(backdrop-active); }
-
-        &:disabled {
-          @include button(backdrop-insensitive);
-
-          &:active,
-          &:checked { @include button(backdrop-insensitive-active); }
-        }
-      }
-    }
-
-    &:disabled {
-      @include button(insensitive);
-
-      &:active,
-      &:checked { @include button(insensitive-active); }
-    }
-
-    @at-root %button_basic_flat,
-    &.flat {
-      @include button(undecorated);
-      // to avoid adjacent buttons borders clashing when transitioning, the transition on the normal state is set
-      // to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
-      // it won't fade out when the pointer leave the button allocation area. To make the transition more evident
-      // in this case the duration is increased.
-      transition: none;
-
-      &:hover {
-        @include button(undecorated-hover);
-        transition: $button_transition;
-        transition-duration: 500ms;
-      }
-      &:active,
-      &:checked {
-        @include button(undecorated-active);
-        transition: $button_transition;
-      }
-      &:backdrop, &:disabled, &:backdrop:disabled { @include button(undecorated); }
-    }
-
-    &.image-button {
-      min-width: 24px;
-      padding-left: 5px;
-      padding-right: 5px;
-    }
-
-    &.text-button {
-      padding-left: 16px;
-      padding-right: 16px;
-    }
-
-    &.text-button.image-button {
-      padding-left: 8px;
-      padding-right: 8px;
-
-      label {
-        padding-left: 8px;
-        padding-right: 8px;
-      }
-    }
-
-    @at-root %button_basic_drop_active,
-    &:drop(active) {
-      color: $drop_target_color;
-      border-color: $drop_target_color;
-      box-shadow: inset 0 0 0 1px $drop_target_color;
-    }
-  }
-
-  @at-root %button_selected, & {
-    row:selected & {
-      @if $variant == 'light' { border-color: $selected_borders_color; }
-    }
-
-    @at-root %button_selected_flat, &.flat {
-      row:selected & {
-        &:not(:active):not(:checked):not(:hover):not(disabled) {
-          color: $selected_fg_color;
-          border-color: transparent;
-
-          &:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); }
-        }
-      }
-    }
-  }
-
-
-  // big standalone buttons like in Documents pager
-  &.osd {
-    min-width: 26px;
-    min-height: 32px;
-
-    &.image-button {
-      min-width: 30px;
-      &:only-child {
-        margin: 4px;
-        border-radius: 50%; // completely round when it is a single button
-        box-shadow: 0 1px 2px transparentize(black, 0.8); // drop shadow for the only child
-      };
-    }
-
-    color: $osd_fg_color;
-    border-radius: 5px;
-
-    @include button(osd);
-
-    border: none;
-    box-shadow: none;
-
-    &:hover {
-      @include button(osd-hover);
-
-      border: none;
-      box-shadow: none;
-    }
-
-    &:active,
-    &:checked {
-      @include button(osd-active);
-
-      border: none;
-      box-shadow: none;
-    }
-  }
-
-  //overlay / OSD style
-  @at-root %osd_button,
-  .osd & {
-    @include button(osd);
-
-    &:hover { @include button(osd-hover); }
-
-    &:active,
-    &:checked { &:backdrop, & { @include button(osd-active); }}
-
-    &:disabled { &:backdrop, & { @include button(osd-insensitive); }}
-
-    &.flat {
-      @include button(undecorated);
-
-      box-shadow: none;
-      -gtk-icon-shadow: 0 1px black;
-
-      &:hover { @include button(osd-hover); }
-
-      &:disabled {
-        @include button(osd-insensitive);
-        background-image: none;
-        border-color: transparent;
-        box-shadow: none;
-      }
-
-      &:active,
-      &:checked { @include button(osd-active); }
-    }
-  }
-
-  // Suggested and Destructive Action buttons
-  @each $b_type, $b_color in (suggested-action, $suggested_bg_color), // Yaru change: use our own palette
-                             (destructive-action, $destructive_color) {
-    &.#{$b_type} {
-      @include button(normal, $b_color, white);
-      @include focus-ring($fc: $alt_focus_border_color);
-
-      &.flat {
-        @include button(undecorated);
-
-        color: $b_color; //FIXME: does it work on the dark variant?
-      }
-
-      &:hover { @include button(hover, $b_color, white); }
-
-      &:active,
-      &:checked { @include button(active, $b_color, white); }
-
-      &.flat {
-        &:disabled {
-          @include button(undecorated);
-
-          color: transparentize($b_color, 0.2);
-        }
-      }
-
-      &:disabled {
-        @include button(insensitive);
-
-        &:active,
-        &:checked { @include button(insensitive-active, $b_color, white); }
-      }
-
-      .osd & {
-        @include button(osd, $b_color);
-
-        &:hover { @include button(osd-hover, $b_color); }
-
-        &:active,
-        &:checked { &:backdrop, & { @include button(osd-active, $b_color); }}
-
-        &:disabled { &:backdrop, & { @include button(osd-insensitive, $b_color); }}
-
-      }
-    }
-  }
-
-  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;
-    }
-
-    &.needs-attention {
-      > label,
-      > image { @extend %needs_attention; }
-    }
-  }
-
-  // hide separators
-  &.font{
-    separator { background-color: transparent; }
-    > box { border-spacing: 6px; }
-    > box > box > label { font-weight: bold; }
-  }
-
-  .linked:not(.vertical) > & { @extend %linked; }
-
-  .linked.vertical > & { @extend %linked_vertical; }
-
-  &.circular { // force circular button shape
-    min-width: 32px;
-    min-height: 32px;
-    padding: 0;
-    border-radius: 9999px;
-
-    label { padding: 0; }
-  }
-}
-
-%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, $_dot_color 96%, transparentize($_dot_color,1 ));
-  background-size: 6px 6px, 6px 6px;
-  background-repeat: no-repeat;
-
-  @if $variant == 'light' { background-position: right 3px, right 4px; }
-
-  @else { background-position: right 3px, right 2px; }
-
-  &:backdrop { background-size: 6px 6px, 0 0;}
-
-  &:dir(rtl) {
-    @if $variant == 'light' { background-position: left 3px, left 4px; }
-
-    @else { background-position: left 3px, left 2px; }
-  }
-}
-
-
-%linked_not_left {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-%linked_not_right {
-  border-right-style: none;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-// 1st/last child are at text start/end
-%linked {
-  &:dir(ltr) {
-    &:not(:first-child) { @extend %linked_not_left; }
-    &:not(:last-child) { @extend %linked_not_right; }
-  }
-
-  &:dir(rtl) {
-    &:not(:first-child) { @extend %linked_not_right; }
-    &:not(:last-child) { @extend %linked_not_left; }
-  }
-}
-
-%linked_not_top {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-%linked_not_bottom {
-  border-bottom-style: none;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-%linked_vertical {
-  &:not(:first-child) { @extend %linked_not_top; }
-
-  &:not(:last-child) { @extend %linked_not_bottom; }
-}
-
-%undecorated_button {
-  background-color: transparent;
-  background-image: none;
-  border-color: transparent;
-  box-shadow: inset 0 1px transparentize(white, 1),
-              0 1px transparentize(white, 1);
-  text-shadow: none;
-  -gtk-icon-shadow: none;
-}
-
-.linked:not(.vertical) > menubutton,
-.linked:not(.vertical) > dropdown,
-.linked:not(.vertical) > colorbutton,
-.linked:not(.vertical) > fontbutton,
-.linked:not(.vertical) > filechooserbutton {
-  &:dir(ltr) {
-    &:not(:first-child) > button { @extend %linked_not_left; }
-    &:not(:last-child) > button { @extend %linked_not_right; }
-  }
-
-  &:dir(rtl) {
-    &:not(:first-child) > button { @extend %linked_not_right; }
-    &:not(:last-child) > button { @extend %linked_not_left; }
-  }
-}
-
-.linked.vertical > menubutton,
-.linked.vertical > dropdown,
-.linked.vertical > colorbutton,
-.linked.vertical > fontbutton,
-.linked.vertical > filechooserbutton {
-  &:not(:first-child) > button { @extend %linked_not_top; }
-  &:not(:last-child) > button { @extend %linked_not_bottom; }
-}
-
-/* menu buttons */
-modelbutton.flat {
-  min-height: 26px;
-  padding-left: 5px;
-  padding-right: 5px;
-  border-radius: $button_radius;
-
-  @extend %undecorated_button;
-
-  &:hover { background-color: $menu_selected_color; }
-
-  &:disabled {
-    color: $insensitive_fg_color;
-
-
-  }
-
-  &:selected { @extend %selected_items; }
-}
-
-modelbutton.flat arrow {
-  background: none;
-  min-width: 16px;
-  min-height: 16px;
-  opacity: 0.3; //dim icon
-
-  &:hover { background: none; }
-
-  &.left { -gtk-icon-source: -gtk-icontheme("go-previous-symbolic"); }
-
-  &.right { -gtk-icon-source: -gtk-icontheme("go-next-symbolic"); }
-}
-
-/* oldstyle toolbar buttons */
-
-.toolbar button {
-  margin: 1px;
-  @extend %undecorated_button;
-
-  &:hover { @include button('hover'); }
-  &:active { @include button('active'); }
-  &:disabled { @include button('insensitive'); }
-  &:backdrop { @include button('backdrop'); }
-  &:backdrop:disabled { @include button('backdrop-insensitive'); }
-}
-
-button.color {
-  padding: 4px;
-
-  > colorswatch:only-child {
-    &, > overlay { border-radius: 0; }
-
-    @if $variant == 'light' {
-      box-shadow: 0 1px $shadow_color;
-
-      .osd & { box-shadow: none; }
-    }
-  }
-
-  @if $variant == 'light' {
-    .osd &, & {
-      &:disabled,
-      &:active,
-      &:checked { colorswatch:only-child { box-shadow: none; }}
-    }
-  }
-}
-
-/* list buttons */
-/* tone down as per new designs, see issue #1473 */
-%list_button,
-list > row button.image-button:not(.flat) {
-  @extend %undecorated_button;
-  border: 1px solid transparentize($borders_color, .5);
-  &:hover { @include button(hover); }
-  &:active,
-  &:checked { @include button(active); }
-}
-
-/*********
- * Links *
- *********/
-
-%link,
-link {
-  color: $link_color;
-  text-decoration: underline;
-
-  &:visited {
-    color: $link_visited_color;
-
-    *:selected & { color: mix($selected_fg_color, $link_visited_color, 60%); }
-  }
-
-  &:hover {
-    $_fg: lighten($link_color, 10%);
-    color: $_fg;
-
-    *:selected & { color: mix($selected_fg_color, $_fg, 90%); }
-  }
-
-  &:active {
-    color: $link_color;
-
-    *:selected & { color: mix($selected_fg_color, $link_color, 80%); }
-  }
-
-  &:disabled { color: transparentize(desaturate($link_color, 100%), 0.2); }
-
-  @at-root %link_selected,
-  &:selected,
-  *:selected & { color: mix($selected_fg_color, $link_color, 80%); }
-}
-
-link {
-  @include focus-ring();
-}
-
-button.link {
-  @extend %link;
-
-  &,
-  &:hover,
-  &:active,
-  &:checked {
-    @extend %undecorated_button;
-
-    text-shadow: none;
-  }
-
-  > label {
-    text-decoration: underline;
-  }
-}
-
-
-/*****************
- * GtkSpinButton *
- *****************/
-spinbutton {
-  &:not(.vertical) {
-    // in this horizontal configuration, the whole spinbutton
-    // behaves as the entry, so we extend the entry styling
-    // and nuke the style on the internal entry
-    @extend %entry;
-
-    padding: 0;
-    border-spacing: 0;
-
-    %spinbutton_horz_entry {
-      min-width: 28px;
-      // reset all the other props since the spinbutton node is styled here
-      margin: 0;
-      background: none;
-      background-color: transparent;
-      border: none;
-      border-radius: 0;
-      box-shadow: none;
-      padding: 6px;
-
-      &:backdrop:disabled { background-color: transparent; }
-    }
-
-    > text {
-      @extend %spinbutton_horz_entry;
-    }
-
-    /* :not here just to bump specificity above that of the list button styling */
-    > button.image-button.up:not(.flat),
-    > button.image-button.down:not(.flat) {
-      min-height: 16px;
-      margin: 0;
-      padding-bottom: 0;
-      padding-top: 0;
-      color: mix($fg_color, $base_color, 90%);
-      background-image: none;
-      border-style: none none none solid;
-      border-color: transparentize($borders_color, 0.7);
-      border-radius: 0;
-      box-shadow: none;
-
-      &:dir(rtl) { border-style: none solid none none; }
-
-      &:hover {
-        color: $fg_color;
-        background-color: darken($bg_color,5%);
-      }
-
-      &:disabled {
-        color: transparentize($insensitive_fg_color, 0.7);
-        background-color: transparent;
-      }
-
-      &:active {
-        background-color: transparentize(black, 0.9);
-        box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
-      }
-
-      &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; }
-
-      &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; }
-    }
-  }
-
-  // OSD horizontal
-  .osd &:not(.vertical) {
-    > text {
-      @extend %spinbutton_horz_entry;
-    }
-
-    > button.image-button.up:not(.flat),
-    > button.image-button.down:not(.flat) {
-      @include button(undecorated);
-
-      color: $osd_fg_color;
-      border-style: none none none solid;
-      border-color: transparentize($osd_borders_color, 0.3);
-      border-radius: 0;
-      box-shadow: none;
-      -gtk-icon-shadow: 0 1px black;
-
-      &:dir(rtl) { border-style: none solid none none; }
-
-      &:hover {
-        @include button(undecorated);
-
-        color: $osd_fg_color;
-        border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
-        background-color: darken($osd_bg_color,10%);
-        -gtk-icon-shadow: 0 1px black;
-        box-shadow: none;
-      }
-
-      &:disabled {
-        @include button(undecorated);
-
-        color: $osd_insensitive_fg_color;
-        border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
-        -gtk-icon-shadow: none;
-        box-shadow: none;
-      }
-
-      &: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
-  &.vertical {
-    // in the vertical configuration, we treat the spinbutton
-    // as a box, and tweak the style of the entry in the middle
-    // so that it's linked
-
-    // FIXME: this should not be set at all, but otherwise it gets the wrong
-    // color
-    &:disabled { color: $insensitive_fg_color; }
-
-    &:drop(active) {
-      border-color: transparent;
-      box-shadow: none;
-    }
-
-    > text {
-      @extend %entry;
-
-      min-height: 32px;
-      min-width: 32px;
-      padding: 0;
-      border-radius: 0;
-
-      > selection { @extend %selected_items; }
-      > block-cursor { @include entry(block_cursor); }
-    }
-
-    > button {
-      min-height: 32px;
-      min-width: 32px;
-      padding: 0;
-
-      &.up { @extend %top_button; }
-
-      &.down { @extend %bottom_button; }
-    }
-
-    %top_button {
-      border-bottom-style: none;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    %bottom_button {
-      border-top-style: none;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-  }
-
-  // OSD vertical
-  .osd &.vertical > button:first-child {
-    @include button(osd);
-
-    &:hover { @include button(osd-hover);}
-
-    &:active { @include button(osd-active); }
-
-    &:disabled { @include button(osd-insensitive); }
-  }
-
-  // Misc
-  treeview &:not(.vertical) {
-    min-height: 0;
-    border-style: none;
-    border-radius: 0;
-
-    > text {
-      min-height: 0;
-      padding: 1px 2px;
-    }
-  }
-
-  font-feature-settings: "tnum";
-}
-
-
-/**************
- * ComboBoxes *
- **************/
-dropdown > popover.menu.background > contents { padding: 0; } //allow search entries with no margin
-
-dropdown > button > box {
-  border-spacing: 6px;
-}
-
-dropdown,
-combobox {
-  arrow {
-    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
-    min-height: 16px;
-    min-width: 16px;
-  }
-
-  // align menu labels with the button label
-  > popover.menu > contents modelbutton {
-    padding-left: 9px;
-    padding-right: 9px;
-  }
-
-  &.linked {
-    button:nth-child(2) {
-      &:dir(ltr) { @extend %linked_not_left; }
-      &:dir(rtl) { @extend %linked_not_right; }
-    }
-  }
-
-  &:drop(active) { // FIXME: untested
-    box-shadow: none;
-
-    button.combo { @extend %button_basic_drop_active; }
-  }
-
-  // newstyle
-  popover {
-   margin-top: 6px;
-   padding: 0;
-
-   listview {
-
-      margin: 8px 0;
-
-      &>row {
-         padding: 8px;
-
-         &:selected {
-           outline-color: $alt_focus_border_color;
-           color: $text-color;
-           background-color: $menu_selected_color;
-         }
-      }
-   }
-
-    // drodowns with searchboxes on top
-    .dropdown-searchbar {
-      padding: 6px;
-      border-bottom: 1px solid $borders_color;
-    }
-  }
-}
-
-
-// the combo is a composite widget so the way we do button linking doesn't
-// work, special case needed. See
-// https://bugzilla.gnome.org/show_bug.cgi?id=733979
-
-.linked:not(.vertical) > filechooserbutton > combobox,
-.linked:not(.vertical) > appchooserbutton > combobox,
-.linked:not(.vertical) > combobox {
-  &:dir(ltr) {
-    &:not(:first-child) > box > button.combo { @extend %linked_not_left; }
-    &:not(:last-child) > box > button.combo { @extend %linked_not_right; }
-  }
-
-  &:dir(rtl) {
-    &:not(:first-child) > box > button.combo { @extend %linked_not_right; }
-    &:not(:last-child) > box > button.combo { @extend %linked_not_left; }
-  }
-}
-
-.linked.vertical > filechooserbutton > combobox,
-.linked.vertical > appchooserbutton > combobox,
-.linked.vertical > combobox {
-  &:not(:first-child) > box > button.combo { @extend %linked_not_top; }
-  &:not(:last-child) > box > button.combo { @extend %linked_not_bottom; }
-}
-
-
-/************
- * Toolbars *
- ************/
-%toolbar {
-  padding: 4px;
-  border-spacing: 4px;
-  background-color: $bg_color;
-}
-
-.toolbar,
-toolbar {
-  @extend %toolbar;
-  
-   background-image: linear-gradient(to bottom,
-                      $toolbar_gradient_a 2px,
-                      $toolbar_gradient_b 50%,
-                      $toolbar_gradient_c 50%,
-                      $toolbar_gradient_d);
-  padding: 2px ;
-   border-width: 1px 0 1px 0;
-    border-radius: 0;
-    border-style: solid;
-    border-top-color: $base_color;
-    border-bottom-color: $toolbar_border_bottom_color;
-
-  // on OSD
-  .osd & { background-color: transparent; }
-
-  // stand-alone OSD toolbars
-  &.osd {
-    padding: 13px;
-    border: none;
-    border-radius: 5px;
-    background-color: $osd_bg_color;
-
-    &.left,
-    &.right,
-    &.top,
-    &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
-  }
-
-  // toolbar separators
-  &.horizontal > separator { margin: 4px 0; }
-  &.vertical > separator { margin: 0 4px; }
-}
-
-//searchbar & location-bar
-searchbar > revealer > box {
-  padding: 6px;
-  border-spacing: 6px;
-  @extend %toolbar;
-
-  @extend %darkbar;
-
-  border-width: 0 0 1px;
-}
-
-%darkbar {
-  border-style: solid;
-  border-color: $borders_color;
-  $_bg: mix($bg_color, $borders_color, 70%);
-  background-color: $_bg;
-
-  &:backdrop {
-    border-color: $backdrop_borders_color;
-    background-color: $backdrop_dark_fill;
-    box-shadow: none;
-    transition: $backdrop_transition;
-  }
-}
-
-/**************
- * GtkInfoBar *
- **************/
-infobar {
-  > revealer > box {
-    padding: 8px;
-    border-spacing: 12px;
-  }
-
-  &.action:hover > revealer > box {
-      background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 47%), 30%),
-                        desaturate(darken(invert($selected_bg_color), 42%), 70%));
-  }
-
-  &.info,
-  &.question,
-  &.warning,
-  &.error {
-    > revealer > box {
-      border-bottom: 1px solid lighten($borders_color, 5%);
-      background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 45%), 30%),
-                        desaturate(darken(invert($selected_bg_color), 40%), 70%));
-    }
-  }
-}
-
-   //close button for info and searchbar (#3215)
-
-   infobar .close,
-   searchbar .close {
-      @include button(undecorated);
-      min-width: 16px;
-      min-height: 16px;
-      padding: 4px;
-      border-radius: 50%;
-
-      &:hover { @include button(hover); }
-   }
-
-
-/*****************
- * Title buttons *
- *****************/
-
-windowcontrols {
-  border-spacing: 6px;
-
-  &:not(.empty) {
-    &.start:dir(ltr),
-    &.end:dir(rtl) {
-      margin-right: 7px;
-    }
-
-    &.start:dir(rtl),
-    &.end:dir(ltr) {
-      margin-left: 7px;
-    }
-  }
-
-  button { // Yaru changes: disable default windowcontrols button look (see _tweaks for yaru style)
-    //@extend %button_basic;
-
-    //@extend %button_basic_flat;
-
-
-    border-radius: 9999px;
-    padding: 6px;
-    margin: 0 2px;
-    min-width: 0;
-    min-height: 0;
-    //&:hover {
-      //special case hover colors inside a headerbar
-      //@include button(undecorated-hover,$c:darken($headerbar_bg_color,6%));
-    //}
-    //&:active,
-    //&:checked { @include button(undecorated-active,$c:darken($headerbar_bg_color,10%)); }
-  }
-}
-
-
-/***************
- * Header bars *
- ***************/
-%titlebar,
-headerbar {
-  padding: 0 6px;
-  min-height: 23px;
-  border-width: 0 0 1px;
-  border-style: solid;
-  border-color: $alt_borders_color;
-  border-radius: 0;
-
-  @include headerbar_fill(darken($bg_color, 10%));
-
-  &:backdrop {
-    border-color: $backdrop_borders_color;
-    @include headerbar_fill(darken($bg_color, 10%));
-    box-shadow: inset 0 1px $top_hilight;
-
-    transition: $backdrop_transition;
-  }
-
-  .title {
-    padding-left: 12px;
-    padding-right: 12px;
-    font-weight: bold;
-  }
-
-  .subtitle {
-    font-size: smaller;
-    padding-left: 12px;
-    padding-right: 12px;
-
-    @extend .dim-label;
-  }
-
-  /* Darken switchbuttons for headerbars. issue #1588 */
-  stackswitcher > button:checked,
-  button.toggle:checked {
-
-    background: if($variant == 'light', image(darken($bg_color, 17%)), image(darken($bg_color, 9%)));
-    border-color: darken($borders_color, 6%); // Yaru changes: modify borders
-    // border-top-color: darken($borders_color, 8%);
-    &:backdrop {
-      @include button(backdrop-active);
-    }
-  }
-
-  // squared corners when the window is maximized, tiled, or fullscreen
-  .tiled &,
-  .tiled-top &,
-  .tiled-left &,
-  .tiled-right &,
-  .tiled-bottom &,
-  .maximized &,
-  .fullscreen & {
-    &:backdrop, & {
-      border-radius: 0;
-    }
-  }
-
-  &.default-decoration {
-    min-height: 28px;
-    padding: 4px;
-
-    windowcontrols {
-      button,
-      menubutton {
-        min-height: 26px;
-        min-width: 26px;
-        margin: 0;
-        padding: 0;
-      }
-
-      menubutton button {
-        min-height: 20px;
-        min-width: 20px;
-        margin: 0;
-        padding: 4px;
-      }
-    }
-  }
-
-  .solid-csd & {
-    &:backdrop, & {
-      &:dir(rtl), &:dir(ltr) { // specificity bump
-        margin-left: -1px;
-        margin-right: -1px;
-        margin-top: -1px;
-        border-radius: 0;
-        box-shadow: none;
-      }
-    }
-  }
-}
-
-headerbar {
-  > windowhandle > box {
-    &,
-    > box.start,
-    > box.end {
-      border-spacing: 6px;
-    }
-  }
-
-  // add vertical margins to common widget on the headerbar to avoid them spanning the whole height
-  entry,
-  spinbutton,
-  separator:not(.sidebar),
-  button,
-  menubutton {
-    margin-top: 6px;
-    margin-bottom: 6px;
-  }
-
-  // Reset margins for buttons inside menubutton
-  menubutton > button {
-    margin-top: 0px;
-    margin-bottom: 0px;
-  }
-
-  switch {
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
-
-  &.titlebar headerbar:not(.titlebar) {
-    // Drop the background of non-titlebar nested headerbars. This is needed to
-    // work around headerbar sliding animation issues without refactoring
-    // Adwaita's support of titlebars and headerbars as it may break
-    // applications.
-    // See https://gitlab.gnome.org/GNOME/gtk/issues/1264 for more information.
-    background: none;
-    box-shadow: none;
-  }
-}
-
-
-.titlebar:not(headerbar) {
-  window.csd > & {
-    // in csd we assume every titlebar is a headerbar so reset anything, this is needed for split toolbars cases
-    padding: 0;
-    background-color: transparent;
-    background-image: none;
-    border-style: none;
-    border-color: transparent;
-    box-shadow: none;
-  }
-
-  separator { background-color: $borders_color; }  // FIXME: use darker border?
-
-  @extend %titlebar;
-}
-
-// Development versions of apps to use a differently styled headerbar
-
-window.devel {
-  headerbar.titlebar {
-    $c: darken($bg_color, 10%);
-    $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
-               linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.8)),
-               linear-gradient(to top, darken($c, 3%), $c 3px, lighten($c, 6%));
-    @if $variant == 'dark' {
-      $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
-                 linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.9)),
-                 linear-gradient(to top, lighten($c, 3%) 3px, lighten($c, 5%));
-    }
-
-    background: $bg_color $gradient;
-
-    &:backdrop {
-      background: $bg_color cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px no-repeat,
-                  image($bg_color); /* background-color would flash */
-    }
-  }
-}
-
-/************
- * Pathbars *
- ************/
-
-pathbar > button {
-  &.text-button, &.image-button, & {
-    padding-left: 4px;
-    padding-right: 4px;
-  }
-
-  &.text-button.image-button label {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  &.text-button.image-button, & {
-    label:last-child { padding-right: 8px; }
-    label:first-child { padding-left: 8px; }
-  }
-
-  image {
-    padding-left: 4px;
-    padding-right: 4px;
-  }
-
-  &.slider-button {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-
-/**************
- * Tree Views *
- **************/
-
-$_treeview_borders_color: if($variant=='light',mix($borders_color, $base_color,80%),mix($fg_color, $base_color, 20%));
-$_treeview_backdrop_borders_color: if($variant=='light',mix($backdrop_borders_color, $base_color, 80%),mix($backdrop_fg_color, $base_color, 20%));
-columnview.view,
-treeview.view {
-  border-left-color:  $_treeview_borders_color; // this is actually the tree lines color,
-  border-top-color: $_treeview_borders_color;                         // while this is the grid lines color, better then nothing
-
-  @include focus-ring();
-
-  > rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props
-
-  &:selected {
-    &:focus, & {
-      border-radius: 0;
-      outline-color: $alt_focus_border_color;
-
-      @extend %selected_items;
-    }
-  }
-
-  &:disabled {
-    color: $insensitive_fg_color;
-
-    &:selected {
-      color: mix($selected_fg_color, $selected_bg_color, 40%);
-      &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
-    }
-  }
-
-  &.separator {
-    min-height: 2px;
-    color: $_treeview_borders_color;
-  }
-
-  &:backdrop {
-    border-left-color: $_treeview_backdrop_borders_color;
-    border-top: $_treeview_backdrop_borders_color;
-  }
-
-  &:drop(active) {
-    box-shadow: none;
-  }
-
-  > dndtarget:drop(active) {
-    border-style: solid none;
-    border-width: 1px;
-    border-color: $selected_borders_color;
-
-    &.after { border-top-style: none; }
-
-    &.before { border-bottom-style: none; }
-  }
-
-  &.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: mix($text_color, $base_color, 70%);
-
-    &:hover { color: $text_color; }
-
-    &:selected {
-      color: mix($selected_fg_color, $selected_bg_color, 70%);
-
-      &:hover { color: $selected_fg_color; }
-    }
-
-    &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
-  }
-
-  &.progressbar { // progress bar in treeviews
-    @if $variant == light { color: $base_color; }
-
-    background-color: $selected_bg_color;
-    background-image: image($selected_bg_color);
-    box-shadow: none;
-
-    &:selected {
-      &:focus, & {
-
-        @if $variant == 'light' {
-          color: $selected_bg_color;
-
-        }
-
-        @else { box-shadow: inset 0 1px transparentize(white, 0.95); }
-
-        background-image: image($base_color);
-
-        &:backdrop {
-          @if $variant == 'light' {
-            color: $selected_bg_color;
-          }
-          background-color: $backdrop_base_color;
-        }
-      }
-    }
-  }
-
-  &.trough { // progress bar trough in treeviews
-    background-color: transparentize($fg_color,0.9);
-
-    &:selected {
-      &:focus, & {
-        background-color: if($variant == 'light',
-                             transparentize($selected_fg_color, 0.7),
-                             darken($selected_bg_color, 10%));
-
-      }
-    }
-  }
-
-  > header {
-    > button {
-      $_column_header_color: mix($fg_color, $base_color, 50%);
-
-      @extend %column_header_button;
-
-      color: $_column_header_color;
-      background-color: $base_color;
-      font-weight: bold;
-      text-shadow: none;
-      box-shadow: none;
-
-      &:hover {
-        @extend %column_header_button;
-
-        color: mix($_column_header_color, $fg_color, 50%);
-        box-shadow: none;
-        transition: none; //I shouldn't need this
-      }
-
-      &:active {
-        @extend %column_header_button;
-
-        color: $fg_color;
-        transition: none; //I shouldn't need this
-      }
-    }
-  }
-
-  button.dnd,
-  header.button.dnd { // for treeview-like derive widgets
-    &:active, &:selected, &:hover, & {
-      padding: 0 6px;
-      color: $base_color;
-      background-image: none;
-      background-color: $selected_bg_color;
-      border-style: none;
-      border-radius: 0;
-      box-shadow: inset 0 0 0 1px $base_color;
-      text-shadow: none;
-      transition: none;
-    }
-  }
-
-  acceleditor > label { background-color: $selected_bg_color; } // see tests/testaccel to test
-}
-
-%column_header_button {
-  padding: 0 6px;
-  background-image: none;
-  border-style: none none solid solid;
-  border-color: $_treeview_borders_color;
-  border-radius: 0;
-  text-shadow: none;
-
-  &:disabled {
-    border-color: $bg_color;
-    background-image: none;
-  }
-
-  &:last-child { &:backdrop, & { border-right-style: none; }}
-}
-
-/***************
- * Popovers   *
- ***************/
-
-popover.background {
-  background-color: transparent;
-  font: initial; // Decouple the font of popovers from their entry/textview
-
-  > arrow,
-  > contents {
-    $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
-
-    background-color: $menu_color;
-    background-clip: padding-box;
-    border: 1px solid $_popover_border;
-    box-shadow: 0 1px 2px transparentize(black, 0.7);
-  }
-
-  &:backdrop {
-    background-color: transparent;
-  }
-
-  > contents {
-    padding: 8px;
-    border-radius: $popover_radius;
-
-    > list,
-    > .view,
-    > toolbar {
-      border-style: none;
-      background-color: transparent;
-    }
-
-    separator {
-      background-color: mix($bg_color, $borders_color, 30%);
-      margin: 3px;
-    }
-
-    list separator { margin: 0; }
-  }
-
-  .osd &,
-  &.touch-selection,
-  &.magnifier {
-    background-color: transparent;
-
-    > arrow,
-    > contents {
-      @extend %osd;
-
-      border: 1px solid transparentize(white, 0.9);
-      box-shadow: none;
-    }
-  }
-
-  &.touch-selection,
-  &.magnifier {
-    button { @extend %osd_button; }
-  }
-}
-
-magnifier {
-  background-color: $base_color;
-}
-
-/**********************
- * Popover Base Menus *
- **********************/
-
-$_menu-padding: 12px; //inner menuitem padding
-//global $menu-margin for outside menuitems
-
-popover.menu {
-  padding: 0;
-
-  box.inline-buttons {
-    padding: 0 $_menu-padding;
-
-    button.image-button.model {
-      @include button(undecorated);
-
-      min-height: 30px;
-      min-width: 30px;
-      padding: 0;
-      border: none;
-      outline: none;
-      transition: none;
-
-      &:selected { background-image: linear-gradient(to bottom,
-                      $menubar_menuitem_hover_gradient_a,
-                      $menubar_menuitem_hover_gradient_b 50%,
-                      $menubar_menuitem_hover_gradient_c 50%,
-                      $menubar_menuitem_hover_gradient_d ); }
-    }
-  }
-
-  box.circular-buttons {
-    padding: $_menu-padding $_menu-padding 6px;
-
-    button.circular.image-button.model {
-      @extend %list_button;
-
-      padding: 11px;
-      &:focus {
-         background-color: $menu_selected_color;
-         border-color: $menu_selected_color;
-      }
-    }
-  }
-
-  & > arrow,
-  &.background > contents {
-    background-color: $menu_color;
-    padding: $menu-margin;
-  }
-
-  &.background separator {
-    margin: 6px 0;
-  }
-
-  accelerator {
-    color: gtkalpha(currentColor,0.55);
-
-    &:dir(ltr) { margin-left: $_menu-padding; }
-    &:dir(rtl) { margin-right: $_menu-padding; }
-  }
-
-  check,
-  radio {
-    @include check('menu', 'transparent', $text_color);
-
-    &:hover { @include check('menu-active', 'transparent', $text_color); }
-    &:active { @include check('menu-active', 'transparent', $text_color); }
-  }
-
-  //only menu radios have a border
-  radio { border-color: $borders_color;
-    &:active { border-color: transparentize($borders_color,0.5); }
-  }
-
-  arrow.left,
-  radio.left,
-  check.left {
-    margin-left: -2px;
-    margin-right: 6px;
-  }
-
-  arrow.right,
-  radio.right,
-  check.right {
-    margin-left: 6px;
-    margin-right: -2px;
-  }
-
-  modelbutton {
-    min-height: 30px;
-    min-width: 40px;
-    padding: 0 $_menu-padding;
-    border-radius: $menu-margin;
-
-    &:selected {
-      color: $selected_fg_color;
-      background-image: linear-gradient(to bottom,
-                      $menubar_menuitem_hover_gradient_a,
-                      $menubar_menuitem_hover_gradient_b 50%,
-                      $menubar_menuitem_hover_gradient_c 50%,
-                      $menubar_menuitem_hover_gradient_d );
-           box-shadow:  inset 0px 1px $menubar_menuitem_hover_border_color, inset 0px -1px $menubar_menuitem_hover_border_color;
-    }
-    &:selected:active {
-      //@extend %selected_items;
-      //color: $selected_fg_color;
-      background-color: darken($bg_color,14%); // matching buttons
-    }
-  }
-
-  label.title {
-    font-weight: bold;
-    padding: 4px ($_menu-padding + 20px); //this will fall apart with font sizing
-  }
-}
-
-// initial styling for popover menu and bar
-menubar {
-  padding: 0px;
-  box-shadow: inset 0 -1px transparentize(black, 0.9);
-
-  > item {
-    min-height: 16px;
-    padding: 4px 8px;
-
-    &:selected { //Seems like it :hover even with keyboard focus
-      background-image: linear-gradient(to bottom,
-                      $menubar_menuitem_hover_gradient_a,
-                      $menubar_menuitem_hover_gradient_b 50%,
-                      $menubar_menuitem_hover_gradient_c 50%,
-                      $menubar_menuitem_hover_gradient_d );
-               box-shadow:  inset 1px 0px $menubar_menuitem_hover_border_color, inset -1px 0px $menubar_menuitem_hover_border_color;
-       > label {color: white;}
-    }
-
-    &:disabled {
-      color: $insensitive_fg_color;
-      box-shadow: none;
-    }
-  }
-
-  & > item popover.menu.background > contents {
-    padding: $menu-margin;
-  }
-  //nested submenus
-  & > item popover.menu popover.menu {
-    padding: 0 0 4px 0;
-  }
-  & > item popover.menu.background popover.menu.background > contents {
-    margin: 0;
-    border-radius: $popover_radius; //including top
-  }
-}
-
-
-/*************
- * Notebooks *
- *************/
-$notebook_base_color: lighten($bg_color, 3%);
-
-notebook {
-        border-color:#b0b9c9;
-  > header {
-    padding: 1px;
-    border-color: $borders_color;
-    box-shadow: 1px 1px $bg_color,  1px -1px $bg_color, -1px -1px $bg_color; 
-    border-width: 1px;
-    background-color: transparent; // Yaru change: remove notebook background
-
-    > tabs { margin: -1px; }
-
-    &.top {
-      border-bottom-style: solid;
-      > tabs {
-        margin-bottom: -2px;
-        margin-top: 4px;
-        > tab {
-           background-image: linear-gradient(to bottom, gtkshade($bg_color, 1.02), gtkshade($bg_color, 0.8));
-           box-shadow: 0px -1px $borders_color, 1px 0px $borders_color, -1px 0px  $borders_color, inset 0px -1px $borders_color;
-           border-top-left-radius: 3px;
-           border-top-right-radius: 3px;
-          &:hover {  } // Yaru change: 4px underlines are too much
-
-
-          &:checked {  background-image: linear-gradient(to bottom,
-                      $core_color_a 3px,
-                      desaturate(darken($core_color_a, 30%), 15%) 5px,
-                      $notebook_base_color 5px,
-                      $notebook_base_color); 
-                      box-shadow: 0px -1px desaturate(darken($core_color_a, 30%), 15%), 1px 0px $borders_color, -1px 0px  $borders_color; } // Yaru change: 4px underlines are too much
-        }
-      }
-    }
-
-    &.bottom {
-      border-top-style: solid;
-      > tabs {
-        margin-top: -3px;
-        > tab {
-           background-image: linear-gradient(to top, gtkshade($bg_color, 1.02), gtkshade($bg_color, 0.8));
-           box-shadow: 0px 1px $borders_color , 1px 0px $borders_color, -1px 0px  $borders_color, inset 0px 1px $borders_color; 
-           border-bottom-left-radius: 3px;
-           border-bottom-right-radius: 3px;
-          &:hover {  } // Yaru change: 4px underlines are too much
-
-
-          &:checked {  background-image: linear-gradient(to top,
-                      $core_color_a 3px,
-                      desaturate(darken($core_color_a, 30%), 15%) 5px,
-                      $notebook_base_color 5px,
-                      $notebook_base_color); 
-                       box-shadow: 0px 1px desaturate(darken($core_color_a, 30%), 15%) , 1px 0px $borders_color, -1px 0px  $borders_color; } // Yaru change: 4px underlines are too much
-        }
-      }
-    }
-
-    &.left {
-      border-right-style: solid;
-      > tabs {
-        margin-right: -3px;
-        > tab {
-            background-image: linear-gradient(to right, gtkshade($bg_color, 1.02), gtkshade($bg_color, 0.8));
-            box-shadow: 0px 1px $borders_color , 0px -1px $borders_color,  -1px 0px $borders_color, inset -1px 0px $borders_color; 
-             border-top-left-radius: 3px;
-           border-bottom-left-radius: 3px;
-
-          &:hover {  } // Yaru change: 4px underlines are too much
-
-
-          &:checked {  background-image: linear-gradient(to right,
-                      $core_color_a 3px,
-                      desaturate(darken($core_color_a, 30%), 15%) 5px,
-                      $notebook_base_color 5px,
-                      $notebook_base_color);
-                      box-shadow: -1px 0px desaturate(darken($core_color_a, 30%), 15%) , 0px -1px $borders_color,0px 1px $borders_color;   } // Yaru change: 4px underlines are too much
-        }
-      }
-    }
-
-    &.right {
-      border-left-style: solid;
-      > tabs {
-        margin-left: -3px;
-        > tab {
-           background-image: linear-gradient(to left, gtkshade($bg_color, 1.02), gtkshade($bg_color, 0.8));
-           box-shadow: 0px 1px $borders_color , 0px -1px $borders_color,  1px 0px $borders_color, inset 1px 0px $borders_color; 
-             border-top-right-radius: 3px;
-           border-bottom-right-radius: 3px;
-          &:hover {  } // Yaru change: 4px underlines are too much
-
-
-          &:checked { background-image: linear-gradient(to left,
-                      $core_color_a 3px,
-                      desaturate(darken($core_color_a, 30%), 15%) 5px,
-                      $notebook_base_color 5px,
-                      $notebook_base_color); 
-                     box-shadow:1px 0px desaturate(darken($core_color_a, 30%), 15%), 0px -1px $borders_color,0px 1px $borders_color;} // Yaru change: 4px underlines are too much
-        }
-      }
-    }
-
-    &.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):not(:backdrop) {
-        background-clip: padding-box;
-        background-image: none;
-        background-color: transparentize(white, 0.7);
-        border-color: transparent;
-        box-shadow: none;
-      }
-
-      &:disabled { @include button(undecorated); }
-    }
-
-    > tabs > tab {
-      transition: $focus_transition;
-      min-height: 30px;
-      min-width: 30px;
-      padding: 3px 12px;
-
-      color: $fg_color;
-      font-weight: normal;
-
-      border-width: 1px;         // for reorderable tabs
-      border-color: transparent; //
-
-      &:hover {
-        color: $fg_color;
-        background-color: darken($dark_fill,4%);
-
-        &.reorderable-page {
-          border-color: transparentize($borders_color, 0.7);
-          background-color: transparentize($bg_color, 0.8);
-        }
-      }
-
-      &:not(:checked) {
-        outline-color: transparent;
-      }
-
-      &:checked {
-        color: $fg_color;
-        &.reorderable-page {
-          border-color: transparentize($borders_color, 0.5);
-          background-color: transparentize($bg_color, 0.5);
-
-          &:hover { background-color: transparentize($bg_color, 0.3); }
-        }
-      }
-
-      // colors the button like the label, overridden otherwise
-      button.flat {
-        color: gtkalpha(currentColor, 0.3);
-        &:hover { color: $fg_color; }
-
-        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: 0px;
-        padding-right: 0px;
-
-        &:not(:only-child) {
-          margin-left: 1px;
-          margin-right: 1px;
-
-          &:first-child { margin-left: 0px; }
-          &:last-child { margin-right: -1px; }
-        }
-
-        > tab {
-          margin-left: 0px;
-          margin-right: 0px;
-
-          &.reorderable-page { border-style: none solid; }
-        }
-      }
-    }
-
-    &.left,
-    &.right {
-      > tabs {
-        padding-top: 0px;
-        padding-bottom: 0px;
-
-        &:not(:only-child) {
-          margin-top: 0px;
-          margin-bottom: 0px;
-
-          &:first-child { margin-top: 0px; }
-          &:last-child { margin-bottom: -1px; }
-        }
-
-        > tab {
-          margin-top: 0px;
-          margin-bottom: 0px;
-
-          &.reorderable-page { border-style: solid none; }
-        }
-      }
-    }
-
-    &.top > tabs > tab { padding-bottom: 1px; }
-    &.bottom > tabs > tab { padding-top: 1px; }
-  }
-
-  > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
-    background-color: $notebook_base_color;
-
-    &:backdrop { background-color: $notebook_base_color; }
-  }
-}
-
-
-/**************
- * Scrollbars *
- **************/
-scrollbar {
-  $_slider_min_length: 40px;
-
-  background-color: $scrollbar_bg_color;
-  transition: 300ms $ease-out-quad;
-
-  // scrollbar border
-  &.top { border-bottom: 1px solid $borders_color; }
-  &.bottom { border-top: 1px solid $borders_color; }
-  &.left { border-right: 1px solid $borders_color; }
-  &.right { border-left: 1px solid $borders_color; }
-
-  > range > trough > slider {
-    min-width: 6px;
-    min-height: 6px;
-    margin: -1px;
-    border: 4px solid transparent;
-    border-radius: 8px;
-    background-clip: padding-box;
-    background-color: $scrollbar_slider_color;
-
-    &:hover { background-color: $scrollbar_slider_hover_color; }
-
-    &:hover:active { background-color: $scrollbar_slider_active_color; }
-
-    &:disabled { background-color: transparent; }
-  }
-
-  > range.fine-tune {
-    > trough > slider {
-      min-width: 4px;
-      min-height: 4px;
-    }
-
-    &.horizontal > trough > slider { border-width: 5px 4px; }
-    &.vertical > trough > slider { border-width: 4px 5px; }
-  }
-
-  &.overlay-indicator {
-    &:not(.dragging):not(.hovering) {
-      border-color: transparent;
-      opacity: 0.4;
-      background-color: transparent;
-
-      > range > trough > slider {
-        margin: 0;
-        min-width: 3px;
-        min-height: 3px;
-        background-color: $fg_color;
-        border: 1px solid if($variant == 'light', white, black);
-      }
-
-      &.horizontal {
-        > range > trough > slider {
-          margin: 0 2px;
-          min-width: $_slider_min_length;
-        }
-      }
-
-      &.vertical {
-        > range > trough > slider {
-          margin: 2px 0;
-          min-height: $_slider_min_length;
-        }
-      }
-    }
-
-    &.dragging,
-    &.hovering { opacity: 0.8; }
-  }
-
-  &.horizontal > range > trough > slider { min-width: $_slider_min_length; }
-  &.vertical > range > trough > slider { min-height: $_slider_min_length; }
-}
-
-treeview ~ scrollbar.vertical {
-  border-top: 1px solid $borders_color;
-  margin-top: -1px;
-}
-
-/**********
- * Switch *
- **********/
-switch {
-  font-weight: bold;
-  font-size: smaller;
-
-  // similar to the .scale
-  border: 1px solid $borders_color;
-  border-radius: 14px;
-  color: $fg_color;
-  background-color: $dark_fill;
-  transition: $focus_transition;
-
-  @include focus-ring($offset: 0, $outer: true);
-
-  headerbar & { background-color: darken($dark_fill,8%); } //3504
-
-  &:checked {
-    color: $selected_fg_color;
-    border-color: $switch_borders_color;
-    background-color: $switch_bg_color;
-  }
-
-  &:disabled {
-    color: $insensitive_fg_color;
-    border-color: $borders_color;
-    background-color: $insensitive_bg_color;
-    text-shadow: none;
-  }
-
-  > slider {
-    @include button(normal);
-
-    margin: -1px;
-    min-width: 24px;
-    min-height: 24px;
-    border: 1px solid;
-    border-color: $borders_color;
-    border-radius: 50%;
-    transition: $button_transition;
-  }
-
-  > image { color: transparent; } /* only show i / o for the accessible theme */
-
-  &:hover > slider {
-    @include button(hover);
-  }
-
-  &:checked > slider { border: 1px solid $switch_borders_color; }
-
-  &:disabled > slider { @include button(insensitive); }
-
-
-  row:selected & {
-    outline-color: $alt_focus_border_color;
-
-    @if $variant == 'light' {
-      box-shadow: none;
-      border-color: $switch_borders_color;
-
-      > slider { &:checked, & { border-color: $switch_borders_color; } }
-    }
-  }
-}
-
-
-/*************************
- * Check and Radio items *
- *************************/
-// draw regular check and radio items using our PNG assets
-// all assets are rendered from assets.svg. never add pngs directly
-
-
-//selection-mode
-@each $check_state, $check_icon, $check_color, $check_background in
-  ('', 'none', 'transparent', $checkradio_bg_color),
-  (':hover', 'none', 'transparent', $checkradio_bg_color),
-  (':active', 'none', 'transparent', $checkradio_bg_color),
-  (':backdrop', 'none', 'transparent', '#{desaturate($checkradio_bg_color, 100%)}'),
-  (':checked', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
-  (':checked:hover', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
-  (':checked:active', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
-  (':backdrop:checked', '-gtk-icontheme(\'object-select-symbolic\')', '#{transparentize($osd_fg_color, 0.2)}', '#{desaturate($checkradio_bg_color, 100%)}'), {
-
-  .view.content-view.check#{$check_state}:not(list),
-  .content-view .tile check#{$check_state}:not(list) {
-    margin: 4px;
-    min-width: 32px;
-    min-height: 32px;
-    color: #{$check_color};
-    background-color: #{$check_background};
-    border-radius: 5px;
-    background-image: none;
-    transition: 200ms;
-    box-shadow: none;
-    border-width: 0;
-    -gtk-icon-source: #{$check_icon};
-    -gtk-icon-shadow: none;
-  }
-}
-
-checkbutton {
-  border-spacing: 4px;
-  border-radius: $button_radius;
-  transition: $focus_transition;
-
-  @include focus-ring();
-
-  &.text-button {
-    // this is for a nice focus on check and radios text
-    padding: 4px;
-  }
-}
-
-check,
-radio {
-  min-height: 14px;
-  min-width: 14px;
-  border: 1px solid;
-  -gtk-icon-source: none;
-
-  & {
-    // for unchecked
-    $_c: if($variant=='light', white, $bg_color);
-
-    @each $state, $t in ("", "normal"),
-                        (":hover", "hover"),
-                        (":active", "active"),
-                        (":disabled", "insensitive") {
-      &#{$state} {
-        @include check($t, $_c);
-      }
-    }
-  }
-
-  & {
-    // for checked
-    @each $t in (':checked'), (':indeterminate') {
-      &#{$t} {
-        @each $state, $t in ("", "normal"),
-                            (":hover", "hover"),
-                            (":active", "active"),
-                            (":disabled", "insensitive") {
-          &#{$state} {
-            @include check($t, $checkradio_bg_color, $checkradio_fg_color, $checked: true);
-          }
-        }
-      }
-    }
-  }
-
-  @if $variant == 'light' {
-    // the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background
-    // color, hence we need special casing.
-    row:selected & { border-color: $checkradio_borders_color; }
-  }
-
-  .osd & {
-    @include button(osd);
-
-    &:hover { @include button(osd); }
-    &:active { @include button(osd-active); }
-    &:disabled { @include button(osd-insensitive); }
-  }
-}
-
-%check,
-check {
-  border-radius: 3px;
-  -gtk-icon-size: 14px;
-
-  &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-symbolic.symbolic.png")),
-                                            -gtk-recolor(url("assets/[email protected]"))); }
-
-  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")),
-                                                  -gtk-recolor(url("assets/[email protected]"))); }
-}
-
-%radio,
-radio {
-  border-radius: 100%;
-  -gtk-icon-size: 14px;
-
-  &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/bullet-symbolic.symbolic.png")),
-                                            -gtk-recolor(url("assets/[email protected]"))); }
-
-  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")),
-                                                  -gtk-recolor(url("assets/[email protected]"))); }
-}
-
-treeview.view check,
-treeview.view radio {
-  &:selected {
-    &:focus, & {
-      color: $checkradio_fg_color;
-
-      @if $variant == 'light' { border-color: $selected_borders_color; }
-    }
-  }
-}
-
-treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a workaround
-
-
-/************
- * GtkScale *
- ************/
-%scale_trough {
-  border: 1px solid $borders_color;
-  border-radius: 3px;
-  background-color: gtkshade($core_color_b, 0.90);
-
-  headerbar & { background-color: darken($dark_fill,8%); } //3504
-
-  &:disabled {
-   background-color: $insensitive_bg_color;
-   border-color: $insensitive_borders_color;
-  }
-
-  // ...on selected list rows
-  row:selected & {
-    &:disabled, & {
-      outline-color: $alt_focus_border_color;
-      border-color: $selected_borders_color;
-    }
-  }
-
-  // OSD
-  .osd & {
-    border-color: $osd_borders_color;
-    background-color: transparentize($osd_borders_color, 0.2);
-
-    &:disabled { background-color: $osd_insensitive_bg_color; }
-  }
-}
-
-%scale_highlight {
-  border: 1px solid $borders_color; // Yaru change: use our own palette
-  border-radius: 3px;
-  background-color: gtkshade($core_color_a, 0.90);
-
-  &:disabled {
-    background-color: transparent;
-    border-color: transparent;
-  }
-
-  // ...on selected list rows
-  row:selected & { &:disabled, & { border-color: $selected_borders_color; }}
-
-  // OSD
-  .osd & {
-    border-color: $osd_borders_color;
-
-    &:disabled { border-color: transparent; }
-  }
-}
-
-scale {
-  // sizing
-  $_marks_length: 6px;
-  $_marks_distance: 6px;
-
-  min-height: 5px;
-  min-width: 5px;
-  padding: 4px;
-
-  @include focus-ring("> trough", $offset: 10px);
-
-  // those are inside the trough node, I need them to show their own border over the trough one, so negative margin
-  > trough {
-    transition: $focus_transition;
-
-    > fill,
-    > highlight { margin: -1px; }
-
-  // the slider is inside the trough, so to have make it bigger there's a negative margin
-
-    > slider {
-      min-height: 12px;
-      min-width: 12px;
-      margin: -5px;
-      padding: 0px;
-      border-radius: 3px;
-    }
-  }
-  
-  
-   &.horizontal > trough > slider { min-width: 25px}
-   &.vertical > trough > slider { min-height: 25px}
-
-  // click-and-hold the slider to activate
-  &.fine-tune {
-    &.horizontal {
-      padding-top: 9px;
-      padding-bottom: 9px;
-      min-height: 16px;
-    }
-
-    &.vertical {
-      padding-left: 9px;
-      padding-right: 9px;
-      min-width: 16px;
-    }
-
-    // to make the trough grow in fine-tune mode
-    > trough > slider { margin: -6px; }
-
-    > trough > fill,
-    > trough > highlight,
-    > trough {
-      border-radius: 5px;
-    }
-  }
-
-  // the backing bit
-  > trough {
-    @extend %scale_trough;
-  }
-
-  // the colored part of the backing bit
-  > trough > 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
-  > trough > fill {
-    @extend %scale_trough;
-
-
-    &:disabled {
-      border-color: transparent;
-      background-color: transparent;
-    }
-
-    // OSD
-    .osd & {
-      background-color: mix($osd_fg_color, $osd_borders_color, 25%);
-
-      &:disabled {
-       border-color: transparent;
-       background-color: transparent;
-      }
-    }
-  }
-
-   &.horizontal >  slider {
-    min-width: 25px;
-  }
-
-   &.vertical > slider {
-    min-height: 25px;
-  }
-
-  > trough > slider {
-  
-    @include button(normal);
-
-    border-width: 1px;
-    border-style: solid;
-    border-radius: 3px;
-    transition: $button_transition;
-    transition-property: background, border, box-shadow;
-
-    &:hover { @include button(hover); }
-
-    &:active { border-color: $progress_bg_color; } // Yaru change: use our own palette
-
-    &:disabled { @include button(insensitive); }
-
-    // ...on selected list rows
-    row:selected & { &:disabled, & { border-color: $selected_borders_color; } }
-
-    // OSD
-    .osd & {
-      @include button(osd);
-      border-color: darken($osd_borders_color, 3%);
-      background-color: opacify($osd_bg_color, 1); // solid background needed here
-
-      &:hover {
-        @include button(osd-hover);
-        background-color: opacify($osd_bg_color, 1); // solid background needed here
-      }
-
-      &:active {
-        @include button(osd-active);
-        background-color: opacify($osd_bg_color, 1); // solid background needed here
-      }
-
-      &:disabled {
-        @include button(osd-insensitive);
-        background-color: opacify($osd_bg_color, 1); // solid background needed here
-      }
-    }
-  }
-
-  > value {
-    color: gtkalpha(currentColor, 0.55);
-    font-feature-settings: "tnum";
-  }
-
-  &.horizontal {
-    > marks {
-      color: gtkalpha(currentColor, 0.55);
-      &.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); }
-    }
-  }
-
-  &.vertical {
-    > marks {
-      color: gtkalpha(currentColor, 0.55);
-      &.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); }
-    }
-  }
-
-  // *WARNING* scale with marks madness following
-
-  // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for those...
-  $suffix: if($variant == 'light', '', '-dark');
-
-  @each $dir_class, $dir_infix in ('horizontal', 'horz'),
-                                  ('vertical', 'vert') {
-    @each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
-                                        ('scale-has-marks-below', 'marks-after:not(.marks-before)') {
-      @each $state, $state_infix in ('', ''),
-                                    (':hover', '-hover'),
-                                    (':active', '-active'),
-                                    (':disabled', '-insensitive') {
-        &.#{$dir_class}.#{$marks_class} {
-
-          > trough > slider {
-            &#{$state} {
-              // an asymmetric slider asset is used here, so the margins are uneven, the smaller
-              // margin is set on the point side.
-              margin: -10px;
-              $_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
-              border-style: none;
-              border-radius: 0;
-
-              background-color: transparent;
-              background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
-
-              $_scale_slider_bg_pos: bottom;
-
-              @if $dir_class == 'horizontal' {
-                min-height: 26px;
-                min-width: 22px;
-
-                @if $marks_infix == 'scale-has-marks-above' {
-                  margin-top: -14px;
-
-                  $_scale_slider_bg_pos: top;
-                }
-
-                @else { margin-bottom: -14px; }
-              }
-
-              @else {
-                min-height: 22px;
-                min-width: 26px;
-
-                @if $marks_infix == 'scale-has-marks-above' {
-                  margin-left: -14px;
-
-                  $_scale_slider_bg_pos: left bottom;
-                }
-
-                @else {
-                  margin-right: -14px;
-
-                  $_scale_slider_bg_pos: right bottom;
-                }
-              }
-
-              background-position: $_scale_slider_bg_pos;
-              background-repeat: no-repeat;
-              box-shadow: none;
-            }
-          }
-
-          &.fine-tune > trough > slider {
-            @if $dir_class == 'horizontal' {
-              // bigger negative margins to make the trough grow here as well
-              margin: -7px -10px;
-
-              @if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; }
-
-              @else { margin-bottom: -11px; }
-            }
-
-            @else {
-              margin: -10px -7px;
-
-              @if $marks_infix == 'scale-has-marks-above' { margin-left: -11px; }
-
-              @else { margin-right: -11px; }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.color {
-    min-height: 0;
-    min-width: 0;
-
-    > trough {
-      background-image: image($borders_color);
-      background-repeat: no-repeat;
-    }
-
-    &.horizontal {
-      padding: 0 0 15px 0;
-
-      > trough {
-        padding-bottom: 4px;
-        background-position: 0 -3px;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
-
-      > trough > slider {
-        &:dir(ltr), &:dir(rtl) { // specificity bump
-          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-            margin-bottom: -15px;
-            margin-top: 6px;
-          }
-        }
-      }
-    }
-
-    &.vertical {
-      &:dir(ltr) {
-        padding: 0 0 0 15px;
-
-        > trough {
-          padding-left: 4px;
-          background-position: 3px 0;
-          border-bottom-right-radius: 0;
-          border-top-right-radius: 0;
-        }
-
-        > trough > slider {
-          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-            margin-left: -15px;
-            margin-right: 6px;
-          }
-        }
-      }
-
-      &:dir(rtl) {
-        padding: 0 15px 0 0;
-
-        > trough {
-          padding-right: 4px;
-          background-position: -3px 0;
-          border-bottom-left-radius: 0;
-          border-top-left-radius: 0;
-        }
-
-        > trough > slider {
-          &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-            margin-right: -15px;
-            margin-left: 6px;
-          }
-        }
-      }
-    }
-
-    &.fine-tune {
-      &.horizontal {
-        &:dir(ltr), &:dir(rtl) { // specificity bump
-          padding: 0 0 12px 0;
-
-          > trough {
-            padding-bottom: 7px;
-            background-position: 0 -6px;
-          }
-
-          > trough > slider {
-            margin-bottom: -15px;
-            margin-top: 6px;
-          }
-        }
-      }
-
-      &.vertical {
-        &:dir(ltr) {
-          padding: 0 0 0 12px;
-
-          > trough {
-            padding-left: 7px;
-            background-position: 6px 0;
-          }
-
-          > trough > slider {
-            margin-left: -15px;
-            margin-right: 6px;
-          }
-        }
-
-        &:dir(rtl) {
-          padding: 0 12px 0 0;
-
-          > trough {
-            padding-right: 7px;
-            background-position: -6px 0;
-          }
-
-          > trough > slider {
-            margin-right: -15px;
-            margin-left: 6px;
-          }
-        }
-      }
-    }
-  }
-}
-
-
-/*****************
- * Progress bars *
- *****************/
-progressbar {
-  // sizing
-  &.horizontal {
-    > trough {
-      min-width: 150px;
-      &, > progress { min-height: 16px; }
-    }
-  }
-
-  &.vertical {
-    > trough {
-      min-height: 80px;
-      &, > progress { min-width: 16px; }
-    }
-  }
-
-  &.horizontal > trough > progress { margin: 0 -1px; 
-                                     background-image: 
-                          repeating-linear-gradient(135deg,
-                          gtkalpha($progressbar_pattern_color, 0.0),
-                          gtkalpha($progressbar_pattern_color, 0.0) 12px,
-                          gtkalpha($progressbar_pattern_color, 0.5) 12px,
-                          gtkalpha($progressbar_pattern_color, 0.5) 24px),
-                          linear-gradient(to bottom,
-                          gtkalpha($progressbar_gradient_a, 0.7),
-                          gtkalpha($progressbar_gradient_b, 0.7) 50%,
-                          gtkalpha($progressbar_gradient_c, 0.7) 50%,
-                          gtkalpha($progressbar_gradient_d, 0.7));} // the progress node is positioned after the trough border
-  &.vertical > trough > progress { margin: -1px 0;
-                        background-image: 
-                          repeating-linear-gradient(45deg,
-                          gtkalpha($progressbar_pattern_color, 0.0),
-                          gtkalpha($progressbar_pattern_color, 0.0) 12px,
-                          gtkalpha($progressbar_pattern_color, 0.5) 12px,
-                          gtkalpha($progressbar_pattern_color, 0.5) 24px),
-                          linear-gradient(to right,
-                          gtkalpha($progressbar_gradient_a, 0.7),
-                          gtkalpha($progressbar_gradient_b, 0.7) 50%,
-                          gtkalpha($progressbar_gradient_c, 0.7) 50%,
-                          gtkalpha($progressbar_gradient_d, 0.7)); }   // this moves it over it.
-
-
-  // FIXME: insensitive state missing and some other state should be set probably
-  font-size: smaller;
-  color: transparentize($fg_color, 0.6);
-  font-feature-settings: "tnum";
-
-  > trough { @extend %scale_trough; }
-
-  > trough > progress {
-    @extend %scale_highlight; /* share most of scales' */
-    /* override insensitive that is specific to progress */
-    &:disabled {
-      background-color: $insensitive_fg_color;
-      border-color: $insensitive_fg_color;
-    }
-
-    border-radius: 1.5px;
-    $_progress-radius: 5px;
-    &.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 { // progressbar.osd used for epiphany page loading progress
-    min-width: 3px;
-    min-height: 3px;
-    background-color: transparent;
-
-    > trough {
-      border-style: none;
-      border-radius: 0;
-      background-color: transparent;
-      box-shadow: none;
-
-      > progress {
-        border-style: none;
-        border-radius: 0;
-      }
-    }
-  }
-
-  > trough.empty > progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
-}
-
-/*************
- * Level Bar *
- *************/
-
-$_levelbar_size: 9px;
-$_levelbar_border_radius: 5px;
-
-levelbar {
-  &.horizontal {
-    trough > block {
-      min-height: $_levelbar_size;
-      border-radius: $_levelbar_border_radius;
-
-      &:dir(rtl) {
-        border-radius: 0 $_levelbar_border_radius $_levelbar_border_radius 0;
-      }
-
-      &:dir(ltr) {
-        border-radius: $_levelbar_border_radius 0 0 $_levelbar_border_radius;
-      }
-
-      &.empty,&.full {
-        border-radius: $_levelbar_border_radius;
-      }
-    }
-
-    // segmented level bar
-    &.discrete {
-      trough > block {
-        min-height: 2px;
-        margin: 1px;
-        min-width: 24px;
-        border-radius:0;
-        &:first-child {border-radius: 2px 0 0 2px;}
-        &:last-child {
-          border-radius: 0 2px 2px 0;
-        }
-      }
-    }
-  }
-
-  &.vertical {
-    trough > block {
-      min-width: $_levelbar_size;
-      border-radius: $_levelbar_border_radius;
-    }
-
-    &.discrete > trough > block {
-      min-width: $_levelbar_size - 7px;
-      margin: 1px 0;
-      min-height: 32px;
-    }
-  }
-
-  > trough {
-    padding: 0;
-  }
-
-  // level bar colours
-  > trough > block {
-    border: 1px solid;
-
-    &.low {
-      border-color: $warning_color;
-      background-color: $warning_color;
-    }
-
-    &.high,
-    &:not(.empty) {
-      border-color: $progress_bg_color; // Yaru change: use our own palette
-      background-color: $progress_bg_color; // Yaru change: use our own palette
-    }
-
-    &.full {
-      border-color: $success_color;
-      background-color: $success_color;
-    }
-
-    &.empty {
-      background-color: $dark_fill; // Yaru change: use our own palette
-      border-color: $dark_fill; // Yaru change: use our own palette
-    }
-  }
-}
-
-
-/****************
- * Print dialog *
-*****************/
-window.dialog.print {
-  drawing {
-    color: $fg_color;
-    background: none;
-    border: none;
-    padding: 0;
-
-    paper {
-      background: white;
-      color: #2e3436;
-      border: 1px solid $borders_color;
-    }
-
-  }
-
-  .dialog-action-box { margin: 12px; }
-}
-
-
-/**********
- * Frames *
- **********/
-frame,
-.frame {
-  border: 1px solid $borders_color;
-}
-
-frame {
-  border-radius: $window_radius;
-
-  > label {
-    margin: 4px;
-  }
-}
-
-actionbar > revealer > box {
-  padding: 6px;
-  border-spacing: 6px;
-  border-top: 1px solid $borders_color;
-}
-
-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);
-    }
-  }
-
-  > junction { // the small square between two scrollbars
-    // Only color the top-left (or top right in RTL) pixel, to visually connect
-    // the borders of the two scrollbars.
-
-    background: $borders_color,
-                linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px),
-                linear-gradient(to right, transparent 1px, $scrollbar_bg_color 1px);
-
-    &:dir(rtl) {
-      background: $borders_color,
-                  linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px),
-                  linear-gradient(to left, transparent 1px, $scrollbar_bg_color 1px);
-    }
-  }
-}
-
-//vbox and hbox separators
-separator {
-  background: lighten($borders_color, 5%);
-  min-width: 1px;
-  min-height: 1px;
-}
-
-
-/*********
- * Lists *
- *********/
-listview,
-list {
-  color: $text_color;
-  background-color: $base_color;
-  border-color: $borders_color;
-
-  &:backdrop {
-    color: $backdrop_text_color;
-    background-color: $backdrop_base_color;
-    border-color: $backdrop_borders_color;
-  }
-
-  > row { padding: 2px; }
-  > row.expander { padding: 0px; }
-  > row.expander .row-header { padding: 2px; }
-
-  &.horizontal row.separator,
-  &.separators.horizontal > row:not(.separator) {
-    border-left: 1px solid $_treeview_borders_color;
-  }
-  &:not(.horizontal) row.separator,
-  &.separators:not(.horizontal) > row:not(.separator) {
-    border-bottom: 1px solid $_treeview_borders_color;
-  }
-}
-
-row {
-  @include focus-ring();
-
-  &.activatable {
-    &.has-open-popup, // this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
-
-    &:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95)); }
-
-    &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
-
-    &:selected {
-      &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
-
-      &.has-open-popup,
-      &:hover { background-color: mix($fg_color, $selected_bg_color, 10%); }
-    }
-  }
-
-  &:selected {
-    outline-color: $alt_focus_border_color;
-
-    @extend %selected_items;
-  }
-}
-
-columnview {
-  // 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 {
-    border-left-color: $_treeview_borders_color;
-  }
-
-  // shrink vertically for .data-table
-  &.data-table > listview > row > cell {
-    padding-top: 2px;
-    padding-bottom: 2px;
-  }
-}
-
-treeexpander {
-  border-spacing: 4px;
-}
-
-/********************************************************
- * Data Tables                                          *
- * treeview like tables with individual focusable cells *
- * https://gitlab.gnome.org/GNOME/gtk/-/issues/2929     *
- ********************************************************/
-
-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 $selected_bg_color;
-}
-
-columnview row:not(:selected) cell editablelabel.editing text selection {
-  color: $selected_fg_color;
-  background-color: $selected_bg_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: 8px 12px;
-    min-height: 32px; /* should be tall even when only containing a label */
-
-    & > box {
-      border-spacing: 12px;
-    }
-  }
-}
-
-/*********************
- * App Notifications *
- *********************/
-.app-notification {
-  @extend %osd;
-
-  padding: 10px;
-  border-spacing: 10px;
-  border-radius: 0 0 5px 5px;
-  background-color: $osd_bg_color;
-  background-image: linear-gradient(to bottom, transparentize(black, 0.8),
-                                               transparent 2px);
-  background-clip: padding-box;
-
-  button { @extend %osd_button; }
-
-  border { border: none; }
-}
-
-
-/*************
- * Expanders *
- *************/
-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 { color: $insensitive_fg_color; }
-
-  &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
-}
-
-expander-widget {
-  @include focus-ring("> box > title");
-
-  > box > title {
-    transition: $focus_transition;
-    border-radius: $button_radius;
-
-    &:hover > expander {
-      color: lighten($fg_color,30%); //only lightens the icon
-    }
-  }
-}
-
-.navigation-sidebar,
-placessidebar,
-stackswitcher,
-expander-widget {
-  &:not(decoration):not(window):drop(active):focus,
-  &:not(decoration):not(window):drop(active) {
-    box-shadow: none;
-  }
-}
-
-
-/************
- * Calendar *
- ***********/
-calendar {
-  color: $text_color;
-  border: 1px solid $borders_color;
-
-  > header {
-    border-bottom: 1px solid $borders_color;
-
-    > button {
-      border: none;
-      box-shadow: none;
-      background: none;
-      border-radius: 0;
-    }
-    > button:backdrop {
-      background: none;
-    }
-  }
-
-  > grid {
-    > label.day-name {
-    }
-
-    > label.week-number {
-    }
-
-    > label.today {
-      box-shadow: inset 0px -2px $borders_color;
-
-      &:selected {
-        box-shadow: none;
-      }
-    }
-
-    > label:focus {
-      outline-color: $focus_border_color;
-      outline-offset: -2px;
-      outline-width: 2px;
-      outline-style: solid;
-    }
-
-    > label.day-number {
-      padding: 4px;
-
-      &:selected{
-        @extend %selected_items;
-        border-radius: 3px;
-      }
-    }
-
-    > label.day-number.other-month {
-      color: gtkalpha(currentColor, 0.3);
-    }
-  }
-
-}
-
-
-/***********
- * Dialogs *
- ***********/
-window.dialog.message { // Message Dialog styling
-  .titlebar {
-    min-height: 20px;
-    background-image: none;
-    background-color: $bg_color;
-    border-style: none;
-    border-top-left-radius: 7px;
-    border-top-right-radius: 7px;
-  }
-
-  box.dialog-vbox.vertical {
-    border-spacing: 10px;
-  }
-
-  & label.title {
-    font-weight: 800;
-    font-size: 15pt;
-  }
-
-  &.csd { // rounded bottom border styling for csd version
-    &.background {
-      // bigger radius for better antialiasing
-      border-bottom-left-radius: $window_radius+1;
-      border-bottom-right-radius: $window_radius+1;
-    }
-
-    .dialog-action-area button {
-      padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround
-      border-radius: 0;
-      border-left-style: solid;
-      border-right-style: none;
-      border-bottom-style: none;
-
-      &:first-child{
-        border-left-style: none;
-        border-bottom-left-radius: 7px;
-      }
-
-      &:last-child {
-        border-bottom-right-radius: 7px;
-      }
-    }
-  }
-}
-
-filechooser {
-  .dialog-action-box {
-    border-top: 1px solid $borders_color;
-  }
-
-  #pathbarbox { border-bottom: 1px solid $bg_color; }
-}
-
-
-filechooserbutton>button>box {
-  border-spacing: 6px;
-}
-filechooserbutton:drop(active) {
-  box-shadow: none;
-  border-color: transparent;
-}
-
-
-/***********
- * Sidebar *
- ***********/
-.sidebar {
-  background-color: mix($bg_color, $base_color, 50%);
-
-  &:not(separator) {
-    @at-root %sidebar_left,
-    &:dir(ltr),
-    &.left,
-    &.left:dir(rtl) {
-      border-right: 1px solid $borders_color;
-      border-left-style: none;
-    }
-
-    @at-root %sidebar_right,
-    &:dir(rtl),
-    &.right {
-      border-left: 1px solid $borders_color;
-      border-right-style: none;
-    }
-  }
-
-  listview.view,
-  list { background-color: transparent; }
-
-  paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
-}
-
-stacksidebar {
-  //not a regular list
-  list.separators:not(.horizontal) > row:not(.separator) {
-    border-bottom: none;
-  }
-  row {
-    padding: 10px 4px;
-
-    > label {
-      padding-left: 6px;
-      padding-right: 6px;
-    }
-
-    &.needs-attention > label {
-      @extend %needs_attention;
-       background-size: 6px 6px, 0 0;
-    }
-    &:selected {
-      background-color: $menu_selected_color;
-      border-radius: $menu_radius;
-      color: $fg_color;
-    }
-    &:selected:hover:dir(ltr), &:selected:hover:dir(rtl) {
-      background-color: darken($menu_selected_color,5%);
-    }
-    &:focus:focus-visible {
-      outline-width: 0;
-      background-color: $selected_bg_color;
-      color: $selected_fg_color;
-    }
-    &.activatable:active, &.activatable:selected:active {
-      box-shadow: none; // #3413
-    }
-  }
-}
-
-separator.sidebar {
-  background-color: $borders_color;
-}
-
-
-/**********************
- * Navigation Sidebar *
- **********************/
-
-.navigation-sidebar {
-  padding: $menu-margin 0; //only vertical padding. horizontal row size would clip
-
-  > separator {
-    margin: $menu-margin;
-  }
-
-  > row {
-    min-height: 36px;
-    padding: 0 8px;
-    border-radius: $menu-margin;
-    margin: 0 $menu-margin 2px;
-
-    &:hover,
-    &:focus-visible:focus-within {
-      background-color: darken($menu_selected_color, 5%);
-    }
-
-    &:selected {
-      background-color: $menu_selected_color;
-      color: inherit;
-
-      &:hover {
-        background-color: darken($menu_selected_color,5%);
-      }
-
-      &:focus-visible:focus-within {
-        outline-width: 0;
-        color: $selected_fg_color;
-        background-color: $selected_bg_color;
-        &:hover { background-color: darken($selected_bg_color,10%); }
-      }
-    }
-
-    &:disabled { color: $insensitive_fg_color; }
-  }
-}
-
-
-/****************
- * File chooser *
- ****************/
-
-$_placesidebar_icons_opacity: 0.7;
-
-row image.sidebar-icon { opacity: $_placesidebar_icons_opacity; } // dim the sidebar icons
-                                                                  // see bug #786613 for details
-                                                                  // on this oddity
-
-/* this should be more generic, only using .navigation-sidebar
-   https://gitlab.gnome.org/GNOME/gtk/-/issues/2929
-*/
-
-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;
-
-      @extend %button_selected_flat;
-      min-height: 26px;
-      min-width: 26px;
-      margin-top: 3px;
-      margin-bottom: 3px;
-      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: $selected_bg_color; }
-
-    &:drop(active):not(:disabled) {
-      color: $drop_target_color;
-      box-shadow: inset 0 1px $drop_target_color,
-                  inset 0 -1px $drop_target_color;
-
-      &:selected {
-        color: $selected_fg_color;
-        background-color: $drop_target_color;
-      }
-    }
-  }
-}
-
-placesview {
-  .server-list-button > image {
-    transition: 200ms $ease-out-quad;
-    -gtk-icon-transform: rotate(0turn);
-  }
-
-  .server-list-button:checked > image {
-    transition: 200ms $ease-out-quad;
-    -gtk-icon-transform: rotate(-0.5turn);
-  }
-
-  row.activatable:hover {  }
-
-  > actionbar > revealer > box  > box{
-    border-spacing: 6px;
-  }
-}
-
-
-/*********
- * Paned *
- *********/
-paned {
-  > separator {
-    min-width: 1px;
-    min-height: 1px;
-    -gtk-icon-source: none; // defeats the ugly default handle decoration
-    border-style: none; // just to be sure
-    background-color: transparent;
-    // workaround, using background instead of a border since the border will get rendered twice (?)
-    background-image: image($borders_color);
-    background-size: 1px 1px;
-
-    &:selected { background-image: image($selected_bg_color); } // FIXME is this needed?
-
-    &.wide {
-      min-width: 5px;
-      min-height: 5px;
-      background-color: $bg_color;
-      background-image: image($borders_color), image($borders_color);
-      background-size: 1px 1px, 1px 1px;
-    }
-  }
-
-  &.horizontal > separator {
-    background-repeat: repeat-y;
-
-    &:dir(ltr) {
-      margin: 0 -8px 0 0;
-      padding: 0 8px 0 0;
-      background-position: left;
-    }
-    &:dir(rtl) {
-      margin: 0 0 0 -8px;
-      padding: 0 0 0 8px;
-      background-position: right;
-    }
-
-    &.wide {
-      margin: 0;
-      padding: 0;
-      background-repeat: repeat-y, repeat-y;
-      background-position: left, right;
-    }
-  }
-
-  &.vertical > separator {
-    margin: 0 0 -8px 0;
-    padding: 0 0 8px 0;
-    background-repeat: repeat-x;
-    background-position: top;
-
-    &.wide {
-      margin: 0;
-      padding: 0;
-      background-repeat: repeat-x, repeat-x;
-      background-position: bottom, top;
-    }
-  }
-}
-
-
-/**************
- * GtkVideo *
- **************/
-
-video {
-  & image.osd {
-    min-width: 64px;
-    min-height: 64px;
-    border-radius: 32px;
-  }
-  background: black;
-}
-
-/************
- * Tooltips *
- ************/
-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_borders_color; // this subtle border is meant to
-                                              // not make the tooltip melt with
-                                              // very dark backgrounds
-    color: white;
-  }
-
-  padding: 6px 10px;
-  border-radius: $window_radius;
-  box-shadow: none; // otherwise it gets inherited by windowframe.csd
-
-  > box {
-    border-spacing: 6px;
-  }
-}
-
-
-/*****************
- * Color Chooser *
- *****************/
-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.
-
-  transition: $focus_transition;
-
-  @include focus-ring($width: 4px, $offset: -2px);
-
-  &:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state
-
-  $_colorswatch_radius: 5px;
-
-  // 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: $_colorswatch_radius + 0.5px;
-    border-top-right-radius: $_colorswatch_radius + 0.5px;
-
-    > overlay {
-      border-top-left-radius: $_colorswatch_radius;
-      border-top-right-radius: $_colorswatch_radius;
-    }
-  }
-
-  &.bottom {
-    border-bottom-left-radius: $_colorswatch_radius + 0.5px;
-    border-bottom-right-radius: $_colorswatch_radius + 0.5px;
-
-    > overlay {
-      border-bottom-left-radius: $_colorswatch_radius;
-      border-bottom-right-radius: $_colorswatch_radius;
-    }
-  }
-
-  &.left,
-  &:first-child:not(.top) {
-    border-top-left-radius: $_colorswatch_radius + 0.5px;
-    border-bottom-left-radius: $_colorswatch_radius + 0.5px;
-
-    > overlay {
-      border-top-left-radius: $_colorswatch_radius;
-      border-bottom-left-radius: $_colorswatch_radius;
-    }
-  }
-
-  &.right,
-  &:last-child:not(.bottom) {
-    border-top-right-radius: $_colorswatch_radius + 0.5px;
-    border-bottom-right-radius: $_colorswatch_radius + 0.5px;
-
-    > overlay {
-      border-top-right-radius: $_colorswatch_radius;
-      border-bottom-right-radius: $_colorswatch_radius;
-    }
-  }
-
-  &.dark {
-    > overlay {
-      color: white;
-    }
-
-    &.activatable:hover > overlay {
-      border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color);
-    }
-  }
-
-  &.light {
-    > overlay {
-      color: black;
-    }
-
-    &.activatable:hover > overlay {
-      border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color);
-    }
-  }
-
-  &:drop(active) {
-    box-shadow: none;
-
-    &.light > overlay {
-      border-color: $drop_target_color;
-      box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
-                  inset 0 0 0 1px $drop_target_color;
-    }
-
-    &.dark > overlay {
-      border-color: $drop_target_color;
-      box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(black, 0.7), $borders_color),
-                  inset 0 0 0 1px $drop_target_color;
-    }
-  }
-
-  > overlay {
-    border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
-  }
-
-  &.activatable:hover > overlay {
-    box-shadow: inset 0 1px transparentize(white, 0.6),
-                inset 0 -1px transparentize(black, 0.8);
-  }
-
-  &#add-color-button {
-    border-radius: $_colorswatch_radius 0 0 $_colorswatch_radius;
-
-    &:only-child { border-radius: $_colorswatch_radius; }
-
-    > overlay {
-      @include button(normal);
-    }
-
-    &.activatable:hover > overlay {
-      @include button(hover);
-    }
-  }
-
-  &:disabled {
-    opacity: 0.5;
-
-    > overlay {
-      border-color: transparentize(black, 0.4);
-      box-shadow: none;
-    }
-  }
-
-  row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
-
-  &#editor-color-sample {
-    border-radius: 4px;
-
-    > overlay { border-radius: 4.5px; }
-  }
-}
-
-plane {
-  transition: $focus_transition;
-
-  @include focus-ring($offset: 2px, $outer: true);
-}
-
-// colorscale popup
-colorchooser .popover.osd { border-radius: 5px; }
-
-/********
- * Misc *
- ********/
-.content-view {
-  background-color: darken($bg_color,7%);
-
-  &:hover { -gtk-icon-filter: brightness(1.2); }
-
-  .tile {
-    margin: 2px;
-    background-color: if($variant=='light', transparent, black);
-    border-radius: 0;
-    padding: 0;
-
-    &:active, &:selected { background-color: if($variant=='light', transparent, $selected_bg_color); }
-    &:disabled { background-color: if($variant=='light', transparent, $insensitive_bg_color); }
-}
-
-  > rubberband { @extend rubberband; }
-
-}
-
-.scale-popup {
-  .osd & { @extend %osd; }
-
-  .osd & button.flat {  //FIXME: quick hack, redo properly
-    border-style: none;
-    border-radius: 5px;
-  }
-
-  button { // +/- buttons on GtkVolumeButton popup
-    &:hover {
-      @extend %undecorated_button;
-      background-color: transparentize($fg_color,0.9);
-      border-radius: 5px;
-    }
-  }
-}
-
-
-/**********************
- * Window Decorations *
- *********************/
-window {
-  // lamefun trick to get rounded borders regardless of CSD use
-  border-width: 0px;
-
-  // this needs to be transparent
-  // see bug #722563
-  $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
-  $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1));
-
-  &.csd {
-     box-shadow: 1px 1px 0px $fg_color,-1px 1px 0px $fg_color, 1px -1px 0px $fg_color,  -1px -1px 0px $fg_color;
-                 //doing borders with box-shadow
-    margin: 0px;
-    border-radius: $window_radius $window_radius 0 0;
-    &: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: $backdrop_transition;
-    }
-
-    &.popup {
-      border-radius: $menu_radius;
-      box-shadow: 0 1px 2px transparentize(black, 0.8),
-                  0 0 0 1px transparentize($_wm_border, 0.1);
-    }
-
-    &.dialog.message {
-      border-radius: $window_radius;
-      box-shadow: 0 1px 2px transparentize(black, 0.8),
-                  0 0 0 1px transparentize($_wm_border, 0.1);
-    }
-
-    &.solid-csd {
-      margin: 0;
-      padding: 0;
-      border: solid 1px $borders_color;
-      border-radius: 0;
-      box-shadow: inset 0 0 0 3px $headerbar_bg_color, inset 0 1px $top_hilight;
-
-      &:backdrop { box-shadow: inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight; }
-    }
-  }
-
-  &.maximized,
-  &.fullscreen,
-  &.tiled,
-  &.tiled-top,
-  &.tiled-left,
-  &.tiled-right,
-  &.tiled-bottom { border-radius: 0; }
-
-  &.popup { box-shadow: none; }
-
-  // server-side decorations as used by mutter
-  &.ssd { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows
-
-}
-
-tooltip.csd {
-  border-radius: 5px;
-  box-shadow: none;
-}
-
-// catch all extend :)
-
-%selected_items {
-  background-color: $selected_bg_color;
-
-  @at-root %nobg_selected_items, & {
-    color: $selected_fg_color;
-
-    @at-root %selected_items_disabled,
-    &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
-
-  }
-}
-
-.monospace { font-family: monospace; }
-
-
-/**********************
- * Touch Copy & Paste *
- *********************/
-//touch selection handlebars for the Popover.osd above
-cursor-handle {
-  background-color: transparent;
-  background-image: none;
-  box-shadow: none;
-  border-style: none;
-  min-width: 20px;
-  min-height: 24px;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 24px;
-  padding-bottom: 24px;
-
-  @each $s,$as in ('',''),
-                  (':hover','-hover'),
-                  (':active','-active') { //no need for insensitive and backdrop
-    &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
-      $_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
-      -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
-                                    url('#{$_url}@2.png'));
-    }
-
-    &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
-      $_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
-      -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
-                                    url('#{$_url}@2.png'));
-    }
-
-    &.insertion-cursor#{$s}:dir(ltr), &.insertion-cursor#{$s}:dir(rtl) {
-      $_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
-      -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
-                                    url('#{$_url}@2.png'));
-    }
-  }
-}
-
-shortcuts-section {
-  margin: 20px;
-}
-
-.shortcuts-search-results {
-  margin: 20px;
-  border-spacing: 24px;
-}
-
-// shortcut window keys
-shortcut {
-  border-spacing: 6px;
-}
-
-shortcut > .keycap {
-  min-width: 20px;
-  min-height: 25px;
-  margin-top: 2px;
-  padding-bottom: 3px;
-  padding-left: 6px;
-  padding-right: 6px;
-
-  color: $fg_color;
-  background-color: $base_color;
-  border: 1px solid;
-  border-color: if($variant == 'light', mix($borders_color, $bg_color, 50%), $borders_color);
-  border-radius: 5px;
-  box-shadow: if($variant == 'light', inset 0 -3px mix($base_color, $bg_color, 20%), inset 0 -3px mix($borders_color, $base_color, 60%));
-  font-size: smaller;
-
-}
-
-:not(decoration):not(window):drop(active):focus,
-:not(decoration):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;
-}
-
-stackswitcher > button.text-button { min-width: 100px; } // FIXME aggregate with buttons
-
-stackswitcher.circular {
-  border-spacing: 12px;
-
-  // FIXME aggregate with buttons
-  > button.circular,
-  > button.text-button.circular {
-    min-width: 32px;
-    min-height: 32px;
-    padding: 0;
-  }
-}
-/*************
- * App Icons *
- *************/
-/* 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);
-}
-
-/* Drapshadow 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);
-}
-
-/*********
- * Emoji *
- ********/
-
-popover.emoji-picker > contents {
-  padding: 0;
-}
-
-.emoji-searchbar {
-  padding: 6px;
-  border-spacing: 6px;
-  border-bottom: 1px solid $borders_color;
-}
-
-.emoji-toolbar {
-  padding: 6px;
-  border-spacing: 6px;
-  border-top: 1px solid $borders_color;
-}
-
-button.emoji-section {
-  border-color: transparent;
-  border-width: 3px;
-  border-style: none none solid;
-  border-radius: 0;
-
-  padding: 3px 0 0;
-  min-width: 32px;
-  min-height: 28px;
-
-  /* reset props inherited from the button style */
-  background: none;
-  box-shadow: none;
-  text-shadow: none;
-
-  &:hover { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, .9)); }
-  &:checked { border-color: $selected_bg_color; }
-}
-
-popover.emoji-picker emoji {
-  font-size: x-large;
-  padding: 6px;
-  border-radius: 6px;
-
-  &:focus,
-  &:hover {
-    background: $selected_bg_color;
-  }
-}
-
-emoji-completion-row > box {
-  border-spacing: 10px;
-  padding: 2px 10px;
-}
-
-emoji-completion-row:focus,
-emoji-completion-row:hover {
-  background-color: $selected_bg_color;
-  color: $selected_fg_color;
-}
-
-emoji-completion-row emoji:focus,
-emoji-completion-row emoji:hover {
-  background-color: $menu_selected_color;
-}
-
-popover.entry-completion > contents {
-  padding: 0;
-}
-
-statusbar {
-  padding: 6px 10px 6px 10px;
-}