// /***************
//  * Gnome-Panel *
//  ***************/

%gnome_panel_toplevel {
  background-color: $panel_bg_color;

  * { outline-width: 0; } // unset outlines
}

%gnome_panel_applet {
  // do not set transparent background in this template
  // mate-panel >= 1.18.6 will be broken
  color: $inverted_fg_color;
  box-shadow: none;
}

%gnome_panel_menubar {
  color: $inverted_fg_color;
  background-color: transparent;
  box-shadow: none;
  font-weight: 700;
}

%gnome_panel_menuitem {
  padding: 0 rem(4px, $sw: 1.0);
  color: $inverted_fg_color;
  background-color: transparent;
  &:hover {
    color: $selected_fg_color;
    box-shadow: inset 0 -2px $selected_bg_color;
  }
}

panel-toplevel.background { @extend %gnome_panel_toplevel; }

panel-applet,
panel-plug,
panel-toplevel > grid.horizontal > widget > widget {
  @extend %gnome_panel_applet;
  background-color: transparent;
}

.gnome-panel-menu-bar,
gp-applet > menubar,
#clock-applet-button { @extend %gnome_panel_menubar; }

.gnome-panel-menu-bar > menuitem,
gp-applet menubar > menuitem {
  @extend %gnome_panel_menuitem;

  .vertical & { padding: rem(4px, $sw: 1.0) 0; }

  @each $_layout, $_line in (top, 0 2px),
                            (left, 2px 0),
                            (right, -2px 0) {
    .#{$_layout} & {
      &:hover { box-shadow: inset #{$_line} $selected_bg_color; }
    }
  }
}

#tasklist-button,
#clock-applet-button,
#showdesktop-button {
  @extend %button_flat_normal;
  padding: 0 rem(4px, $sw: 1.0);
  border: none;
  border-radius: 0;
  color: $inverted_fg_color;
  background-color: transparent;
  &:hover {
    color: $selected_fg_color;
    background-color: transparent;
    box-shadow: inset 0 -2px $outline_track_color;
  }
  &:checked,
  &:hover:checked {
    color: $selected_fg_color;
    background-color: transparent;
    box-shadow: inset 0 -2px $selected_bg_color;
  }

  .vertical & { padding: rem(4px, $sw: 1.0) 0; }

  @each $_layout, $_line in (top, 0 2px),
                            (left, 2px 0),
                            (right, -2px 0) {
    .#{$_layout} & {
      &:hover { box-shadow: inset #{$_line} $outline_track_color; }
      &:checked,
      &:hover:checked { box-shadow: inset #{$_line} $selected_bg_color; }
    }
  }
}

#tasklist-button {
  &,
  label { font-weight: 400; }
}

wnck-pager {
  background-color: transparent;
  color: mix($inverted_fg_color, $panel_bg_color, 54%); // use opaque
  box-shadow: inset 0 0 0 1px mix($inverted_fg_color, $panel_bg_color, 40%);
  &:hover {
    background-color: $track_color;
    color: $inverted_fg_color;
    box-shadow: inset 0 0 0 1px $outline_track_color;
  }
  &:selected {
    background-color: gtkopacity($selected_bg_color, 0.2);
    color: $inverted_fg_color;
    box-shadow: inset 0 0 0 1px $selected_bg_color;
  }
}

na-tray-applet { -NaTrayApplet-icon-padding: 2px; }

gp-arrow-button {
  min-width: rem(20px);
  min-height: 0;
  margin: 0 rem(2px);
  border: 1px solid transparent;
  background-image: none;
  color: $inverted_fg_color;
  &:hover,
  &:active { color: $selected_fg_color; }
}

sn-button { padding: 0 rem(4px, $sw: 1.0); }

gp-applet > separator {
  &.vertical {
    min-width: 2px;
    margin: 3px;
  }

  background-color: $panel_separator_color;
}


// /****************
//  * Gnome Tweaks *
//  ****************/

// sidebar
.tweak-categories {
  @extend %sidebar_template;
  background-image: image($secondary_dark_color);
  color: $secondary_fg_color;

  separator.horizontal {
    min-height: 0;
    border-color: transparent;
    background-color: transparent;
  }
}

.tweak-category {
  border: none;
  color: $secondary_fg_color;
  background-color: transparent;
  font-weight: 500;
  &:hover { color: $fg_color; }
  &:selected {
    color: $selected_bg_color;
    background-color: transparent;

    label { color: $selected_bg_color; }
  }
}

list.tweak-group {
  // for shell-extensions group
  row.activatable:not(.tweak) {
    &:hover { // unset hover effects
      background-image: radial-gradient(circle farthest-corner at center,
                                        gtkalpha(currentColor, 0) 100%,
                                        transparent 0%),
                        image(gtkalpha(currentColor, 0));
      background-color: transparent;
    }
  }
}

// basic row node container in right-pane
row.tweak {
  &:dir(ltr) { margin-left: rem(13.3px, $sw: 1.0); }
  &:dir(rtl) { margin-right: rem(13.3px, $sw: 1.0); }

  &, &.title {
    min-height: rem($widget_size);
    &:hover,
    &:active { // unset hover/active effects
      background-image: none;
      background-color: transparent;
      animation: none;
    }
  }

  &.title {
    color: $tertiary_fg_color;
    font-weight: 700;
    // unset indentation
    &:dir(ltr) { margin-left: 0; }
    &:dir(rtl) { margin-right: 0; }
  }

  // child sub list elements
  &:not(.title) > list {
    border: 1px solid $borders_color;

    > row.activatable {
      background-color: $base_color;
      color: $secondary_fg_color;
      &:hover { // revive ripple effects
        background-image: radial-gradient(circle farthest-corner at center,
                                          gtkalpha(currentColor, 0) 100%,
                                          transparent 0%),
                          image($track_color);
        color: $fg_color;
      }
      &:active {
        animation: flat_ripple_effect 0.3s $slope_slow forwards;
        color: $fg_color;
      }

      > box.horizontal {
        > label,
        > box.vertical > label:first-child { font-weight: 500; }
      }

      // draw horizontal lines
      &:not(:last-child) { border-bottom: 1px solid $borders_color; }
    }
  }
}

// container and tweaks in a group
list.tweak-group-startup {
  background-color: $bg_color;

  row {
    &.activatable {
      padding: rem(8px);
      background-image: image($bg_color);
      background-repeat: repeat-x;
      background-size: auto;
      transition-duration: 0s; // child 'grid' already has
      &:hover {
        > grid {
          background-image: image(gtkopacity($secondary_fg_color, 0.12));
          transition: background-image 0.1s $slope_slow;
        }
      }
      &:active { // disable ripples
        transition: none;
        animation: none;
      }

      > grid { // actual container
        border-radius: 2px;
        padding: rem(8px);
        transition: background-image 0.1s $slope_slow;

        > button { // 'remove' buttons
          color: $secondary_selected_fg_color;
          background-color: $destructive_color;
          &:hover { color: $selected_fg_color; }
          &:active {
            color: $selected_fg_color;
            background-color: $selected_bg_color;
          }
          &:checked {
            color: $secondary_selected_fg_color;
            background-color: mix($selected_fg_color, $destructive_color, 20%);
          }
          &:disabled {
            @include button(flat-insensitive, $track_color,
                                              $insensitive_fg_color);
          }
        }
      }

      // raised 'plus' button
      > button { margin: 0 rem(8px) 8px; } // prevent truncated drop-shadow
    }
  }
}

headerbar.titlebar.tweak-titlebar {
  &-left,
  &-right {
    // re-define bottom margin
    > .title { margin: 0 0 rem(1.3px, $sw: 1.0); }
  }
}

dialog.background.csd > box.dialog-vbox.vertical {
  > searchbar + scrolledwindow > viewport.frame > list {
    // FIXME: who needed hard-coded 5px outer margins
    // causing weird pitch black band?
    border: 1px solid $solid_light_borders_color; // use opaque
    box-shadow: 0 0 0 5px $bg_color;
  }
}


// /*******************
//  * Gnome-Flashback *
//  *******************/

// use message-dialog style for popup osd windows

// popup window widget
#gf-label-window,
#gf-bubble,
#gf-osd-window,
#gf-input-source-popup {
  &, &.solid {
    background-color: gtkopacity($inverted_dark_color, 0.9);
    color: $inverted_fg_color;

    levelbar {
      block:not(.empty) { background-color: $success_color; }
    }
  }

  &:not(.solid) {
    border: none;
    border-style: solid;
    border-width: 11px;
    @if $variant == light {
      border-image: -gtk-scaled(url("assets/osd-shadow.png"),
                                url("assets/osd-shadow@2.png"))
                    11 / 11px stretch;
    }
    @else {
      border-image: -gtk-scaled(url("assets/osd-shadow-dark.png"),
                                url("assets/osd-shadow-dark@2.png"))
                    11 / 11px stretch;
    }
  }

  // for non-composited environments
  &.solid {
    border-radius: 0;
    border: 1px solid $borders_color;
    border-image: none;
  }
}

#gf-label-window {
  font-size: rem(40px, $sw: 1.0);
  font-weight: 400;
}

#gf-bubble box.horizontal > button.flat { // OSD-style button
  color: $inverted_secondary_accent_label_color;
  font-weight: 700;
  &:hover,
  &:active { color: $inverted_accent_label_color; }
  &:disabled { color: $insensitive_inverted_fg_color; }
}

#notification-popup-window button.text-button { // 'clear' button
  @extend %action-area-button;
}

// input-source switcher labels
#gf-input-source {
  min-width: rem(120px, $sw: 1.0);
  min-height: rem(120px, $sw: 1.0);
  color: $inverted_fg_color;
  font-size: rem(40px, $sw: 1.0);
  font-weight: 400;
  &:selected {
    border-radius: 2px;
    background-color: $track_color;
    color: $inverted_accent_label_color;
  }
}

// popup for inpu-source candidates
#gf-candidate-popup {
  &, &.solid {
    background-color: gtkopacity($inverted_dark_color, 0.9);
    color: $inverted_tertiary_fg_color;
  }

  &:not(.solid) {
    border: none;
    border-style: solid;
    border-width: 11px;
    @if $variant == light {
      border-image: -gtk-scaled(url("assets/osd-shadow.png"),
                                url("assets/osd-shadow@2.png"))
                    11 / 11px stretch;
    }
    @else {
      border-image: -gtk-scaled(url("assets/osd-shadow-dark.png"),
                                url("assets/osd-shadow-dark@2.png"))
                    11 / 11px stretch;
    }
  }

  // for non-composited environments
  &.solid {
    border-radius: 0;
    border: 1px solid $borders_color;
    border-image: none;
  }

  gf-candidate-box {
    border-radius: 2px;
    color: $inverted_secondary_fg_color;
    transition: none;

    label {
      padding: rem(2.7px) rem(8px) rem(4px);
      font-size: 110%;
    }

    &:hover {
      background-color: $track_color;
      color: $inverted_fg_color;
    }
    &:selected {
      background-color: $suggested_color;
      color: $selected_fg_color;
    }
  }

  .linked > button { // page-up&down buttons
    @extend %button_flat_normal;
    border-radius: 0;
    border: none;
    background-color: transparent;
    color: $inverted_secondary_accent_label_color;
    &:hover {
      @extend %button_flat_hover;
      background-color: transparent;
      color: $inverted_accent_label_color;
    }
    &:active {
      @extend %button_flat_active;
      background-color: transparent;
      color: $inverted_accent_label_color;
    }
    &:disabled {
      @extend %button_flat_disabled;
      color: $insensitive_inverted_fg_color;
    }
  }
}


