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

panel-toplevel.background {
  background-color: $panel_bg_color;

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

panel-applet,
panel-plug,
panel-toplevel > grid.horizontal > widget > widget {
  // Always use dark-color of dark variant
  color: $inverted_fg_color;
  background-color: $panel_bg_color;
  box-shadow: none;
}

.gnome-panel-menu-bar,
panel-applet > menubar,
#clock-applet-button {
  color: $inverted_fg_color;
  background-color: transparent;
  box-shadow: none;
  font-weight: 700;
}

.gnome-panel-menu-bar,
panel-applet menubar {
  > .gnome-panel-menu-item,
  > 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;
    }
  }
}

wnck-tasklist > button.toggle,
#tasklist-button,
#clock-applet-button,
#showdesktop-button {
  @extend %button_flat_normal;
  padding: 0px 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,
  &:disabled:checked { // 'checked' = 'active'
    color: $selected_fg_color;
    background-color: transparent;
    box-shadow: inset 0 -2px $selected_bg_color;
  }

  .vertical & {
    &:hover { box-shadow: inset 2px 0 $outline_track_color; }
    &:checked,
    &:hover:checked,
    &:disabled:checked { box-shadow: inset 2px 0 $selected_bg_color; }
  }
}

wnck-tasklist > button.toggle,
#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: 0 2;
  -NaTrayApplet-icon-size: 24;
}

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); }


// /********************
//  * Gnome-Tweak-Tool *
//  ********************/

// 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; }
  }
}

box.vertical > stack.main-container { // unset hard-coded margin
  margin: -20px;

  > scrolledwindow { margin: 0; }
}

list.tweak-group {
  padding: 20px; // revive gaps for child rows

  // 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;
    }
  }
}

row.tweak { // basic row node container in right-pane
  &:dir(ltr) { padding-left: rem(13.3px, $sw: 1.0); }
  &:dir(rtl) { padding-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) { padding-left: 0; }
    &:dir(rtl) { padding-right: 0; }
  }
}

// container and tweaks in a group
list.tweak-group-startup {
  padding: 20px; // revive gaps for child rows
  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);
          }
        }
      }
    }
  }
}


// /*******************
//  * 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 {
  border-radius: 2px;

  &, &.solid {
    border: 1px solid $borders_color;
    background-color: gtkopacity($inverted_dark_color, 0.9);
    color: $inverted_fg_color;

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

  // for non-composited environments
  &.solid { border-radius: 0; }
}

#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; }
}

// 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 {
  border-radius: 2px;

  &, &.solid {
    border: 1px solid $borders_color;
    background-color: gtkopacity($inverted_dark_color, 0.9);
    color: $inverted_tertiary_fg_color;
  }

  // for non-composited environments
  &.solid { border-radius: 0; }

  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;
    }
  }

  button,
  .linked > button { // page-up&down buttons
    &,
    &:first-child,
    &:last-child {
      @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); }

      border-radius: 0;
      border: none;
      background-color: transparent;
      color: $inverted_secondary_accent_label_color;
      box-shadow: none;
    }
  }
}


// /************
//  * 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;
}

NautilusTrashBar {
  @extend infobar;
}

.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;
  }
}

.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%); }
    }
  }
}

// entry-tags for libgd apps
.documents-entry-tag {
  margin: 2px;
  padding: 4px;
  border-radius: 2px;
  border: none;
  background-image: image($suggested_color);
  color: $secondary_selected_fg_color;
  &:hover { color: $selected_fg_color; }

  &.button {
    &,
    &:hover,
    &:active { // unset styling
      background-color: transparent;
      background-image: none;
      border-image: none;
      border: none;
      box-shadow: none;
      animation: none;
    }
    &:hover { color: $selected_fg_color; }
  }
}


// /*********
//  * 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));
  }
}

// left-pane styling
.sidebar.vertical > paned.sidebar-pane-separator {
  // remove unwanted frame
  .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 > scrolledwindow {
    @extend %sidebar_template;

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

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;
      }
    }
  }
}

paned.vertical > overlay > scrolledwindow > overlay {
  > widget > widget > box > widget > headerbar { // in-line headerbars
    > .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;
    }
  }
}


// /************
//  * 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; }
}

// hide double-title remained in GtkHeaderBar running under SSD-mode
.background:not(.csd) > box.vertical > headerbar > stack {
  > box.vertical { // title-box
    .title { color: transparent; }

    .subtitle { // move subtitlebox to center
      margin-top: rem(-17.3px, $sw: 1.0);
      font-size: 100%;

      &:dir(ltr) { margin-left: rem(-($widget_size - 8px) * 3); }
      &:dir(rtl) { margin-right: rem(-($widget_size - 8px) * 3); }
    }
  }
}

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


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

// remove double borders
SeahorseWidget {
  .sidebar {
    paned separator { border: none; }
  }
}

window paned > 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 {
    font-weight: 700;
    &:not(:hover):not(:active):not(:selected) {
      label,
      image { opacity: 1.0; }
    }

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

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

// FIXME: can not override Polari 3.20.2
// style in 10 years ago...
.polari-room-list list.sidebar {
  > row.activatable {
    &, &.inactive {
      &, &:backdrop {
        color: $secondary_fg_color;
        background-color: transparent;
        font-weight: 500;
        &:hover { color: $fg_color; }
        &:selected { @extend %selected_items; }
      }
    }
  }
}

// Why GtkLabel was needed, crazy...
box > headerbar > label.polari-titlebar-separator {
  min-width: 0;
  border: none;
  opacity: 0;
}


// /*************
//  * 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;

        > 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;
    }

    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.vertical > box.vertical > box.vertical > widget {
    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 toolbar.osd;
    padding: 3px;
    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;
    }
    color: $inverted_fg_color;
    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 *