// /************
//  * Nautilus *
//  ************/

.nautilus-desktop-window {
  &,
  notebook,
  notebook > stack { background: transparent; }
}

.nautilus-desktop.nautilus-canvas-item {
  color: $selected_fg_color;
  text-shadow: $z-depth-1-label; // non-sense for me
  &:selected { text-shadow: none; }
}

.background.nautilus-window:not(.nautilus-desktop-window) {
  &:not(nautilus-desktop-window) {
    // enforce base-color backgrounds
    background-color: $base_color;

    // main content pane
    > grid > paned > overlay > notebook {
      // cover up top-edge 1px line
      box-shadow: inset 0 1px $base_color;

      > stack > box.vertical > grid > overlay > scrolledwindow {
        > .view:not(.nautilus-desktop) {
          // drop unneeded images
          background-image: none;
        }
      }
    }
  }
}

.nautilus { // hide outlines
  &-canvas-item {
    border-radius: 2px;
    outline-width: 0;
  }

  &-list-view treeview.view { outline-width: 0; }
}

.nautilus-circular-button {
  border-radius: 9999px;
  -gtk-outline-radius: 9999px;
}

.nautilus-window {
  > grid.horizontal paned > separator {
    // do not use transparentize
    background-image: image($solid_light_borders_color);
    background-size: $separator_narrow;
    background-repeat: repeat-y;
    transition: none;
  }

  > headerbar.titlebar > box.horizontal > entry { // location-entry
    padding-top: 0; // = revealed path-bar
    padding-bottom: 0;
  }

  > headerbar.titlebar { // radial-progress widget
    revealer > button.popup.toggle > widget { color: $accent_color; }
  }

  $child_gap: if($ref_weight < 1.0, 4px, 6px);
  $container_padding: $child_gap ($child_gap * 1.5);
  $label_margin: ($child_gap / 2) (-$child_gap * 1.5) 0;
  $label_padding: if($ref_weight < 1.0,
                  ($child_gap - 1px) $child_gap $child_gap,
                  ($child_gap - 3px) $child_gap ($child_gap - 2px));

  flowboxchild { // experimental 'new view' mode
    margin: unset; // unset spacing first
    padding: unset;
    color: $fg_color;
    outline-width: 0; // unset outlines

    * { transition-duration: 0s; } // unset child transitions

    box.icon {
      &-item-background {
        padding: $container_padding;
        border: 0 none transparent;

        label {
          margin: $label_margin;
          padding: $label_padding;
          border-radius: 2px;
          background-color: transparent;
        }
      }

      &-background { // use solid black backgrounds
        border: 0 none transparent;
        border-radius: 2px;
        background-color: black;
      }
    }

    &:selected {
      background-color: transparent; // unset selection colour

      box.icon {
        &-item-background label {
          background-color: $selected_bg_color;
          color: $selected_fg_color;
        }

        // tone up image node
        &-background image,
        &-item-background image { -gtk-icon-effect: highlight; }
      }
    }
  }
}

.disk-space-display {
  border: 0 none transparent;

  &.free {
    border-radius: 100px;
    background-color: mix($fg_color, $base_color, 10%);
  }

  &.used {
    border-radius: 100px;
    background-color: $accent_color;
  }

  &.unknown { background-color: mix($accent_color, $base_color, 55%); }
}

// 'batch-rename' dialogs
.conflict-row {
  background-color: $warning_bg_color;
  color: $secondary_fixed_fg_color;
  &:hover,
  &:active {
    background-color: $warning_color;
    color: $fixed_fg_color;
  }
  &:selected { @extend %selected_items; }
}

// hide unwanted frame in batch-rename dialog
dialog.background.csd > box.dialog-vbox > grid.horizontal {
  > scrolledwindow.frame {
    > viewport.frame { margin: -1px; }
  }
}

.nautilus {
  &-canvas-item {
    border-radius: 2px;

    &.dim-label {
      color: $tertiary_fg_color;
      &:selected {
        &, &:focus { color: mix($selected_fg_color, $selected_bg_color, 50%); }
      }
    }
  }

  &-list-dim-label {
    color: $tertiary_fg_color;
    &:selected {
      &, &:focus { color: mix($selected_fg_color, $selected_bg_color, 50%); }
    }
  }
}

.documents-entry-tag { @extend .entry-tag; }


// /*********
//  * Geary *
//  *********/

// Geary is the most ugly app for theming.
.geary-titlebar-left {
  // remove unexpected "hardcoded" vertical separator
  separator { opacity: 0; }
}

.geary-titlebar-right {
  // stop double-shadows on right paned header-bar
  box-shadow: none;

  > .linked.raised > button {
    // tool-button array
    &.image-button:not(.text-button) {
      min-height: $icon_size * 1.5;
      min-width: $icon_size * 1.5;
      margin: rem(5.3px) 0;
      padding: if($ref_weight < 1.0,
               rem(($widget_size - $icon_size * 1.5 - 2px) / 2),
               rem(($widget_size - $icon_size * 1.5) / 2));
    }

    // 'archive' button
    &:not(.image-button):not(.text-button):not(.suggested-action) {
      min-height: $icon_size;
      margin: rem(5.3px) 0;
      padding-top: rem(($widget_size - $icon_size - 2.7px) / 2);
      padding-bottom: rem(($widget_size - $icon_size - 2.7px) / 2);
      border-radius: 2px;
      -gtk-outline-radius: 2px;

      label {
        margin: rem(-2px) 0;
        font-weight: 700;
      }

      // correct base-line
      image { margin: rem(1.3px, $sw: 1.0) 0 rem(-1.3px, $sw: 1.0); }
    }
  }

  > button.suggested-action { // 'send' button
    min-height: $icon_size;
    margin: rem(5.3px) 0;
    padding-top: rem(($widget_size - $icon_size - 2.7px) / 2);
    padding-bottom: rem(($widget_size - $icon_size - 2.7px) / 2);

    label {
      margin: rem(-2px) 0;
      font-weight: 700;
    }
  }

  box.horizontal:not(.linked):not(.right) {
    button.image-button:not(.text-button):not(.titlebutton) {
      margin: rem(5.3px) 0;
      padding: if($ref_weight < 1.0,
               rem(($widget_size - $icon_size * 1.5 - 2px) / 2),
               rem(($widget_size - $icon_size * 1.5) / 2));
    }
  }

  button.suggested-action { // 'send' button
    min-height: $icon_size;
    padding-top: rem(($widget_size - $icon_size - 2.7px) / 2);
    padding-bottom: rem(($widget_size - $icon_size - 2.7px) / 2);

    label { margin: rem(-2px) 0; }
  }

  button.image-button.popup.toggle { // 'gear' button
    margin: rem(5.3px) 0;
    padding: if($ref_weight < 1.0,
             rem(($widget_size - $icon_size * 1.5 - 2px) / 2),
             rem(($widget_size - $icon_size * 1.5) / 2));
  }
}

%folder_frame_border { border-width: 0 0 1px; }

%conversation_frame {
  > border { border: none; }

  treeview.view {
    background-color: $base_color;
    font-weight: 400; // reset weight
    &:selected {
      &, &:focus {
        background-color: gtkopacity($selected_bg_color, 0.25);
        color: $fg_color;
        &:dir(ltr) { box-shadow: inset 4px 0 $selected_bg_color; }
        &:dir(rtl) { box-shadow: inset -4px 0 $selected_bg_color; }
      }
    }
  }
}

%folder_frame {
  @extend %sidebar_template;

  treeview.view.sidebar {
    @extend %sidebar_treeview;

    &.cell { // = row height of placessidebar
      padding-top: rem(4px);
      padding-bottom: rem(4px);
    }
  }
}

// left-pane styling (legacy)
.sidebar.vertical > paned.sidebar-pane-separator {
  .conversation-frame { @extend %conversation_frame; }

  .folder-frame {
    > border { @extend %folder_frame_border; }

    > scrolledwindow { @extend %folder_frame; }
  }
}

// left-pane styling (current)
.sidebar.vertical > paned.geary-sidebar-pane-separator {
  .geary-conversation-frame { @extend %conversation_frame; }

  .geary-folder-frame {
    > border { @extend  %folder_frame_border; }

    > scrolledwindow { @extend %folder_frame; }
  }
}

window.background > box.vertical > paned.horizontal > frame {
  // right-paned scrolledwindow
  > box.vertical > paned.vertical > overlay {
    > scrolledwindow > scrollbar { // always use light-variant
      background-color: transparent;

      slider {
        background-color: gtkopacity($tertiary_fixed_fg_color, 0.55);
        &:hover {
          background-color: gtkopacity($secondary_fixed_fg_color, 0.55);
        }
        &:active { background-color: $fixed_fg_color; }
        &:disabled { opacity: 0.4; }
      }

      &.overlay-indicator {
        &:not(.dragging):not(.hovering) slider {
          background-color: gtkopacity($tertiary_fixed_fg_color, 0.55);
        }
      }
    }

    > label.bottom { // mimic floating-bar styling
      padding: rem(5.3px);
      border-style: solid;
      border-color: $borders_color;
      color: $fg_color;
      font-size: 90%;
      transition: none;
      opacity: 0.9;

      &.left {
        border-radius: 0 2px 0 0;
        border-width: 1px 1px 0 0;
      }
      &.right {
        border-radius: 2px 0 0 0;
        border-width: 1px 0 0 1px;
      }
    }
  }
}

%composer_headerbar {
  > .linked.raised > button.image-button { // 'trash/save' button
    border-radius: 100px;
    -gtk-outline-radius: 100px;
  }

  > button.flat:not(.image-button) { // 'Reply to' text-button
    border-radius: 2px;
    -gtk-outline-radius: 2px;
  }
}

// right-pane styling (legacy)
paned.vertical > overlay > scrolledwindow > overlay {
  > widget > widget > box > widget > headerbar { // in-line headerbars
    @extend %composer_headerbar;
  }
}

// right-pane styling (current)
stack#conversation_viewer {
  scrolledwindow.geary-conversation-scroller > viewport.frame {
    border: none; // unset borders
  }

  list.background.conversation-listbox {
    background-color: $base_color;

    > row.activatable {
      > box.geary_email {
        margin: -1px; // hide hard-coded parent borders
        border-top: 1px solid $highlight_color;

        grid.geary-message-summary {
          border-bottom: 1px solid $borders_color;
        }
      }

      &:not(.geary-expanded) { // retracted headers
        grid.geary-headers.vertical {
          label { @extend %dim_label; } // tone down
        }
      }

      > widget.geary-composer-embed {
        headerbar { // in-line headerbars
          @extend %composer_headerbar;
          margin: -1px -1px 0; // FIXME: does not work
          border-top: 1px solid $highlight_color;
          box-shadow: if($variant == light, $header-shadow-light,
                                            $header-shadow-dark);
        }
      }
    }
  }
}


// /************
//  * Epiphany *
//  ************/

// incognito-mode styling
//
// most of widget styling are hard-coded by ephy's stylesheet,
// but we should force using dark foregrounds at least...

headerbar.titlebar.incognito-mode {
  entry {
    &, &:focus {
      color: $fixed_fg_color;
      caret-color: $fixed_fg_color;
    }
    &:disabled { color: $insensitive_fixed_fg_color; }
  }

  button:not(.destructive-action):not(.suggested-action) {
    // these classes are specificity bump to override titlebuttons
    &:not(.appmenu):not(.icon):not(:indeterminate) {
      border-radius: 2px;
      -gtk-outline-radius: 2px;

      &,
      &:hover,
      &:active,
      &:checked {
        * {
          background-image: none;
          color: $fixed_fg_color;
        }
      }
      &:disabled,
      &:checked:disabled {
        * {
          background-image: none;
          color: $insensitive_fixed_fg_color;
        }
      }
    }
  }
}

// reset inverted foreground colour
notebook > stack > box.vertical > paned.vertical > overlay {
  > .floating-bar { color: $secondary_fg_color; }
}

.background:not(.csd) > box.vertical > headerbar {
  // conflicts with .primary-toolbar styling?
  .linked > button.image-button { // = 'back/forward' button
    border-radius: 100px;
    -gtk-outline-radius: 100px;
  }
}

// overrides foregrounds for 3.24's ssd-mode
.background headerbar entry {
  &.starred,
  &.non-starred {
    color: $inverted_secondary_fg_color;
    caret-color: $inverted_secondary_fg_color;
    &:focus {
      color: $inverted_fg_color;
      caret-color: $inverted_fg_color;
    }
    &:disabled { color: $insensitive_inverted_secondary_fg_color; }
  }

  // render yellow 'star' icon if bookmarked
  &.starred > image.right {
    color: gtkopacity($question_bg_color, 0.87);
    &:hover,
    &:active,
    &:checked { color: $question_bg_color; }
  }
}

// popover for downloaded lists
popover.background:not(.emoji-picker) > box.vertical > scrolledwindow {
  // re-define background colours for GtkListBox
  > viewport.frame > list.background {
    background-color: $secondary_base_color;
  }
}

// popover for bookmarks
popover.background:not(.emoji-picker) > box.vertical > stack > box.vertical {
  scrolledwindow > viewport.frame {
    border: 1px solid $borders_color;

    > list.background > row.activatable.bookmarks-row {
      color: $secondary_fg_color;
      &:hover,
      &:active,
      &:checked { color: $fg_color; }

      button.flat {
        min-width: $icon_size;
        min-height: $icon_size;
        padding: rem(4px); // Same as of image.sidebar-icon
        border-radius: 100px;
        -gtk-outline-radius: 100px;
      }
    }
  }
}

// bookmark-tag flowbox-childs (almost hard-coded)
flowboxchild.bookmark-tag-widget {
  color: gtkopacity($fixed_fg_color, 0.55); // unchecked
  font-weight: 500;

  label { margin-bottom: rem(1.3px, $sw: 1.0); }

 &-selected { color: $selected_fg_color; } // checked
}


// /************
//  * Seahorse *
//  ************/

window.background box.vertical > paned.horizontal > box.vertical {
  // remove drop-shadow
  > box.vertical > toolbar.primary-toolbar {
    box-shadow: none;
    border-bottom: 1px solid $borders_color;
  }
}


// /**********
//  * Polari *
//  **********/

.polari-room-list { // override labels
  row.activatable {
    font-weight: 500;
    &:not(:hover):not(:active):not(:selected) {
      label,
      image { opacity: 1.0; }
    }

    &.inactive {
      &:not(:hover):not(:active):not(:selected) {
        label,
        image { opacity: 0.54; }
      }
    }

    &:selected {
      background-image: image(
                        mix($selected_bg_color, $secondary_dark_color, 25%));
      &:dir(ltr) { box-shadow: inset 4px 0 $selected_bg_color; }
      &:dir(rtl) { box-shadow: inset -4px 0 $selected_bg_color; }
    }

    label.pending-messages-count {
      background-image: image($suggested_color);
    }
  }
}

.polari-nick-entry {
  border-image: none;
  font-weight: 700;
}

// bottom-paned entry area
window.background > box.horizontal > overlay > stack > overlay > box.vertical {
  > stack.view { // mimic inline-toolbar styling
    border-style: solid;
    border-width: 1px 0 0;
    border-color: $borders_color;
    background-color: $secondary_dark_color;
    box-shadow: if($variant == light, $inline-shadow-light,
                                      $inline-shadow-dark);
  }
}

popover.emoji-picker flowboxchild.emoji {
  // FIXME: why did devs ignore the global emoji theming?
  // Should set hover pseudo-class to child widget node.
  &:hover > widget:not(:hover) label { color: $selected_fg_color; }
}


// /*************
//  * RhythmBox *
//  *************/

// add top-border to inline-toolbar
.sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar {
  @if $variant == light {
    box-shadow: inset 0 1px $solid_light_borders_color,
                inset 0 2px 2px rgba(0, 0, 0, 0.05),
                inset -2px 0 2px -2px rgba(0, 0, 0, 0.03),
                inset -3px 0 3px -2px rgba(0, 0, 0, 0.03);
  }
  @else {
    box-shadow: inset 0 1px $solid_light_borders_color,
                inset 0 2px 2px rgba(0, 0, 0, 0.05),
                inset -2px 0 1px -2px rgba(0, 0, 0, 0.02),
                inset -3px 0 3px -2px rgba(0, 0, 0, 0.04);
  }

  &:dir(rtl) {
    @if $variant == light {
      box-shadow: inset 0 1px $solid_light_borders_color,
                  inset 0 2px 2px rgba(0, 0, 0, 0.05),
                  inset 2px 0 2px -2px rgba(0, 0, 0, 0.03),
                  inset 3px 0 3px -2px rgba(0, 0, 0, 0.03);
    }
    @else {
      box-shadow: inset 0 1px $solid_light_borders_color,
                  inset 0 2px 2px rgba(0, 0, 0, 0.05),
                  inset 2px 0 1px -2px rgba(0, 0, 0, 0.02),
                  inset 3px 0 3px -2px rgba(0, 0, 0, 0.04);
    }
  }

  button.image-button {
    min-width: $icon_size;
    min-width: $icon_size;
    padding: rem(5.3px);

    > widget > box > image { padding: 0; }
  }
}

// tweak sidebar styling
.sidebar-paned {
  scrolledwindow {
    @extend %sidebar_template;
    background-image: image($secondary_dark_color);
  }

  treeview.view.sidebar { @extend %sidebar_treeview; }
}

// tweak border and frame in alt-toolbar
window.csd > box.vertical > box.vertical,
window.solid-csd > box.vertical > box.vertical {
  > toolbar.horizontal {
    margin: -1px 0;
    border-top: 1px solid $borders_color;
    background-color: $secondary_dark_color;
    box-shadow: none;
  }

  > frame {
    margin: -1px 0;
    padding: 0;

    > border { border: none; }
  }
}

// force using circle buttons for 'play/pause' etc
window.background > box.vertical > box.vertical > toolbar {
  button,
  .linked > button {
    min-width: $widget_size;
    min-height: $widget_size;
    padding: 0;
    border-radius: 100px;
    -gtk-outline-radius: 100px;
  }
}

// hard-coded spacing depends on non-scalable unit,
// seems cover-art widget is the most biggest thing?
$album_art: 54px;
$min_circle: 24px;
$toolitem_margin: ($album_art - $min_circle) * 0.5;

window.background > box.vertical > toolbar.primary-toolbar {
  toolitem {
    &:first-child { // 'prev/play/next'
      .linked > button.image-button.raised {
        min-width: $min_circle * 2.0;
        min-height: $min_circle * 2.0;
        margin: 0;
        padding: 0;
        border-radius: 100px;
        -gtk-outline-radius: 100px;

        > widget > box > image { padding: 0; }
      }
    }

    .linked > button.image-button.raised { // 'shuffle/repeat'
      min-width: $min_circle * 1.5;
      min-height: $min_circle * 1.5;
      padding: 0;
      border-radius: 100px;
      -gtk-outline-radius: 100px;
    }

    button.flat.scale { // 'volume'
      min-width: $min_circle;
      min-height: $min_circle;
      margin-top: $toolitem_margin;
      margin-bottom: $toolitem_margin;
      padding: 0;
    }

    > box.horizontal:not(.linked) > button.toggle,
    > .linked > button:not(.toggle):not(.raised):not(.flat) {
      min-width: $min_circle * 1.5;
      min-height: $min_circle * 1.5;
      padding: 0;
      border-radius: 100px;
      -gtk-outline-radius: 100px;

      > widget > box > image { padding: 0; }
    }

    &:last-child { // 'gear'
      button.popup.toggle {
        min-width: $min_circle * 1.5;
        min-height: $min_circle * 1.5;
        padding: 0;
        border-radius: 100px;
        -gtk-outline-radius: 100px;
      }
    }
  }
}

headerbar.titlebar > box.horizontal > box.horizontal {
  // 'search' button
  > button.toggle:not(.text-button):not(.image-button):not(.popup) {
    min-width: $icon_size * 1.5;
    min-height: $icon_size * 1.5;
    padding: if($ref_weight < 1.0,
             rem(($widget_size - $icon_size * 1.5 - 2px) / 2),
             rem(($widget_size - $icon_size * 1.5) / 2));
  }
}

notebook > stack grid.horizontal > grid.horizontal > grid.horizontal {
  button.flat.toggle { // 'edit' and 'browse' button
    &:checked { // draw underline indicator
      border-radius: 0;
      border-image: -gtk-gradient(radial,
                                  center bottom, 0,
                                  center bottom, 0.5,
                                  to($selected_bg_color),
                                  to(transparent))
                                  0 0 2 / 0 0 2px;
      background-color: transparent;
      color: $fg_color;
      &:hover { border-radius: 2px; } // return to rounded edges
    }
  }
}