//  *****************/

// work around some gtk padding issue
filechooser actionbar button.combo {
  padding: 0;
}

// styling for editor search
frame.gb-search-frame {
  background-image: linear-gradient(to bottom, $bg_color);
  padding: rem(6px);
  border-style: solid;
  border-color: $borders_color;
  border-left-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-radius: 0;
}

frame.gb-search-frame 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); }
editortweak 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; }
}

// Perspectives switcher
//
// The following tweaks the left-most sidebar containing
// the list of perspectives.
perspectiveswitcher.linked.stack-switcher.vertical {
  padding: 0 rem(4px);
  border-right: 0 none transparent;
  background-color: transparent;
  // draw gradient 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-repeat: no-repeat;
  background-size: 1px auto;
  &:dir(ltr) {
    margin-right: -1px;
    background-position: right top;
  }
  &:dir(rtl) {
    margin-left: -1px;
    background-position: left top;
  }

  button {
    padding: rem(6px);
    border-radius: 100px;
    border: none;
    background: none;
    color: $fg_color;
    box-shadow: none;

    image { opacity: 0.54; }

    &:hover {
      background: none;

      image { opacity: 0.87; }
    }
    &:active,
    &:checked {
      background: none;

      image { opacity: 1.0; }
    }
  }
}

// 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;
      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: rem(2.7px);
  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;
      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); }
  }
}

layout {
  // hide top/bottom pane-separator
  border-width: 0 1px 0;
  border-style: none solid none;
  border-color: $solid_light_borders_color;
  // 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;
  }
  // 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
  @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;
  }
}

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

%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; }
  }
}

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

// 'Select a Project' label
workbench.background > stack.titlebar > headerbar > stack {
  > label {
    color: $inverted_fg_color;
    font-weight: 700;
  }
}


// /***************
//  * 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);
    }
  }
}

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

// side-bar styling
list.contacts-view {
  @extend %sidebar_template;
  background-image: image($secondary_dark_color); // use -image instead

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

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

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

// bottom-paned actionbar
notebook > stack > grid.vertical > actionbar {
  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 > stack > 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
    // hide single-line separators
    > separator { background-color: transparent; }
  }
}

// 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-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;
  }

  // Re-define menubar node to fix side-effect
  // of the workarounds for LibreOffice
  menubar > menuitem {
    color: $inverted_secondary_fg_color;
    background-color: transparent;
    &:hover { // Seems like it :hover even with keyboard focus
      color: $inverted_fg_color;
      box-shadow: inset 0 -2px $selected_bg_color;
    }
    &:disabled {
      color: $insensitive_inverted_fg_color;
      box-shadow: none;
    }
  }

  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; }
    }
  }
}


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

window stack > frame > frame > grid.horizontal > grid.horizontal {
  .linked.osd.stack-switcher {
    background-color: gtkopacity($dark_color, 0.9);
    box-shadow: $z-depth-1;

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

  button.osd {
    min-width: $icon_size;
    min-height: $icon_size;
    padding: rem($icon_size);
    border-radius: 100px;
    -gtk-outline-radius: 100px;
    background-color: gtkopacity($dark_color, 0.9);
  }
}

window stack > frame > frame > grid.horizontal {
  #weekly-forecast-frame {
    background: transparent;
    background-image: linear-gradient(to bottom,
                                      gtkopacity($dark_color, 0.9));
  }
}


// /**************
//  * 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:not(.suggested-action) {
    // use flat-button style
    @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); }
  }
}


// /************
//  * 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 *
//  ************************/

// network settings
.background.csd > box.vertical > stack > box.vertical > widget {
  notebook > stack > notebook > stack > box.vertical {
    // use buttonbox's flat-buttons
    > box.horizontal { @extend buttonbox.dialog-action-area; }
  }
}


// /*************
//  * 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; }
      }
    }
  }
}


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

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


// /***********************
//  * Gnome-Character-Map *
//  ***********************/

window.background > grid.horizontal {
  > paned.horizontal {
    > scrolledwindow.frame {
      border-width: 1px 0 1px;

      // prevent unwanted shrinking
      > treeview.view > header > button {
        min-width: rem(133.3px, $sw: 1.0);
      }
    }

    > notebook.frame {
      border-style: none none solid;

      // FIXME: it doesn't work
      > stack > scrolledwindow > widget {
        &, &:backdrop {
          border-color: $borders_color;
          color: $secondary_fg_color;
          &:hover {
            color: $fg_color;
            background-color: $track_color;
          }
          &:selected,
          &:checked { @extend %selected_items; }
        }
      }
    }
  }

  > statusbar {
    margin: -8px -10px;
    border-top: 1px solid $borders_color;
    background-color: $secondary_dark_color;

    > frame {
      background: none;
      box-shadow: if($variant == light, $inline-shadow-light,
                                        $inline-shadow-dark);

      > box > label {
        margin: rem(-5.3px) rem(8px);
        color: $tertiary_fg_color;
        font-weight: 700;
      }
    }
  }
}


// /******************
//  * 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 > stack > widget > stack {
  // "Installed" stack
  > box.vertical > scrolledwindow > viewport.frame > widget > list {
    background-color: $bg_color; // override $base_color

    // > row.activatable > box.horizontal widget button.star {
    //   > image { // star images
    //     &.star-enabled { color: $accent_color; }
    //     &.star-disabled { color: gtkopacity($accent_color, 0.2); }
    //   }
    // }

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

  // "Updates" stack
  > scrolledwindow > viewport.frame > widget > box.vertical {
    // override $base_color
    > 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
  // hard-coded crazy 16px roundness
  min-height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 16px;
  -gtk-outline-radius: 16px;
}


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

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);
    }
  }
}


// /********
//  * 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;
  }
}