// 'plugins' dialog
dialog.background > box.dialog-vbox.vertical > box.vertical {
  > toolbar.inline-toolbar.horizontal {
    // remove weird margins
    margin: -2px -2px;

    > toolitem {
      box > button {
        min-width: $widget_size - 10.7px;
        min-height: $widget_size - 10.7px;
        padding: 0;
      }

      buttonbox > button {
        min-width: $widget_size - 10.7px;
        min-height: $widget_size - 10.7px;
        padding: 0;
        border-radius: 2px;
        -gtk-outline-radius: 2px;
      }
    }
  }
}


// /********************
//  * Gnome-Calculator *
//  ********************/

window.background {
  > headerbar.titlebar { // mode-selector button
    > button.flat.popup.toggle.text-button.title {
      // .title class existed
      margin: rem(5.3px) 0; // set standard margins

      > grid > widget { // down arrow
        padding-top: rem(2.7px, $sw: 1.0);
        // add spacing between arrow and label
        &:dir(ltr) { padding-left: rem(4px, $sw: 1.0); }
        &:dir(rtl) { padding-right: rem(4px, $sw: 1.0); }
      }
    }
  }

  > grid.vertical > box.vertical widget,
  grid.math-buttons {
    button {
      min-width: rem(13.3px);
      min-height: rem(13.3px);
      padding: rem(10.7px) rem(13.3px) rem(10.7px);
      border-radius: 2px;
      font-weight: 700;

      &:not(.suggested-action) {
        @include button(flat-normal);
        &:hover { @include button(flat-hover); }
        &:active { @include button(flat-active); }
        &:disabled { @include button(flat-insensitive); }
        &:checked { @include button(flat-checked); }
        &:checked:disabled { @include button(flat-checked-insensitive); }
      }

      &.suggested-action {  // '=' button
        border-radius: 100px;
        -gtk-outline-radius: 100px;

        &:hover {
          background-color: mix($selected_fg_color, $suggested_color, 10%);
        }
        &:active {
          background-color: $selected_bg_color;
        }

        &,
        &:hover,
        &:active,
        &:checked { box-shadow: none; }
      }
    }
  }
}


// /*********
//  * Gedit *
//  *********/

.gedit-bottom-panel-paned {
  .gedit-search-slider {
    @extend %osd_toolbar;
    opacity: 0.9;

    entry,
    .linked > entry {
      padding: rem(5.3px) rem(8px) rem(6.7px);

      &,
      &.error,
      &.warning {
        color: $inverted_fg_color;
        caret-color: $inverted_fg_color;
        &:focus { color: $selected_fg_color; }
        &:disabled { color: $insensitive_inverted_fg_color; }
      }
    }

    button,
    .linked > button {
      min-width: rem($widget_size, $sw: 1.0);
      min-height: rem($widget_size, $sw: 1.0);
      padding: 0;
    }
  }

  notebook > header.top { // show drop-shadows
    @if $variant == light {
      box-shadow: inset 0 2px 2px -3px rgba(0, 0, 0, 0.29),
                  inset 0 5px 3px -5px rgba(0, 0, 0, 0.57),
                  inset 0 -1px $borders_color;
    }
    @else {
      box-shadow: inset 0 2px 2px -3px rgba(0, 0, 0, 0.26),
                  inset 0 5px 3px -5px rgba(0, 0, 0, 0.39),
                  inset 0 -1px $borders_color;
    }

    tab.reorderable-page {
      &:hover {
        @if $variant == light {
          box-shadow: inset 0 2px 2px -3px rgba(0, 0, 0, 0.29),
                      inset 0 5px 3px -5px rgba(0, 0, 0, 0.57),
                      inset 0 -1px $borders_color;
        }
        @else {
          box-shadow: inset 0 2px 2px -3px rgba(0, 0, 0, 0.26),
                      inset 0 5px 3px -5px rgba(0, 0, 0, 0.39),
                      inset 0 -1px $borders_color;
        }
      }
      &:checked {
        @if $variant == light {
          box-shadow: -1px 0 2px rgba(0, 0, 0, 0.02),
                      -1px 0 4px rgba(0, 0, 0, 0.02),
                      1px 0 2px rgba(0, 0, 0, 0.02),
                      1px 0 4px rgba(0, 0, 0, 0.02),
                      inset 0 2px 2px -3px rgba(0, 0, 0, 0.29),
                      inset 0 5px 3px -5px rgba(0, 0, 0, 0.57),
                      inset 0 -1px $borders_color;
        }
        @else {
          box-shadow: -1px 0 2px rgba(0, 0, 0, 0.02),
                      -1px 0 4px rgba(0, 0, 0, 0.03),
                      1px 0 2px rgba(0, 0, 0, 0.02),
                      1px 0 4px rgba(0, 0, 0, 0.03),
                      inset 0 2px 2px -3px rgba(0, 0, 0, 0.26),
                      inset 0 5px 3px -5px rgba(0, 0, 0, 0.39),
                      inset 0 -1px $borders_color;
        }
      }
    }
  }
}

paned.titlebar.horizontal {
  headerbar {
    button.flat.toggle.popup:not(.image-button) { // left-pane header button
      min-height: $icon_size * 1.5;
      padding-top: if($ref_weight < 1.0,
                   rem(($widget_size - $icon_size * 1.5 - 2px) / 2),
                   rem(($widget_size - $icon_size * 1.5) / 2));
      padding-bottom: if($ref_weight < 1.0,
                      rem(($widget_size - $icon_size * 1.5 - 2px) / 2),
                      rem(($widget_size - $icon_size * 1.5) / 2));
      border-radius: 2px;
      -gtk-outline-radius: 2px;

      box > .title {
        padding: 0; // remove lateral padding
        margin: rem(-2px) 0;
        color: $inverted_secondary_fg_color;
      }

      &:hover,
      &:active,
      &:checked {
        box > .title { color: $inverted_fg_color; }
      }
    }
  }
}

overlay > box.vertical > paned.horizontal > box.vertical {
  statusbar { // inline-toolbar styling
    padding: rem(2.7px);
    border-style: solid;
    border-width: 1px 0 0;
    border-color: $borders_color;
    background-color: $secondary_dark_color;
    box-shadow: if($variant == light, $inline-shadow-light,
                                      $inline-shadow-dark);
  }
}

.gedit-side-panel-paned.horizontal {
  // gradient separator
  separator {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.24),
                                                 rgba(0, 0, 0, 0.11) 2px,
                                                 rgba(0, 0, 0, 0.05) 4px,
                                                 rgba(0, 0, 0, 0.05));
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 1px auto;
  }

  // 'file-browser' pane
  > box.vertical > stack > grid.horizontal {
    @extend %sidebar_template;
    padding: rem(2.7px);
    background-image: if($variant == light, $fake-shadow-light,
                                            $fake-shadow-dark);

    > box.horizontal {  // header-part
      margin: rem(4px) 0;

      button.image-button.small-button {
        // FIXME: why does gedit break our geometry everytime?
        min-width: $icon_size + 4px;
        min-height: $icon_size + 4px;
        padding: rem(5.3px);
        border-radius: 2px;
        -gtk-outline-radius: 2px;
      }

      .linked > .small-button { min-height: $icon_size + 4px; }

      button.popup.small-button.toggle {
        min-height: $icon_size + 4px;
        padding: rem(5.3px);
      }
    }

    > scrolledwindow { // raised widget
      margin: rem(5.3px);
      border-radius: 2px;
      box-shadow: $z-depth-1;
    }
  }
}

.gedit-document-panel { // 'documents' pane
  @extend %sidebar_template;
  background-image: if($variant == light, $fake-shadow-light,
                                          $fake-shadow-dark);

  row.activatable {
    color: $secondary_fg_color;
    background-color: transparent;
    font-weight: 500;
    &:hover { color: $fg_color; }
    &:selected {
      color: $selected_bg_color;
      background-color: transparent;

      label { color: $selected_bg_color; }

      button {
        color: gtkopacity($selected_bg_color, 0.87);
        &:hover,
        &:active { color: $selected_bg_color; }
      }
    }

    // 'close' button
    widget > box.horizontal > button.flat.small-button {
      min-height: $icon_size;
      min-width: $icon_size;
      margin: rem(2.7px);
      padding: rem(5.3px);
      border-radius: 100px;
      -gtk-outline-radius: 100px;
    }
  }
}


// /*****************
//  * Gnome-Builder *
//  *****************/

// styling for editor search
frame.gb-search-frame {
  background-image: image($bg_color);
  padding: rem(6px);
  border-style: solid;
  border-color: $borders_color;
  border-width: 0 1px 1px;
  border-radius: 0;

  border { border: none; }
}

.gb-search-entry-occurrences-tag {
  color: $insensitive_fg_color;
  margin: rem(2px);
  padding: rem(2px);
  border-width: 0;
}

// Tweaks for the editortweak popover in the editor.
editortweak {
  button { padding: 0 rem(6px) 0 rem(6px); }

  list row { padding: 0; }
}

// Keep search bar and layouttab height in sync.
layouttabbar > box { min-height: rem(39px); }

eggsearchbar > revealer > box { min-height: rem(39px); }

eggsearchbar entry { min-height: rem(24px); }

// Pillbox is used to render "languages" in the greeter.
pillbox {
  border-radius: 2px;
  background-color: $bg_color;
}

// Styling in the genesis (create project) perspective.
genesisperspective stack > box:first-child list row {
  padding: rem(10px);
  border-bottom: 1px solid $solid_light_borders_color;
  &:last-child { border-bottom: none; }
}

// Layout tab and tab bar tweaks
//
// The following makes the layout stack header look similar to a tab bar.
layouttabbar {
  min-height: rem(37.3px);
  padding: rem(5.3px);
  border-bottom: 1px solid $solid_light_borders_color;
  background-color: $secondary_dark_color;
  background-image: if($variant == light, $fake-shadow-light,
                                          $fake-shadow-dark);

  box.horizontal > button {
    &, &.popup.toggle {
      @extend %button_flat_normal;
      margin: 4px;
      padding: rem(4px) rem(5.3px) rem(5.3px);
      border-radius: 2px;
      background-color: transparent;
      &:hover { @include button(flat-hover); }
      &:active { @include button(flat-active); }
      &:disabled { @include button(flat-insensitive); }
      &:checked { // draw underline
        border-image: -gtk-gradient(radial,
                                    center bottom, 0,
                                    center bottom, 0.5,
                                    to($selected_bg_color),
                                    to(transparent))
                                    0 0 2 / 0 0 2px;
        background-color: transparent;
        color: $fg_color;
      }
      &:checked:disabled { @include button(flat-checked-insensitive); }
    }
  }
}

layouttab {
  margin: 4px;
  padding: rem(5.3px);
  background-color: transparent;

  label { padding: rem(4px); }

  separator.vertical {
    margin: 0 rem(2.7px); // expand vertically
    background-color: $borders_color;
  }

  button {
    &, &.popup.toggle {
      @extend %button_flat_normal;
      margin: 4px;
      border-radius: 2px;
      padding-left: rem(5.3px);
      padding-right: rem(5.3px);
      background-color: transparent;
      &:hover { @include button(flat-hover); }
      &:active { @include button(flat-active); }
      &:disabled { @include button(flat-insensitive); }
      &:checked { // draw underline
        border-image: -gtk-gradient(radial,
                                    center bottom, 0,
                                    center bottom, 0.5,
                                    to($selected_bg_color),
                                    to(transparent))
                                    0 0 2 / 0 0 2px;
        background-color: transparent;
        color: $fg_color;
      }
      &:checked:disabled { @include button(flat-checked-insensitive); }
    }
  }

  // close button styling for layouttab.
  > box > button.close {
    @extend %button_flat_normal;
    min-height: rem(13.3px);
    min-width: rem(13.3px);
    padding: rem(6.7px);
    border-radius: 100px;
    -gtk-outline-radius: 100px;
    &:hover { @include button(flat-hover); }
    &:active { @include button(flat-active); }
    &:disabled { @include button(flat-insensitive); }
  }
}

%builder_gradient_separator {
  // draw vertically gradient pane-separators
  @if $variant == light {
    border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.32),
                                             rgba(0, 0, 0, 0.21) 2px,
                                             rgba(0, 0, 0, 0.09) 4px,
                                             rgba(0, 0, 0, 0.09))
                  0 1 0 / 0 1px 0 stretch;
  }
  @else {
    border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.24),
                                             rgba(0, 0, 0, 0.16) 2px,
                                             rgba(0, 0, 0, 0.11) 4px,
                                             rgba(0, 0, 0, 0.11))
                  0 1 0 / 0 1px 0 stretch;
  }
}

layout {
  // draw vertically gradient pane-separators
  @extend %builder_gradient_separator;
  // hide top/bottom pane-separator
  border-width: 0 1px 0;
  border-style: none solid none;
  border-color: $solid_light_borders_color;
  // revive top-edge border with box-shadow
  box-shadow: inset 0 -1px $solid_light_borders_color;

  -PnlDockBin-handle-size: 1;
}

// multi-columned editor-views
layoutgrid > paned.horizontal separator:not(.vertical),
layoutgrid > paned.horizontal > paned.horizontal separator:not(.vertical) {
  // draw vertically gradient pane-separators
  @extend %builder_gradient_separator;
}

eggsearchbar box.search-bar {
  background-color: $secondary_dark_color;
}

%omnibar_entry {
  > entry { // unset spacing
    padding: unset;
    border: none;

    > widget { // add actual spacing
      min-height: $icon_size * 1.5;
      padding: if($ref_weight < 1.0,
               rem(($widget_size - $icon_size * 1.5 - 2px) / 2),
               rem(($widget_size - $icon_size * 1.5) / 2));
    }
  }

  // enforce inverted label colour
  &:not(:hover):not(:active) > entry {
    background-image: image($inverted_dark_color);
    caret-color: $inverted_secondary_fg_color;

    &,
    label { color: $inverted_secondary_fg_color; }

    widget {
      border-image:
        radial-gradient(circle farthest-corner at center,
                        gtkopacity($inverted_secondary_fg_color, 0.2) 100%,
                        transparent)
                        0 0 1 / 0 0 1px;
    }
  }

  &:hover > entry {
    background-image: image($inverted_dark_color);
    caret-color: $inverted_fg_color;

    &,
    label { color: $inverted_fg_color; }

    widget {
      border-image:
        radial-gradient(circle farthest-corner at center,
                        gtkopacity($inverted_fg_color, 0.2) 100%,
                        transparent)
                        0 0 1 / 0 0 1px;
    }
  }

  &:active > entry {
    &, &:focus {
      background-image: image($inverted_dark_color);
      caret-color: $inverted_fg_color;

      &,
      label { color: $inverted_fg_color; }

      widget {
        border-image:
          radial-gradient(circle farthest-corner at center,
                          $selected_bg_color 100%,
                          transparent)
                          0 0 2 / 0 0 2px;
      }
    }
  }
}

omnibar.linked {
  &, // fullscreen-mode (>= 3.28)
  .titlebar & { @extend %omnibar_entry; } // window-ed mode
}

%tabstrip {
  min-height: rem(34.7px);
  padding: rem(5.3px) rem(16px);
  border-bottom: 1px solid $solid_light_borders_color;
  background-color: $secondary_dark_color;
  background-image: if($variant == light, $fake-shadow-light,
                                          $fake-shadow-dark);

  // remove fake-shadow from bottom tabstrip
  layoutpane.bottom & { background-image: none; }
}

%tabstrip_tab {
  color: $tertiary_fg_color;
  font-weight: 700;
  box-shadow: inset 0 -1px $outline_track_color;
  &:hover {
    color: $fg_color;
    box-shadow: inset 0 -2px $outline_track_color;
  }
  &:checked {
    color: $fg_color;
    box-shadow: inset 0 -2px $selected_bg_color;
  }
}

tabstrip,
docktabstrip { @extend %tabstrip; }

tabstrip tab,
docktabstrip docktab { @extend  %tabstrip_tab; }

dockstack > stack { // treeviews inside the left/right layoutpane
  > dockwidget treeview.project-tree.view,
  > devhelppanel treeview.view {
    background-color: $bg_color;
    font-weight: 500;
    &:selected, // use standard selection styling
    &:selected:focus { @extend %selected_items; }
  }
}

headerbar > box > box.linked {
  > button.image-button.popup.toggle {
    &.run-arrow-button { // revert to rectangular button
      border-radius: 2px;
      -gtk-outline-radius: 2px;
    }
  }
}

popover {
  > list > row.activatable > box.horizontal {
    > label { // add lateral gaps
      &:dir(ltr) { margin-left: rem(8px); }
      &:dir(rtl) { margin-right: rem(8px); }
    }
  }

  // use action-area style buttons
  box.popover-action-area button { @extend %action-area-button; }
}

greeter > box.vertical > stack { // draw fake-shadows
  > box.vertical > stack > box.vertical > scrolledwindow,
  createprojectwidget > scrolledwindow {
    background-image: if($variant == light, $fake-shadow-light,
                                            $fake-shadow-dark);
  }

  // project selections
  > box.vertical > stack > box.vertical > scrolledwindow {
    frame > list {
      // override shared.css
      row.activatable:not(:last-child) {
        border-image: image($borders_color) 0 0 1 / 0 0 1px;
      }
    }
  }
}

preferences > box.horizontal {
  > box.vertical,
  > scrolledwindow {
    background-image: if($variant == light, $fake-shadow-light,
                                            $fake-shadow-dark);
  }

  > box.vertical { // side-pane
    @extend %sidebar_template;
    &:dir(ltr) { // move stacksidebar shadows to the parent box
      border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.24),
                                               rgba(0, 0, 0, 0.11) 2px,
                                               rgba(0, 0, 0, 0.05) 4px,
                                               rgba(0, 0, 0, 0.05))
                    0 1 0 0 / 0 1px 0 0 stretch;
    }
    &:dir(rtl) {
      border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.24),
                                               rgba(0, 0, 0, 0.11) 2px,
                                               rgba(0, 0, 0, 0.05) 4px,
                                               rgba(0, 0, 0, 0.05))
                    0 0 0 1 / 0 0 0 1px stretch;
    }

    > entry { margin: 0 4px; } // stop touching L/R edges

    > stacksidebar.sidebar {
      &, list { box-shadow: none; } // unset sidebar-shadows

      list {
        background-color: transparent;

        // enlarge padding
        row.activatable { padding: rem(9.3px) rem(13.3px) rem(10.7px); }
      }
    }
  }

  preferencesgroup {
    > box.vertical > label { // titles
      color: $tertiary_fg_color;
      font-weight: 700;
    }

    scrolledwindow > viewport.frame > list {
      // override shared.css
      row.activatable:not(:last-child) {
        border-image: image($base_color) 0 0 1 / 0 0 1px;
      }
    }
  }
}

// info-bars beneath GtkHeaderBar
window.background.workbench box.message-box.vertical {
  // hide bottom border
  infobar.horizontal { border-bottom-width: 0; }
}

// 3.25.9x
stack.titlebar#titlebar_container > stack > headerbar { // needs full-path
  > box.horizontal > box.linked.horizontal > button.toggle {
    border-radius: 2px; // revert to square buttons
    -gtk-outline-radius: 2px;

    image { padding: 0; }
  }
}

ide {
  // left-pane sidebar?
  &editorsidebar {
    @extend %sidebar_template;
    background-image: image($secondary_dark_color);
    &.left { margin-right: -1px; } // override upstream CSS
    &.right { margin-left: -1px; }
  }

  &layoutgridcolumn { /// main container of eidtor-pane
    // draw vertically gradient pane-separators
    @extend %builder_gradient_separator;
    &:dir(ltr) { border-image-slice: 0 0 0 1; }
    &:dir(rtl) { border-image-slice: 0 1 0 0; }
  }

  // editor-pane headers?
  &layoutstackheader { // damned upstream CSS
    border-bottom: 1px solid $borders_color;
    box-shadow: inset 0 0 0 26px gtkopacity($fixed_base_color, 0.05);

    button {
      min-width: 26px;
      min-height: 26px;

      label { padding-bottom: rem(1.3px, $sw: 1.0); }
    }
  }
}

dzl {
  &multipaned {
    > box.vertical {
      // draw borders for pane-grip
      border-top: 1px solid $borders_color;
    }

    // 'open-pages' list
    list.open-pages { background-color: transparent; }

    // no need to highlighten headers
    buildpanel notebook > header.top { background-color: transparent; }
  }

  &dockpaned > box.vertical { // main container of left-pane
    background-image: if($variant == light, $fake-shadow-light,
                                            $fake-shadow-dark);
  }

  &menubuttonsection { // child elements in their GtkPopovers
    // kill ugly upstream CSS's parent margins
    &:only-child { margin: -6px; }
    &:first-child { margin: -6px -6px 0; }
    &:last-child { margin: 0 -6px -6px; }
  }

  &preferencesview {
    entry.preferences-search.search {
      // add 1px bottom shadow as a border
      box-shadow: inset 0 -1px $borders_color;
    }

    stacksidebar.sidebar viewport.frame > list {
      @extend %sidebar_template;
      background-image: image($secondary_dark_color);

      row.activatable { padding: rem(9.3px) rem(13.3px) rem(10.7px); }
    }
  }
}

popover.messagepopover {
  // use action-area style buttons
  box.popover-content-area button {
    @extend %action-area-button;
    // desired negative margin breaks builder 3.22 theming...
    // margin: -12px;
  }
}

window.background.workbench > popover.menu { // right-most popover
  > stack { // reduce embedded margins more
    margin: -(12px - 2px) -12px -12px;
  }
}

button.dzlmenubuttonitem.check { // menuitem buttons
  transition-duration: 0s; // unset transition
  font-weight: 400; // reset weight

  box > image { opacity: 0.87; }

  label { padding: rem(5.3px) 0 rem(6.7px); }

  // :checked inside the popover menus!?
  &:checked label { // keep default label colour
    color: $secondary_fg_color;

    &.dim-label { color: $secondary_fg_color; }
  }
}


// /***************
//  * Gnome-Music *
//  ***************/

// side-bar styling
.side-panel {
  .view {
    &,
    row.activatable { font-weight: 500; }
  }
}

// right-pane of AlbumWidget
.discsongsflowbox > flowboxchild {
  // increase the vertical spacing
  margin: rem(5.3px, $sw: 1.0) 0;

  check:only-child { // 'songs' selection-mode check
    margin: 0;
    padding: 0;
    animation: none; // unset animations
  }
}


// /******************
//  * Gnome-Contacts *
//  ******************/

.contacts-left-header-bar {
  &:dir(ltr) {
    border-right-width: 0; // hide hard-coded ugly separator
    border-right-style: none;
    // FIXME: swapped left/right?
    box-shadow: if($variant == light, $sub-header-shadow-light-rtl,
                                      $sub-header-shadow-dark-rtl);
  }
  &:dir(rtl) {
    border-left-width: 0;
    border-left-style: none;
    box-shadow: if($variant == light, $sub-header-shadow-light-ltr,
                                      $sub-header-shadow-dark-ltr);
  }

  &.selection-mode {
    &:dir(ltr) {
      border-right-width: 0;
      border-right-style: none;
      box-shadow: if($variant == light, $selected-header-shadow-light-rtl,
                                        $selected-header-shadow-dark-rtl);
    }
    &:dir(rtl) {
      border-left-width: 0;
      border-left-style: none;
      box-shadow: if($variant == light, $selected-header-shadow-light-ltr,
                                        $selected-header-shadow-dark-ltr);
    }
  }
}

// side-bar styling
window overlay > grid > frame > grid {
  toolbar.primary-toolbar { box-shadow: none; }

  scrolledwindow > viewport.frame { @extend %sidebar_template; }
}

list.contacts-view, // legacy
list.contacts-contact-list { // >= 3.27.90
  row.activatable {
    color: $secondary_fg_color;
    font-weight: 500;
    &:hover { color: $fg_color; }
    &:selected {
      background-color: transparent;

      &, label { color: $selected_bg_color; }
    }
  }
}

list.contacts-contact-list { border-top: 1px solid $borders_color; }

list.contacts-view {
  // hide horizontal separator
  separator {
    min-height: 0;
    border-color: transparent;
    background-color: transparent;
  }
}

// bottom-paned actionbar
notebook > stack > grid.vertical > actionbar,
stack > overlay > grid.horizontal > overlay > stack actionbar, // >= 3.26
overlay > stack > box.horizontal > grid > actionbar { // >= 3.28.90
  revealer > box.horizontal {
    // 'New Detail' button
    button.popup.toggle:not(.image-button):not(.text-button) {
      border-radius: 2px;
      -gtk-outline-radius: 2px;
    }
  }
}


// /**********
//  * Evince *
//  **********/

window.background {
  > box.vertical > box.horizontal {
    > widget > label { // annotation title
      color: $fixed_fg_color;
      font-weight: 700;
    }
  }
}

// plugin mode in Ephy
window.background > widget > window.background > box.vertical {
  > toolbar.horizontal {
    border-top: 1px solid $borders_color;
    background-color: $secondary_dark_color;

    .linked.raised > button.image-button { // reset image spacing
      min-width: $icon_size;

      image { padding: 0; }
    }
  }

  > scrolledwindow {
    scrollbar {
      &,
      &.overlay-indicator,
      trough {
        background-color: $bg_color;
        transition: none;
      }

      slider { transition: none; }
    }

    evview.content-view.view { transition: none; }
  }
}


// /**************
//  * Gnome-Logs *
//  **************/

// titles inside the button!?
headerbar > button.flat.popup.title-menu-button.toggle {
  border-radius: 2px;
  -gtk-outline-radius: 2px;

  > grid {
    .title {
      margin: rem(-2.7px) 0;
      padding: rem(1.3px) rem(13.3px) 0;
      font-size: if($ref_weight < 1.0, 90%, 100%);
    }
    .subtitle {
      margin: rem(-2.7px) 0;
      padding: 0 rem(13.3px) rem(1.3px);
      font-size: if($ref_weight < 1.0, 80%, 90%);
    }
  }
}

window.background > box.vertical box.horizontal {
  list.categories { // side-pane
    @extend %sidebar_template;
    border: none;
    color: $secondary_fg_color;

    row.activatable.category { // use side-bar styling
      // paddings in row were hard-coded with crazy large values...
      // padding: rem(2.7px) rem(8px) rem(4px);
      color: $secondary_fg_color;
      background-color: transparent;
      font-weight: 500;
      &:hover { color: $fg_color; }
      &:selected {
        color: $selected_bg_color;
        background-color: transparent;

        label { color: $selected_bg_color; }
      }

      > label {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }

  > box.vertical > scrolledwindow > viewport.frame > list { // right-pane
    > separator {
      background-color: transparent; // hide single-line separators

      &.compressed-rows-group-separator { // use opaque colour
        background-image : image($solid_light_borders_color);
      }
    }

    // > 3.25.90
    row.event.activatable {
      color: $secondary_fg_color;
      transition-duration: 0.1s;
      &:hover,
      &:active { color: $fg_color; }

      label.compressed-entries-label { // hard-coded background-color?
        background-image: image($suggested_color);
        color: $selected_fg_color;
        font-weight: 700;
      }

      &.compressed-row {
        background-image: image($secondary_dark_color);
        color: $fg_color;
        transition-property: opacity, // exclude background-color
                             border-image,
                             background-image,
                             box-shadow;
        &:hover {
          background-image: image(mix($fg_color, $secondary_dark_color, 5%));
          color: $fg_color;
        }
        &:active {
          &, &:focus {
            background-image: image(mix($fg_color,
                                        $secondary_dark_color, 10%));
            color: $fg_color;
            animation: none;
          }
        }

        &.popover-activated-row {
          background-image: image($selected_bg_color);
          color: $selected_fg_color;
        }

        &-header {
          background-image: image($base_color); // stop highlighting
          color: $selected_bg_color;
          &:hover {
            background-image: image(mix($selected_bg_color,
                                        $base_color, 5%));
          }
          &:active {
            &, &:focus {
              background-image: image(mix($selected_bg_color,
                                          $base_color, 10%));
              color: $selected_bg_color;
              animation: none;
            }
          }

          label.compressed-entries-label {
            background-image: image($selected_bg_color);
            color: $selected_fg_color;
            transition-duration: 0s;
          }
        }
      }
    }
  }
}


// /******************
//  * Gnome-Terminal *
//  ******************/

%ssd_notebook_shadow {
  @if $variant == light {
    box-shadow: inset 0 2px 2px -3px rgba(0, 0, 0, 0.29),
                inset 0 5px 3px -5px rgba(0, 0, 0, 0.57),
                inset 0 -1px $borders_color;
  }
  @else {
    box-shadow: inset 0 2px 2px -3px rgba(0, 0, 0, 0.26),
                inset 0 5px 3px -5px rgba(0, 0, 0, 0.39),
                inset 0 -1px $borders_color;
  }

  tab.reorderable-page {
    &:hover {
      @if $variant == light {
        box-shadow: inset 0 2px 2px -3px rgba(0, 0, 0, 0.29),
                    inset 0 5px 3px -5px rgba(0, 0, 0, 0.57),
                    inset 0 -1px $borders_color;
      }
      @else {
        box-shadow: inset 0 2px 2px -3px rgba(0, 0, 0, 0.26),
                    inset 0 5px 3px -5px rgba(0, 0, 0, 0.39),
                    inset 0 -1px $borders_color;
      }
    }
    &:checked {
      @if $variant == light {
        box-shadow: -1px 0 2px rgba(0, 0, 0, 0.02),
                    -1px 0 4px rgba(0, 0, 0, 0.02),
                    1px 0 2px rgba(0, 0, 0, 0.02),
                    1px 0 4px rgba(0, 0, 0, 0.02),
                    inset 0 2px 2px -3px rgba(0, 0, 0, 0.29),
                    inset 0 5px 3px -5px rgba(0, 0, 0, 0.57),
                    inset 0 -1px $borders_color;
      }
      @else {
        box-shadow: -1px 0 2px rgba(0, 0, 0, 0.02),
                    -1px 0 4px rgba(0, 0, 0, 0.03),
                    1px 0 2px rgba(0, 0, 0, 0.02),
                    1px 0 4px rgba(0, 0, 0, 0.03),
                    inset 0 2px 2px -3px rgba(0, 0, 0, 0.26),
                    inset 0 5px 3px -5px rgba(0, 0, 0, 0.39),
                    inset 0 -1px $borders_color;
      }
    }
  }
}

terminal-window {
  // FIXME: In XWayland mode, downstream 'transparency' patch causes
  // solid outer margin artifact when users keep enabling transparent
  // background.
  &.csd.background { background-color: transparent; }

  &.background:not(.csd),
  vte-terminal { // set the same background with decorations
    background-color: $inverted_dark_color;
    color: $inverted_fg_color;
  }

  vte-terminal,
  notebook { // unset unneeded transitions
    transition-duration: 0s;
  }

  notebook > header.top { // show drop-shadows
    @extend %ssd_notebook_shadow;
  }

  scrollbar { // always use dark-variant
    background-color: gtkopacity($inverted_base_color, 0.55);

    slider {
      background-color: gtkopacity($inverted_fg_color, 0.55 * 0.5);
      &:hover {
        background-color: gtkopacity($inverted_secondary_fg_color, 0.55);
      }
      &:active { background-color: $inverted_fg_color; }
    }
  }
}

window.background:not(.csd) { // preferences window (>= 3.28)
  box.horizontal > frame > scrolledwindow > viewport.frame > list {
    > row.activatable {
      padding: 0; // unset padding;

      > box.horizontal > label { // indentations
        &:dir(ltr) { margin-left: rem(13.3px, $sw: 1.0); }
        &:dir(rtl) { margin-right: rem(13.3px, $sw: 1.0); }
      }

      > box.horizontal > stack > button.popup.toggle {
        min-width: $icon_size;
        min-height: $icon_size;
        padding: rem(6.7px);
        border-radius: 100px;
        -gtk-outline-radius: 100px;
      }
    }

    > box.horizontal {
      label { color: $tertiary_fg_color; } // titles

      > stack > button.image-button {
        min-width: $icon_size;
        min-height: $icon_size;
        padding: rem(6.7px);
      }
    }
  }
}


// /*****************
//  * Gnome-Weather *
//  *****************/

frame#locations-frame > border { // hide double borders
  border: none;
}

frame#weather-page-content-view {
  .linked.osd.stack-switcher {
    background: transparent;

    > button.radio.text-button { // remove underlines
      border-image: none;
      &:hover,
      &:active { border-image: none; }
      &:checked {
        border-image: -gtk-gradient(radial,
                                    center bottom, 0,
                                    center bottom, 0.5,
                                    to(currentColor),
                                    to(transparent))
                                    0 0 2 / 0 0 2px;
      }
      &:disabled { border-image: none; }
    }
  }

  button.osd {
    @extend %button_flat_normal;
    min-width: $icon_size;
    min-height: $icon_size;
    padding: rem($icon_size);
    border-radius: 100px;
    -gtk-outline-radius: 100px;
    background-color: transparent;
    &:hover { @extend %button_flat_hover; }
    &:active { @extend %button_flat_active; }
    &:checked { @extend %button_flat_checked; }
  }

  frame#weekly-forecast-frame { background: transparent; }
}

frame#weather-page-content-view { // condition-specific
  @each $_condition,
        $_label_1_color,
        $_label_2_color,
        $_frame_mask,
        $_label_alpha,
        $_mask_alpha,
        $_mix_pct in
  (clear,
    $fixed_fg_color, $selected_fg_color, $selected_fg_color,
    0.5, 0.1, 100%),
  (few-clouds,
    $fixed_fg_color, $selected_fg_color, $selected_fg_color,
    0.5, 0.1, 10%),
  (showers,
    $selected_fg_color, $fixed_fg_color, $fixed_fg_color,
    0.75, 0.1, 50%),
  (showers-scattered,
    $selected_fg_color, $fixed_fg_color, $fixed_fg_color,
    0.75, 0.1, 50%),
  (storm,
    $selected_fg_color, $fixed_fg_color, $fixed_fg_color,
    0.75, 0.1, 50%),
  (overcast,
    $fixed_fg_color, $selected_fg_color, $inverted_fg_color,
    0.75, 0.5, 75%),
  (fog,
    $fixed_fg_color, $selected_fg_color, $inverted_fg_color,
    0.75, 0.5, 75%),
  (snow,
    $selected_fg_color, $link_color, $selected_fg_color,
    0.5, 0.1, 80%),
  (few-clouds-night,
    $selected_fg_color, $link_color, $selected_fg_color,
    0.5, 0.1, 80%),
  (clear-night,
    $inverted_accent_label_color, $selected_fg_color, $selected_fg_color,
    0.75, 0.1, 100%) {

    &.weather-#{$_condition} {
      button.radio.text-button,
      button.osd {
        color: gtkopacity($_label_1_color, $_label_alpha);
        &:hover,
        &:active,
        &:checked { color: #{$_label_1_color}; }
      }

      frame#weekly-forecast-frame {
        background-image: image(gtkopacity($_frame_mask, $_mask_alpha));

        * { color: mix($_label_1_color, $_label_2_color, $_mix_pct); }
      }
    }
  }
}


// /**************
//  * Gnome-Todo *
//  **************/

window headerbar > box.horizontal:not(.linked) {
  // 'new-list' text-button
  > button.toggle.popup {
    &:not(.text-button):not(.image-button):not(.icon):not(.appmenu) {
      border-radius: 2px;
      -gtk-outline-radius: 2px;
      font-weight: 700;

      > label { padding: 0 rem(8px); }
    }
  }

  > button:not(.image-button):not(.text-button) {
    &:not(.toggle):not(.popup):not(.color):not(.titlebutton) {
      &:not(.destructive-action):not(.suggested-action) {
        // 'list/grid' view changer
        min-width: $icon_size * 1.5;
        min-width: $icon_size * 1.5;
        padding: if($ref_weight < 1.0,
                 rem(($widget_size - $icon_size * 1.5 - 2px) / 2),
                 rem(($widget_size - $icon_size * 1.5) / 2));
      }
    }
  }

  > button.color {
    &:not(.destructive-action):not(.suggested-action) {
      // force using square-button
      min-width: $icon_size + 8px;
      min-height: $icon_size;
      padding: rem(($widget_size - $icon_size - 2.7px) / 2);
      border-radius: 2px;
      -gtk-outline-radius: 2px;
    }
  }
}

window > popover > stack > grid > button.text-button {
  // prevent unwanted truncation of drop-shadows
  margin: 2px 6px 12px;
}


// /************
//  * Gtk-Demo *
//  ************/

.background.csd > box.horizontal > frame > scrolledwindow {
  // side-bar styling
  @extend %sidebar_template;

  treeview.view { @extend %sidebar_treeview; }
}


// /***************
//  * Gnome-Disks *
//  ***************/

.background.csd > box.vertical > paned.horizontal > scrolledwindow,
.background.solid-csd > box.vertical > paned.horizontal > scrolledwindow {
  // side-bar styling
  @extend %sidebar_template;

  treeview.view { @extend %sidebar_treeview; }
}


// /************************
//  * Gnome-Control-Center *
//  ************************/

// keyboard section
// employ flat-destructive style
button.image-button.reset-shortcut-button {
  // remove fill-area and ripple-effect at all
  color: gtkopacity($destructive_color, 0.87);
  background-color: transparent;
  transition-property: opacity,
                       border-color,
                       border-image,
                       background-color,
                       background-image,
                       color;
  &:hover {
    color: $destructive_color;
    background-color: transparent;
    background-image: none;
  }
  &:active {
    color: $selected_bg_color;
    background-color: transparent;
    background-image: none;
    animation: none;
  }
  &:checked {
    color: $selected_bg_color;
    background-color: transparent;
    &:disabled {
      color: gtkopacity($selected_bg_color, 0.4);
      background-color: transparent;
    }
  }
  &:disabled {
    color: gtkopacity($destructive_color, 0.4);
    background-color: transparent;
  }
}

// users section
stack > box.vertical widget overlay grid.horizontal > stack {
  // prevent unwatend truncation of shadows
  padding: 8px 8px 16px;
}

// carousel widgets
.carousel-arrow-container.bottom.horizontal {
  // prevent double density border
  margin-bottom: -1px;
}

// > 3.25.90
scrolledwindow.view > viewport.frame > stack > list { // left-pane
  @extend %sidebar_template;

  > row.activatable {
    padding: 0; // unset padding
    color: $secondary_fg_color;
    font-weight: 500;

    image.dim-label { opacity: 0.87; } // tone up icons

    label,
    image { color: $secondary_fg_color; }

    &:hover,
    &:active {
      color: $fg_color;

      label,
      image { color: $fg_color; }
    }

    &:selected {
      background-color: transparent;
      color: $selected_bg_color;

      label,
      image { color: $selected_bg_color; }
    }
  }
}

box.horizontal.titlebar > headerbar > stack > box.vertical {
  > .title { margin: 0; }

  > .subtitle { margin: rem(-2.7px) 0; }
}

dialog.background.csd {
  > headerbar.titlebar {
    // FIXME: this is for incompetence Gnome-Control-Center's C code:
    //   panels/printers/pp-details-dialog.c
    // That code can neither compute any child allocations nor define .title
    // class...
    min-height: if($ref_weight < 1.0,
                  calc((0.27rem * 2) + (0.29rem * 2) + 24px - 1px),
                  calc((0.39rem * 2) + (0.49rem * 2) + 24px - 2px));

    > label:not(.title):not(.subtitle) {
      color: $inverted_fg_color;
      font-weight: 700;
    }
  }
}


// /*************
//  * Evolution *
//  *************/

window.background > box.vertical {
  > box.horizontal #main-toolbar { // main toolbar styling
    border-bottom: 1px solid $borders_color;
    box-shadow: if($variant == light, $toolbar-shadow-light,
                                      $toolbar-shadow-dark);
  }

  paned.horizontal > widget > notebook.switcher-visible { // side-pane styling
    widget > scrolledwindow {
      background-color: $secondary_dark_color;

      treeview.view {
        background-color: transparent;
        &:selected { @extend %selected_items; }
      }
    }
  }
}


// /****************
//  * Dconf-Editor *
//  ****************/

.dconf-editor > headerbar.titlebar {
  > box.pathbar {
    min-height: $icon_size;
    margin: rem(5.3px) 0;
    padding: 0 rem(8px);

    > button {
      min-height: $icon_size;
      margin: rem(5.3px) 0;
      padding: 0;
      border-radius: 2px;
      -gtk-outline-radius: 2px;

      > .item {
        min-height: $icon_size;
        margin: rem(-5.3px) 0;
        padding: rem(4px) rem(6px) rem(5.3px);
        border: 0 none transparent;
        color: $inverted_secondary_fg_color;
        font-weight: 700;
      }

      &:hover,
      &:active,
      &:checked,
      &.active { // '.active' class = :checked class
        color: $inverted_fg_color;

        > .item { color: $inverted_fg_color; }
      }
      &:disabled {
        color: $insensitive_inverted_fg_color;

        > .item { color: $insensitive_inverted_fg_color; }
      }

      // slash symbols
      > label { color: $insensitive_inverted_fg_color; }
    }
  }
}

.dconf-editor list.properties-list > row.activatable {
  &:hover,
  &:active { // unset hover/active effects
    background-image: none;
    animation: none;
  }
}

.dconf-editor list.keys-list { // >= 3.27.91
  > grid.horizontal > separator { // hide separators from folder views
    all: unset;
  }

  > row.key-row:not(:first-child) { // move separator lines into child rows
    border-top: 1px solid $borders_color;
  }

  > grid.vertical { // grid node for headers
    background-color: $bg_color;
  }
}


// /*******************
//  * Gnome-Documents *
//  *******************/

window.background > grid.horizontal.titlebar {
  // search-bar revealer
  searchbar {
    background-color: $inverted_dark_color;
    box-shadow: $toolbar-shadow-dark;
  }
}


// /********************
//  * Gnome-Characters *
//  ********************/

// side-pane styling
scrolledwindow > viewport.frame list.categories {
  @extend %sidebar_template;

  > row.category.activatable {
    font-weight: 500;
    &:selected {
      background-color: transparent;
      color: $selected_bg_color;

      image.category-icon,
      label.category-label { color: $selected_bg_color; }
    }
  }
}

// right-pane styling
scrolledwindow.character-list-scroll {
  > scrollbar { // always use light-variant
    background-color: transparent;

    slider {
      background-color: gtkopacity($tertiary_fixed_fg_color, 0.55);
      &:hover {
        background-color: gtkopacity($secondary_fixed_fg_color, 0.55);
      }
      &:active { background-color: $fixed_fg_color; }
      &:disabled { opacity: 0.4; }
    }

    &.overlay-indicator {
      &:not(.dragging):not(.hovering) slider {
        background-color: gtkopacity($tertiary_fixed_fg_color, 0.55);
      }
    }
  }
}


// /******************
//  * Gnome-Software *
//  ******************/

// get more uniformity for all 'All', 'Installed', 'Updates' buttons
buttonbox.linked > button.toggle.toolbar-primary-buttons-software {
  border-radius: 2px;
  -gtk-outline-radius: 2px;

  > box.horizontal > label.text-button { font-weight: 700; }

  &:hover,
  &:active,
  &:checked {
    color: $inverted_fg_color;

    > box.horizontal > label.text-button {
      color: $inverted_fg_color;
    }
  }
}

window.background > box.vertical > overlay > stack > widget > stack {
  // "Installed" stack
  > box.vertical > scrolledwindow > viewport.frame > widget > list {
    background-color: $bg_color; // override $base_color

    // use asymmetrical separators
    > separator {
      &:dir(ltr) { border-left: $icon_size * 6 solid transparent; }
      &:dir(rtl) { border-right: $icon_size * 6 solid transparent; }
    }
  }

  // "Updates" stack
  widget > box.vertical.app-list {
    // override $base_color
    background-image: image($bg_color);

    > box.vertical > list { background-color: $bg_color; }

    // use asymmetrical separators
    separator {
      &:dir(ltr) { border-left: $icon_size * 6 solid transparent; }
      &:dir(rtl) { border-right: $icon_size * 6 solid transparent; }
    }
  }
}

// sidebar-pane styling
scrolledwindow.category-sidebar.frame > viewport.frame > list {
  @extend %sidebar_template;
  margin-top: -4px; // hide weird header-gap

  > row.activatable {
    color: $secondary_fg_color;
    font-weight: 500;
    &:hover { color: $fg_color; }
    &:selected {
      color: $selected_bg_color;
      background-color: transparent;

      > label { color: $selected_bg_color; }
    }
  }
}

%gnome-software_round_button,
button.round-button { // categories expander button
  // > 3.25.90, dropped from upstream CSS
  min-height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 16px; // > 3.25.90
  -gtk-outline-radius: 16px;
}


// /****************
//  * Gnome-Photos *
//  ****************/

.photos-entry-tag { @extend .entry-tag; }


// /******************
//  * Gnome-Calendar *
//  ******************/

// 'year-view' sidebar
stack.view > calendar-view.year-view > box.vertical {
  background-color: $secondary_dark_color;
  &:dir(ltr) { // flip ltr/rtl shadow
    box-shadow: if($variant == light, $sidebar-light-rtl,
                                      $sidebar-dark-rtl);
  }
  &:dir(rtl) {
    box-shadow: if($variant == light, $sidebar-light-ltr,
                                      $sidebar-dark-ltr);
  }

  > stack { // unset presets
    > box.sidebar,
    > scrolledwindow > viewport.frame > list.sidebar {
      border: none;
      background-color: transparent;
      box-shadow: none;
    }
  }

  // enforce action-button styling for 'Add event...' button
  > button.text-button {
    @extend %button_flat_normal;
    background-color: transparent;
    color: $secondary_accent_label_color;
    font-weight: 700;
    &:hover {
      @extend %button_flat_hover;
      background-color: transparent;
      color: $accent_label_color;
    }
    &:active {
      @extend %button_flat_active;
      background-color: transparent;
      color: $accent_label_color;
    }
    &:disabled {
      @extend %button_flat_disabled;
      color: $insensitive_fg_color;
    }
    &:checked {
      @extend %button_flat_checked;
      background-color: transparent;
      color: $accent_label_color;
      &:disabled {
        @extend %button_flat_checked_disabled;
        background-color: transparent;
        color: gtkopacity($accent_label_color, 0.4);
      }
    }

    // add missing borders
    &:dir(ltr) { border-left: 1px solid $borders_color; }
    &:dir(rtl) { border-right: 1px solid $borders_color; }
  }
}

dialog.background {
  > headerbar.titlebar > button.flat.sources-button.popup.toggle {
    box.vertical { // optimize label spacing like gnome-logs
      > .title {
        margin: rem(-2.7px) 0;
        padding: rem(1.3px) rem(13.3px) 0;
        font-size: if($ref_weight < 1.0, 90%, 100%);
      }

      > .subtitle {
        margin: rem(-2.7px) 0;
        padding: 0 rem(13.3px) rem(1.3px);
        font-size: if($ref_weight < 1.0, 80%, 90%);
      }
    }
  }

  > box.dialog-vbox.vertical > grid.horizontal > revealer > box > box {
    // GcalTimeSelector buttons
    > button.popup.toggle {
      // prevent truncated drop-shadows
      margin: rem(4px) rem(5.3px) rem(10.7px);
    }
  }
}


// /*****************
//  * Gnome-Recipes *
//  *****************/

window.background > box.vertical > overlay > stack > box.vertical {
  > scrolledwindow > viewport.frame {
    button.tile.view {
      // prevent unwanted truncation of drop-shadows
      margin-bottom: rem(13.3px, $sw: 1.0);
      // revive ripple-effect
      &:active { @extend %button_active; }
    }

    box.vertical > label.heading { color: $selected_bg_color; }
  }
}

window.background > box.vertical > overlay > stack > box.horizontal {
  > stack > box.horizontal > scrolledwindow > viewport.frame {
    // right-pane scrolled-window
    > box.vertical > label.heading { color: $selected_bg_color; }

    // left-pane sidebar
    > list {
      @extend %sidebar_template;

      > row.activatable {
        background-color: transparent;
        color: $secondary_fg_color;
        box-shadow: none;

        > label.sidebar {
          box-shadow: unset; // unset .sidebar class shadows
          color: $secondary_fg_color;
          font-weight: 500;
        }

        &:hover,
        &:active {

          &, > label.sidebar { color: $fg_color; }
        }
        &:selected {
          background-color: transparent;

          &, > label.sidebar { color: $selected_bg_color; }
        }
      }
    }
  }
}

flowbox > flowboxchild > button.recipe.tile.view {
  // add outer spacing around those tiles
  // to prevent unwanted truncation of drop-shadows
  margin: if($ref_weight < 1.0, 6px, 8px);
}

// Note box
box.note > label { font-weight: 700; } // title

label.content.note { color: $fixed_fg_color; } // enforce dark label colour


// /***************
//  * Gnome-Usage *
//  ***************/

// FIXME: why was 'adwaita.css' used for all user-themes? :/
widget {
  &#PROCESSOR,
  &#MEMORY {
    list {
      row {
        margin: -1px; // kill ugly parent borders
        border: 1px solid $solid_light_borders_color;

        &.max {
          color: $fixed_fg_color; // enforce dark foreground
          // FIXME: we can't override the salmon-pinky background
          // background-image: image($destructive_color);
          // border: 1px solid $destructive_color;
        }
      }

      // kill ugly separators
      separator.list {
        box-shadow: inset 0 0 0 1px $solid_light_borders_color;
      }
    }
  }

  &#STORAGE {
    list {
      @extend %sidebar_template;
      margin: -1px; // kill ugly borders

      row.activatable {
        color: $secondary_fg_color;
        &:hover,
        &:active { color: $secondary_fg_color; }
      }

      // kill ugly separators
      separator.list {
        box-shadow: inset 0 0 0 1px $solid_light_borders_color;
      }
    }
  }
}

graph-switcher-button.toggle {
  color: $secondary_fg_color;
  font-weight: 500;
  &:hover { // use opaque
    background-image: image(mix($secondary_dark_color, $fg_color, 88%));
    color: $fg_color;
  }
  &:active,
  &:checked { // use opaque
    background-image: image( // use outline-track alpha
                        mix($secondary_dark_color, $selected_bg_color, 80%));
    color: $selected_bg_color;
  }
}

rg-graph.big {
  // FIXME: We need to re-define these properties to prevent weird
  // 'non-repeated' imaging behind the main graph.
  background-position: left top;
  background-origin: border-box;
  background-repeat: repeat;
}

box.speedometer {
  // FIXME: 'outter' meant 'outer'?
  // circular progress should be drawn with our $accent_color though,
  // damned adwaita.css picks @theme_selected_bg_color up.
  &-outter { opacity: 0.8; } // reduce alpha for our troughs

  &-content-area { // cover up meter troughs with selection colour
    box-shadow: 0 0 0 4px gtkopacity($selected_bg_color, 0.2);
  }
}


// /*********
//  * Glade *
//  *********/

GladeWindow {
  headerbar#headerbar.titlebar {
    button#recent-button.popup.toggle { // down-arrow button
      min-width: $icon_size;
      border-radius: 2px;
      -gtk-outline-radius: 2px;
    }
  }

  box.horizontal scrolledwindow.frame + button.image-button {
    border-radius: 2px;
    -gtk-outline-radius: 2px;
  }
}


// /********
//  * GHex *
//  ********/

menubar#MainMenu + box.vertical > widget, // main window
menubar#MainMenu + widget { // 'Add view' window(s)
  > widget {
    &:not(.view) { // left-most pane
      background-image: none;
      color: $tertiary_fg_color;
      transition: unset;
    }

    &.view {
      background-image: none;
      transition: unset;
    }
  }
}

// a focused cell
menubar#MainMenu + box.vertical > widget > widget.view.header,
menubar#MainMenu + widget >  widget.view:first-child {
  &:selected {
    // do not use transparency
    background-color: mix($base_color, $selected_bg_color, 87%);
    color: $selected_bg_color;
  }
}


// /***************
//  * Gnome Boxes *
//  ***************/

%child_styling {
  border-radius: 0;
  &:hover { box-shadow: inset 0 0 0 9999px $track_color; }
  &:first-child { border-radius: 2px 2px 0 0; }
  &:last-child { border-radius: 0 0 2px 2px; }
  &:not(:first-child):not(:only-child) { margin-top: -1px; }
}

window.background > overlay > stack.content-bg {
  &,
  stack box.content-bg { background-image: image($bg_color); }
}

// parent container of button nodes
box.boxes-menu.vertical > box.vertical { background-color: $base_color; }

// child elements
row.boxes-menu-row { @extend %child_styling; }

button.boxes-menu-row {
  @extend %child_styling;
  font-weight: 700;
  &:not(:disabled):not(:hover) { box-shadow: none; }

  box.boxes-menu.vertical > & {
    margin-bottom: -1px;
    border-radius: 2px 2px 0 0;
  }
}

