
//
// Nautilus
//
$nautilus_radius: $wm_radius + 1px;
$nautilus_sidebar_size: $sidebar_size;
$nautilus_borders_color: if($variant=='light', darken(rgba($dark_sidebar_bg, 1), 12%), $header_border);

$nautilus_header_image: image($header_bg);
$nautilus_header_borders_image: image($header_border);
$nautilus_actionbar_image: image($dark_header_bg);
$nautilus_actionbar_borders_image: image($header_border);
$dialog_header_image: image($dark_header_bg);
$dialog_header_borders_image: image($header_border);
$nautilus_bg_image: image($dark_sidebar_bg);
$nautilus_sidebar_image: image($dark_sidebar_bg);


@if $nautilus_style == 'stable' {
  $nautilus_sidebar_image: linear-gradient(90deg, $dark_sidebar_bg 0%,
                                                  $dark_sidebar_bg $nautilus_sidebar_size,
                                                  rgba($dark_sidebar_bg, 0) $nautilus_sidebar_size,
                                                  rgba($dark_sidebar_bg, 0) 100%);

  $nautilus_bg_image: linear-gradient(90deg, $dark_sidebar_bg 0%,
                                             $dark_sidebar_bg $nautilus_sidebar_size,
                                             $nautilus_borders_color $nautilus_sidebar_size,
                                             $nautilus_borders_color ($nautilus_sidebar_size + 1px),
                                             $base_color ($nautilus_sidebar_size + 1px),
                                             $base_color 100%);
}

@if $nautilus_style == 'normal' or $nautilus_style == 'glassy' {
  $dialog_header_image: linear-gradient(90deg, $dialog_bg_color 5%,
                                               $dark_header_bg 40%);

  $dialog_header_borders_image: linear-gradient(90deg, $dialog_bg_color 0px,
                                                       $header_border 25%);

  $nautilus_actionbar_image: linear-gradient(90deg, rgba($dark_header_bg, 0) 5%,
                                                    transparentize($dark_header_bg, 0.2) 40%);

  $nautilus_actionbar_borders_image: linear-gradient(90deg, rgba($header_border, 0) 0px,
                                                            $header_border 25%);
}

@if $nautilus_style == 'normal' or $nautilus_style == 'stable' {
  $nautilus_header_borders_image: linear-gradient(90deg, rgba($header_border, 0) $nautilus_sidebar_size,
                                                         $header_border $nautilus_sidebar_size);
}

@if $nautilus_style == 'normal' or $nautilus_style == 'stable' {
    $nautilus_header_image: linear-gradient(90deg, $dark_sidebar_bg $nautilus_sidebar_size,
                                                   $nautilus_borders_color $nautilus_sidebar_size,
                                                   $nautilus_borders_color ($nautilus_sidebar_size + 1px),
                                                   $dark_header_bg ($nautilus_sidebar_size + 1px));
} @else if $nautilus_style == 'glassy' {
  $nautilus_header_image: linear-gradient(90deg, $dark_sidebar_bg ($nautilus_sidebar_size / 2),
                                                 $dark_header_bg 40%);

  $nautilus_header_borders_image: linear-gradient(90deg, rgba($header_border, 0) (($nautilus_sidebar_size / 2) - 40px),
                                                         $header_border 40%);
}

//
// Nautilus
//
.nautilus-window {
  &.background.csd {
    background-color: transparent;
    background-image: $nautilus_bg_image;
    border-radius: $background_radius_style;

    &.unified { // >= 40.0
      border-radius: $wm_radius;

      @if $nautilus_style == 'glassy' {
        background-image: image(rgba($dark_sidebar_bg, 0));
      }

      > deck > box.vertical > headerbar.titlebar {
        @if $nautilus_style == 'normal' or $nautilus_style == 'stable' {
          background-image: linear-gradient(90deg, rgba($dark_header_bg, 0) $nautilus_sidebar_size,
                                                   $nautilus_borders_color $nautilus_sidebar_size,
                                                   $nautilus_borders_color ($nautilus_sidebar_size + 1px),
                                                   $dark_header_bg ($nautilus_sidebar_size + 1px));
        }

        > .linked > button.disclosure-button { margin-left: $container_padding / 2; }

        > box.horizontal:first-child { // move the search button to right side
          margin-right: -74px;

          @if $nautilus_style == 'normal' or $nautilus_style == 'stable' {
            entry.search { margin-left: if($placement == 'left', $container_padding, $nautilus_sidebar_size - 74px); }
          }
        }
      }

      @if $nautilus_style == 'normal' or $nautilus_style == 'stable' {
        &.maximized {
          > deck > box.vertical > headerbar.titlebar {
            > box.horizontal:first-child { // move the search button to right side
              entry.search { margin-left: 0; }
            }
          }
        }
      }

      @if $nautilus_style == 'glassy' {
        placessidebar.sidebar {
          background-image: $nautilus_sidebar_image;
        }
      }
    }

    > headerbar.titlebar,
    > deck > box.vertical > headerbar.titlebar {
      background-color: transparent;
      background-image: $nautilus_header_image;
      border: none;
      background-clip: padding-box;
      border-bottom-width: 0;
      border-image: $nautilus_header_borders_image 0 0 1 / 0px 0px 1px stretch;

      @if $nautilus_style == 'stable' and $trans == 'false' {
        > box.left.horizontal {
          background-image: linear-gradient(0deg, $dark_sidebar_bg 0%, $dark_sidebar_bg 95%, transparent 95%, transparent 100%);
        }
      }

      @if $nautilus_style == 'normal' or $nautilus_style == 'stable' {
        @if $placement == 'left' {
          > .linked.raised > button:first-child { margin-left: $nautilus_sidebar_size - (48px + $container_padding * 6); }
        }
        @else {
          .path-bar-box { margin-left: $nautilus_sidebar_size - (68px + $container_padding * 2); }
          entry.search { margin-left: if($placement == 'left', $container_padding * 1.5, $nautilus_sidebar_size - 74px); }
        }
      }
    }

    &.maximized {
      > headerbar.titlebar,
      > deck > box.vertical > headerbar.titlebar {
        @if $nautilus_style == 'normal' or $nautilus_style == 'stable' {
          @if $placement == 'right' {
            .path-bar-box { margin-left: 0; }
            entry.search { margin-left: 0; }
          }
        }
      }
    }

    placessidebar.sidebar {
      background-color: transparent;
      border: none;
      border-bottom-left-radius: $wm_radius;

      @if $nautilus_style == 'normal' or $nautilus_style == 'stable' {
        min-width: $nautilus_sidebar_size;
      }

      @if $nautilus_style == 'stable' {
        background-image: if($trans == 'true', none, $nautilus_sidebar_image);
      }

      @else {
        &.frame { border-right: 1px solid $nautilus_borders_color; }
      }

      list { margin-bottom: 6px; }

      row.sidebar-row {
        color: $dark_sidebar_fg;
        background-color: transparent;
        outline: none;
        transition: background-image 0;

        .sidebar-icon { color: if($variant == 'light', $selected_bg_color, lighten($selected_bg_color, 20%)); }

        &.has-open-popup,
        &:disabled {
          &, label, image { color: transparentize($dark_sidebar_fg, 0.6); }
        }

        &:backdrop { opacity: 0.85; }

        // row style
        @if $nautilus_style == 'stable' {
          margin: 0 0;

          &:hover {
            transition: background-image 0;
            background-repeat: no-repeat;
            background-color: transparent;
            background-position: left center;
            background-size: $nautilus_sidebar_size 28px;
            background-image: -gtk-scaled(url("assets/sidebar-view-hover-#{$nautilus_sidebar_size}#{$asset_suffix}.png"),
                                          url("assets/sidebar-view-hover-#{$nautilus_sidebar_size}#{$asset_suffix}@2.png"));
          }

          &:active, &:active:hover {
            outline: none;
            transition: background-image ease-out 200ms;
            background-repeat: no-repeat;
            background-color: transparent;
            background-position: left center;
            background-size: $nautilus_sidebar_size 28px;
            background-image: -gtk-scaled(url("assets/sidebar-view-active-#{$nautilus_sidebar_size}#{$asset_suffix}.png"),
                                          url("assets/sidebar-view-active-#{$nautilus_sidebar_size}#{$asset_suffix}@2.png"));
          }

          &:selected.has-open-popup,
          &:selected, &:selected:hover {
            outline: none;
            color: $fg_color;
            transition: background-image ease-out 200ms;
            background-repeat: no-repeat;
            background-position: left center;
            background-size: $nautilus_sidebar_size 28px;
            background-color: transparent;
            background-image: -gtk-scaled(url("assets/sidebar-view-checked-#{$nautilus_sidebar_size}#{$asset_suffix}.png"),
                                          url("assets/sidebar-view-checked-#{$nautilus_sidebar_size}#{$asset_suffix}@2.png"));

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

        @else {
          border-radius: $bt_radius;
          margin: 0 6px;
          padding: 2px 4px;

          &:hover {
            background-color: rgba($fg_color, 0.1);
          }

          &:active, &:active:hover {
            transition: background-color ease-out 200ms;
            background-color: rgba($fg_color, 0.2);
          }

          &:selected.has-open-popup,
          &:selected, &:selected:hover {
            color: $fg_color;
            transition: background-color ease-out 200ms;
            background-color: rgba($fg_color, 0.15);

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

        // other
        &.sidebar-new-bookmark-row {
          color: $selected_bg_color;

          .sidebar-icon { color: inherit; }
        }

        &:drop(active):not(:disabled) {
          &, label, .sidebar-icon { color: $dark_sidebar_fg; }

          &:selected {
            &, label, .sidebar-icon { color: $dark_sidebar_fg; }
            background-color: $drop_target_color;
          }
        }
      }

      separator { background-color: transparent; }

      scrollbar {
        background: none;
        border: none;

        trough {
          background-color: transparent;
        }
      }
    }

    placesview {
      row.activatable {
        border-radius: $bt_radius;
        margin-right: 6px;
      }

      actionbar.background {
        background: none;

        > revealer > box {
          background-color: transparent;
          padding: $container_padding * 2;
          // border: none;
        }
      }
    }
  }

  headerbar {
    .path-bar-box {
      color: transparent;
      background: none;
      padding: 0 $container_padding * 2;
      border: none;
      margin: 0;

      .linked.nautilus-path-bar { // for ≥ 3.31.90
        > button:not(:only-child):last-child {
          @include button(header-checked);
        }
      }

      // workaround for 3.30.1
      &.background.frame {
        border: none;
        background-color: transparent;
      }
    }

    // >= 42.0
    &.windowhandle .linked.nautilus-path-bar {
      background-color: $fill_color;
      border-radius: $bt_radius;
      margin: $container_padding 0 $container_padding $container_padding;

      .path-buttons-box > box > button {
        margin-top: 0;
        margin-bottom: 0;

        &.current-dir {
          color: $header_fg;

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

      > button.popup.toggle {
        margin-top: 0;
        margin-bottom: 0;
      }
    }
  }

  notebook {
    &.background.csd { background-color: transparent; }

    > header {
      // background-color: $base_color;
      border-color: $header_border;
    }

    @if $monterey == 'false' {
      margin-left: -1px;
      margin-right: -1px;

      tab { margin-left: -1px; }
    }

    scrolledwindow {
      .view:not(:hover):not(:active):not(:selected) {
        background-color: transparent;
      }
    }

    &, > stack {
      border-radius: $background_radius_style;
    }

    > stack {
      background-color: $base_color;
    }

    > stack:not(:only-child) {
      searchbar > revealer > box { background-color: transparent; }
    }
  }

  &.background infobar {
    & > revealer > box,
    &:hover > revealer > box,
    &:backdrop > revealer > box {
      background-color: transparent;
      padding: 0 $container_padding * 2;
      color: $selection_mode_bg;

      button {
        color: $selection_mode_bg;
        background-color: rgba($selection_mode_bg, 0.15);
        border: none;

        &:hover { background-color: rgba($selection_mode_bg, 0.25); }
        &:active, &:checked { background-color: $selection_mode_bg; color: white; }
        &:disabled {
          background-color: rgba($selection_mode_bg, 0.05);
          color: rgba($selection_mode_bg, 0.35);

          label { color: rgba($selection_mode_bg, 0.35); }
        }
      }

      *:link, link { color: $link_color; }
    }
  }

  // Floating Bar
  .floating-bar {
    padding: 2px;
    background-color: $selected_bg_color;
    color: $selected_fg_color;
    border-radius: $wm_radius - $container_padding;
    margin: $container_padding;
    box-shadow: $shadow_5;

    button {
      border: none;
      border-radius: $circular_radius;
      min-height: 0;
      min-width: 0;
      padding: 0;
      margin-right: $container_padding;
      -gtk-icon-shadow: none;
      @extend %selected-button;
    }
  }

  // Reset maximized nautilus-window border-radius
  &.maximized, &.tiled, &.fullscreen {
    &.background.csd {
      border-radius: $maximized_radius_style;

      notebook { &, > stack { border-radius: 0 0 $maximized_radius $maximized_radius; } }

      > headerbar.titlebar,
      > deck > box.vertical > headerbar.titlebar {
        &, &.windowhandle {
          border-top-left-radius: $maximized_radius;
          border-top-right-radius: $maximized_radius;
        }
      }

      placessidebar { border-bottom-left-radius: $maximized_radius; }
    }
  }

  > grid.horizontal > paned.horizontal > separator,
  > deck > box.vertical > paned.horizontal > separator { // Use paned separator to hide stack border-bottom-left-radius
    border: none;
    min-width: 1px;
    min-height: 1px;
    background-color: $base_color;
    background-image: image($base_color);
    background-size: $wm_radius $wm_radius;
    background-position: bottom left;
    background-repeat: no-repeat;

    &:dir(ltr) { margin-left: -1px; }
    &:dir(rtl) { margin-right: -1px; }

    @if $nautilus_style == 'stable' {
      &:dir(ltr) { margin-left: 1px; }
      &:dir(rtl) { margin-right: 1px; }

      &:hover {
        background-image: image($solid_borders_color);
        background-size: 2px 100px;
        background-position: center center;
        background-repeat: no-repeat;
      }
    }
  }
}

preferencesgroup { // gnome 40.0 preferences window
  list {
    @extend %circular_list;

    row.activatable { @extend %circular_row; }

    list {
      margin: 0 0;
      padding: 0 0;
      box-shadow: none;
      background: none;
      border: none;
    }
  }
}

.nautilus-canvas-item { border-radius: 5px; }

// .view.nautilus-desktop,
%nautilus-desktop-canvas-item,
.nautilus-desktop.nautilus-canvas-item {
  color: white;
  text-shadow: 1px 1px transparentize(black, 0.4);

  &:active {
    color: white;
  }

  &:selected {
    color: $selected_fg_color;
    text-shadow: none;
  }
}

.nautilus-canvas-item.dim-label,
.nautilus-list-dim-label {
  color: mix($fg_color, $bg_color, 50%);

  &:selected,
  &:selected:focus {
    color: mix($selected_fg_color, $selected_bg_color, 80%);
  }
}

.nautilus-list-view {
  background-color: $base_color;
  border-radius: 0 0 $wm_radius $wm_radius;

  treeview.view:not(:hover):not(:active):not(:selected) {
    background-color: transparent;
    border-radius: 0;
    // @extend %view;
  }
}

button.nautilus-circular-button.image-button {
  @extend %circular_button;
}

$disk_space_unknown: transparentize($fg_color, 0.5);
$disk_space_used: transparentize($selected_bg_color, 0.2);
$disk_space_free: darken($bg_color, 3%);

.disk-space-display {
  border-style: solid;
  border-width: 1px;

  &.unknown {
    background-color: $disk_space_unknown;
    border-color: darken($disk_space_unknown, 10%);
  }

  &.used {
    background-color: $disk_space_used;
    border-color: darken($disk_space_used, 10%);
  }

  &.free {
    background-color: $disk_space_free;
    border-color: darken($disk_space_free, 10%);
  }
}

@keyframes needs_attention_keyframes {
  0% {
    @include button(header-hover);
  }

  100% {
    @include button(header-active)
  }
}

.nautilus-operations-button-needs-attention {
  animation: needs_attention_keyframes 2s ease-in-out;
}

.nautilus-operations-button-needs-attention-multiple {
  animation: needs_attention_keyframes 3s ease-in-out;
  animation-iteration-count: 3;
}

// Batch renaming dialog
.conflict-row.activatable {
  &, &:active {
    color: $light_fg_color;
    background-color: $error_color;
  }

  &:hover {
    background-color: lighten($error_color, 10%);
  }

  &:selected {
    color: $selected_fg_color;
    background-color: $selected_bg_color;
  }
}


//
// GNOME Terminal
//

terminal-window {
  &.background.csd {
    border-radius: 0;
  }

  decoration {
    border-radius: $wm_radius $wm_radius 0 0;
  }

  &.background.csd.maximized { border-radius: 0; } // Fixed gnome 3.32 issue: Unable to restore window size after maximization
}

window.background.csd { // gnome-terminal 3.32 setting
  > box.vertical > box.horizontal > frame {
    > border {
      border-width: 0 1px 0 0;
    }

    > scrolledwindow > viewport.frame {
      list {
        border-bottom-left-radius: $wm_radius;
      }
    }
  }

  > box.vertical > box.horizontal > stack {
    > widget > notebook.frame {
      border-width: 0;

      > stack {
        border-bottom-right-radius: $wm_radius;
      }
    }
  }
}


//
// Gedit
//
window.org-gnome-gedit {
  > paned.titlebar {
    > headerbar {
      button.flat.toggle.popup:not(.image-button) { // left-pane header button
        @extend %headerbar_buttons;

        box > .title {
          padding: 0; // remove lateral padding
          margin: -2px 0;
        }
      }
    }

    > separator { @extend %side_separator; }
  }

  > overlay > box.vertical {
    > paned.gedit-side-panel-paned {
      > separator { @extend %side_separator; }

      // 'file-browser' pane
      > box.vertical > stack > grid.horizontal {
        > box.horizontal {  // header-part
          margin: 4px 0;
        }

        > scrolledwindow { // raised widget
          border-bottom-left-radius: $wm_radius;

          treeview.view:not(:hover):not(:selected) {
            background: none;
          }
        }
      }

      // 'files' pane
      stack {
        scrolledwindow {
          viewport.frame {
            list.gedit-document-panel {
              background: none;
            }
          }
        }
      }
    }
  }

  .open-document-selector-treeview.view {
    padding: 3px 6px 3px 6px;
    border-color: $base_color; // disable borders, making them transparent doesn't work for some reason
    &:hover {
      background-color: mix($fg_color, $base_color, 7%);

      &:selected {
        color: $selected_fg_color;
        background-color: $selected_bg_color;
      }
    }
  }

  .open-document-selector-name-label { color: $fg_color; }

  .open-document-selector-path-label {
    color: mix($fg_color, $base_color, 50%);
    font-size: smaller;

    &:selected {
      color: transparentize($selected_fg_color, 0.1);
    }
  }

  .gedit-document-panel { // 'documents' pane
    row.activatable { padding: 6px 0; }

    row button { // 'close' button
      min-width: 22px;
      min-height: 22px;
      padding: 0;
      margin: 0 6px;
      border-radius: 100px;
      // -gtk-outline-radius: 100px;

      image {
        color: inherit;
      }
    }

    row:hover:not(:selected) button {
      color: mix($bg_color, $fg_color, 35%);

      &:hover {
        color: lighten(red, 15%);
      }
      &:active {
        color: $fg_color;
      }
    }

    row:hover:selected button:hover {
      color: lighten(red, 20%);

      &:active {
        color: $selected_fg_color;
      }
    }
  }

  .gedit-document-panel-dragged-row {
    border: 1px solid $borders_color;
    background-color: darken($bg_color, 10%);
    color: $fg_color;
  }

  .gedit-side-panel-paned statusbar {
    border-top: 1px solid $borders_color;
    background-color: $bg_color;
    border-radius: 0 0 $wm_radius $wm_radius;

    frame > border { border: none; }
  }

  .gedit-search-slider {
    background-color: lighten($bg_color, 2%);
    padding: 6px;
    border-color: $borders_color;
    border-radius: 0 0 $bt_radius $bt_radius;
    border-width: 0 1px 1px 1px;
    border-style: solid;
  }

  .gedit-search-entry-occurrences-tag {
    color: transparentize($fg_color, 0.4);
    border: none;
    margin: 2px;
    padding: 2px;
  }

  .gedit-map-frame {
    border {
      @if $variant=='light' {
        border-color: transparentize(black, 0.7);
      }
      border-width: 0;

      &:dir(ltr) {
        border-left-width: 1px;
      }
      &:dir(rtl) {
        border-right-width: 1px;
      }
    }
  }

  &.tiled,
  &.maximized,
  &.fullscreen {
    > overlay > box.vertical {
      > paned.gedit-side-panel-paned {
        > box.vertical > stack > grid.horizontal {
          > scrolledwindow { // raised widget
            border-bottom-left-radius: $maximized_radius;
          }
        }
      }
    }

    &.background.csd,
    .gedit-side-panel-paned statusbar {
      border-radius: 0 0 $maximized_radius $maximized_radius;
    }
  }
}


//
// Gnome Builder
//
.gb-search-entry-occurrences-tag {
  background: none;
}

editortweak .linked > entry.search:focus + .gb-linked-scroller {
  border-top-color: $selected_bg_color;
}

layouttab {
  background-color: $base_color;
}

layout {
  border: 1px solid $borders_color;
}

eggsearchbar box.search-bar {
  border-bottom: 1px solid $borders_color;
}

pillbox {
  color: $selected_fg_color;
  background-color: $selected_bg_color;
  border-radius: 3px;

  &:disabled label {
    color: transparentize($selected_fg_color, 0.5)
  }
}

docktabstrip {
  padding: 0 6px;

  background-color: $bg_color;
  border-bottom: 1px solid $borders_color;

  docktab {
    min-height: 28px;
    border: solid transparent;
    border-width: 0 1px;

    label {
      opacity: 0.5;
    }

    &:checked,
    &:hover {
      label {
        opacity: 1;
      }
    }

    &:checked {
      border-color: $borders_color;
      background-color: $base_color;
    }
  }
}

dockbin {
  border: 1px solid $borders_color;
}

dockpaned {
  border: 1px solid $borders_color;
}

dockoverlayedge {
  background-color: $bg_color;

  docktabstrip {
    padding: 0;
    border: none;
  }

  &.left-edge tab:checked,
  &.right-edge tab:checked {
    border-width: 1px 0;
  }
}

popover.messagepopover {
  &.background {
    padding: 0;
  }

  .popover-content-area {
    margin: 16px;
  }
  .popover-action-area {
    margin: 8px;

    button:not(:first-child):not(:last-child) {
      margin: 0 4px;
    }
  }
}

popover.popover-selector {
  padding: 0;

  list {
    row {
      padding: 5px 0;
    }

    row image {
      margin-left: 3px;
      margin-right: 10px;
    }
  }
}

preferences stacksidebar.sidebar {
  list {
    background-image: _solid($base_color);
  }

  list separator {
    background-color: transparent;
  }
}

devhelppanel entry:focus,
symboltreepanel entry:focus {
  border-color: $borders_color
}

button.run-arrow-button {
  min-width: 12px;
}

omnibar.linked > entry:not(:only-child) {
  margin-left: 1px;
  margin-right: 1px;
  @include entry(header-normal);
  border-left: none;

  &:backdrop {
    @include entry(header-normal);
    // background-image: none;

    opacity: 0.65;
  }
}

entry.search.preferences-search { // preferences-search
  box-shadow: none;
  border: none;
  border-right: 1px solid $borders_color;
  border-bottom: 1px solid $borders_color;
  border-radius: 0;

  &:focus {
    box-shadow: none;
    border-bottom: 1px solid $selected_bg_color;
  }
}

preferencesbin {
  spinbutton {
    border-radius: $bt_radius;
    border: 1px solid $borders_color;
    background-color: $bg_color;

    &:focus { border-color: $selected_bg_color; }

    entry,
    entry:focus { border: none; box-shadow: none; }

    button {
      border-width: 0 0 0 1px;

      // &:first-child {
      //   border-left: 1px solid $borders_color;
      // }
    }
  }

  entry.search { margin: 2px; }
}

dzlpreferencesview stacksidebar.sidebar {
  border-bottom-left-radius: $wm_radius;

  > scrolledwindow > viewport.frame > list {
    border-bottom-left-radius: $wm_radius;
  }
}

dzldockbin#buildui.buildui list.sidebar {
  border-bottom-left-radius: $wm_radius;
}

dzldockbin#editor > ideeditorsidebar.left.pinned.dzldockbinedge {
  border-bottom-left-radius: $wm_radius;

  > dzldockpaned {
    treeview.view.project-tree.i-wanna-be-list-box:not(:hover):not(:selected) {
      background: none;
    }
  }
}

ideeditorutilities.bottom.pinned.dzldockbinedge {
  border-bottom-right-radius: $wm_radius;
}

gstyleslidein {
  #scale_box,
  #strings_controls,
  #palette_controls,
  #components_controls {
    button.toggle:checked {
      color: $fg_color;
    }
  }
}

configurationview {
  entry.flat {
    background: none;
  }

  list {
    border-width: 0;
  }
}

dzldockbin actionbar > revealer > box {
  border-radius: 0 0 $wm_radius $wm_radius;
}

workbench.csd > stack.titlebar:not(headerbar) {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;

  headerbar {
    &,
    &:first-child,
    &:last-child {
      border-radius: $wm_radius $wm_radius 0 0;
    }
  }
}

window.org-gnome-Builder.workspace {
  > stack#titlebar_container.titlebar {
    > headerbar > omnibar {
      > .linked > entry {
        min-height: 0;

        > overlay > box.horizontal > box.vertical.pan {
          > button {
            min-height: 0;
          }
        }
      }
    }
  }

  > popover.dzlmenubutton {
    > box.vertical > dzlmenubuttonsection.vertical {
      > box.vertical > button.dzlmenubuttonitem {
        color: $alt_fg_color;

        &:active, &:checked {
          color: $fg_color;
          background-color: rgba($fg_color, 0.25);
        }

        > box.horizontal > box.horizontal {
          > label.title {
            color: $fg_color;
          }
        }
      }
    }
  }

  treeview.view.i-wanna-be-listbox:not(:hover):not(:selected),
  dzlmultipaned > notebook > stack > scrolledwindow > treeview.view:not(:hover):not(:selected) {
    border-bottom-left-radius: $wm_radius;
  }
}


//
//  Gnome-Logs
//
window.background > box.vertical box.horizontal {
  list.categories { border-radius: 0 0 0 $wm_radius; } // side-pane
    > box.vertical > scrolledwindow > viewport.frame > list {
      row.event.activatable { // > 3.25.90
        color: $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(darken($bg_color, 3%));
          color: darken($fg_color, 20%);
          transition-property: opacity, // exclude background-color
          border-image,
          background-image,
          box-shadow;
          &:hover {
            background-image: image(mix($fg_color, $bg_color, 5%));
            color: $fg_color;
          }
          &:active {
            &, &:focus {
              background-image: image(mix($fg_color, $bg_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-Usage
//
widget {
  &#PROCESSOR,
  &#MEMORY {
    list {
      row {
        margin: -1px; // kill ugly parent borders
        border: 1px solid $solid_borders_color;

        &.max {
          color: $osd_bg_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_borders_color;
      }
    }
  }

  &#STORAGE {
    list {
      margin: -1px; // kill ugly borders

      row.activatable {
        color: rgba($fg_color, 0.75);
        &:hover,
        &:active { color: rgba($fg_color, 0.75); }
      }

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

  &#PERFORMANCE {
    searchbar {
      box-shadow: inset 0 -2px $borders_color, inset 0 -1px $bg_color;  // Removed double borders under headerbar
      entry, button { margin-bottom: 2px; }
    }

    .sidebar {
      background-color: $base_color;
      border-bottom-left-radius: $wm_radius;
    }
  }
}

graph-switcher-button.toggle {
  color: rgba($fg_color, 0.75);
  font-weight: 500;
  &:hover { // use opaque
    color: $fg_color;
    background-image: image(if($variant == 'light', rgba(black, 0.05), rgba(white, 0.03)));
  }
}

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 rgba($selected_bg_color, 0.2);
  }
}


//
// Gnome Documents
//

.documents-scrolledwin.frame {
  border-width: 0;
}

button.documents-load-more {
  border-width: 1px 0 0;
  border-radius: 0;
}

.documents-icon-bg {
  background-color: $selected_bg_color;
  color: $selected_fg_color;
  border-radius: 2px;
}

%documents-collection-icon,
.documents-collection-icon {
  background-color: transparentize($fg_color, 0.7);
  border-radius: 2px;
}

button.documents-favorite:active,
button.documents-favorite:active:hover {
  color: lighten($selected_bg_color, 20%);
}

%documents-entry-tag,
.documents-entry-tag {
  color: $selected_fg_color;
  background: $selected_bg_color;
  border-radius: 3px;
  border-width: 0;
  margin: 2px;
  padding: 4px;

  &:hover {
    color: $selected_fg_color;
    background: lighten($selected_bg_color, 4%);
  }
  &:active {
    color: $selected_fg_color;
    background: darken($selected_bg_color, 4%);
  }
  &.button {
    box-shadow: none;
    border: none;
    background-color: transparent;
  }
}

.content-view.document-page {
  border-style: solid;
  border-width: 3px 3px 6px 4px;
  border-image: url("assets/thumbnail-frame.png") 3 3 6 4;
}


//
// Gnome Photos
//
.photos-entry-tag {
  @extend %documents-entry-tag;
}

.photos-collection-icon {
  @extend %documents-collection-icon;
}

.photos-fade-in {
  opacity: 1.0;
  transition: opacity 0.2s ease-out;
}

.photos-fade-out {
  opacity: 0.0;
  transition: opacity 0.2s ease-out;
}


//
// Gnome Tweak Tool ( Gnome tweaks )
//
window.background.csd {
  > hdyleaflet,
  > leaflet,
  > box.horizontal > stack.background {
    frame > border { border: none; }

    frame:not(.view) list:not(.contacts-contact-list) { // Don't set this to Gnome-Contacts
      @extend %circular_list;

      row.activatable {
        @extend %circular_row;

        .row-header > button:not(.text-button) {
          min-height: 28px;
          min-width: 28px;
          padding: 0;
          margin: 4px 0;
        }
      }
    }

    frame.view {
      @extend %circular_list;

      list {
        background: none;

        > separator {
          background: none;
          min-height: 0;
        }

        row.activatable { @extend %circular_row; }
      }
    }

    list.view, list.frame {
      @extend %circular_list;

      row.activatable { @extend %circular_row; }
    }

    > box.vertical > scrolledwindow > viewport.frame {
      &,
      > stack,
      > stack > box.vertical {
        > list {
          padding: 2px 0;

          > row.activatable { @extend %sidebar_row; }
        }
      }
    }
  }
}

list {
  &.tweak-group {
    list {
      @extend %circular_list;

      row.activatable { @extend %circular_row; }
    }
  }
}

.titlebar > headerbar.titlebar.tweak-titlebar-left,
.titlebar > headerbar.titlebar.tweak-titlebar-right {
  border: none;
}

// Themed side headerbar
.titlebar > headerbar.titlebar.tweak-titlebar-left {
  @extend %side_headerbar_left;
}

.titlebar > headerbar.titlebar.tweak-titlebar-right {
  @extend %side_headerbar_right;
}

row#AutostartTitle.tweak {
  padding: 3px;
  background-color: $base_color;
}

.tweak-group-startup {
  @extend %circular_list;

  row.tweak-startup:not(:hover):not(:selected) {
    background: none;
  }
}

// separator of sidebar on Gnome control center and Gnome tweaks
window.background.csd {
  > hdyleaflet,
  > leaflet, > leaflet.unfolded,
  > box.horizontal {
    > separator.vertical {
      @extend %side_separator;
    }

    > box.vertical {
      > searchbar {
        @extend %side_searchbar;
      }
    }
  }

  > hdyleaflet > box.vertical > stack.main-container,
  > leaflet > box.vertical > stack.main-container { // Right side
    background-color: $base_color;
    border-bottom-right-radius: $wm_radius;
  }

  // sidebar on gnome tweak
  list.tweak-categories {
    background-image: none;
    background-color: rgba($dark_sidebar_bg, 1);
    border-radius: 0 0 0 $wm_radius;

    // Themed left sidebar
    .tweak-category:not(:selected):not(:hover) {
      background: none;
    }

    > separator {
      min-width: 0;
      min-height: 0;
      background: none;
    }
  }

  &.maximized, &.tiled, &.fullscreen {
    > hdyleaflet > box.vertical > stack.main-container {
      border-bottom-right-radius: $maximized_radius;
    }

    // sidebar on gnome tweak
    .tweak-categories {
      border-radius: 0 0 0 $maximized_radius;
    }
  }
}


//
// Gnome Control Center
//

window.background.csd {
  > box.titlebar.horizontal {
    > headerbar:first-child {
      @extend %side_headerbar_left;
    }

    > headerbar:last-child {
      @extend %side_headerbar_right;
    }
  }

  > headerbar.titlebar { // gnome 3.32 or later
    > box.horizontal > headerbar:first-child,
    > hdyleaflet > headerbar:first-child,
    > leaflet > headerbar:first-child {
      @extend %side_headerbar_left;
    }

    > box.horizontal > headerbar:last-child,
    > hdyleaflet > headerbar:last-child,
    > leaflet > headerbar:last-child {
      @extend %side_headerbar_right;
    }

    > box.horizontal > separator.sidebar,
    > hdyleaflet > separator.sidebar,
    > leaflet > separator.sidebar {
      @extend %side_separator;
    }
  }

  > stack {
    border-radius: 0 0 $wm_radius $wm_radius;
  }

  > box:not(.titlebar).horizontal > separator.vertical {
    @extend %side_separator;
  }

  > leaflet > stack.background, // > 3.38.0
  > hdyleaflet > stack.background, // > 3.34.0
  > box.horizontal > stack.background {
    background-color: $base_color;
    border-bottom-right-radius: $wm_radius;

    > widget {
      > box.horizontal > box.horizontal > box.vertical {
        > button { // wallpaper set button
          &:active {
            color: $fg_color;
            background-image: none;
            background-color: if($variant=='light', darken($button_bg, 15%), lighten($button_bg, 10%));
            border-color: $dark_borders_color;
          }
        }
      }

      > box.vertical > box.vertical { // Gnome 3.34 Wallpaper setting
        > scrolledwindow > viewport.frame {
          background-color: $base_color;
          border-bottom-right-radius: $wm_radius + 1px;

          > box.vertical {
            background: none;
          }
        }
      }

      scrolledwindow.frame {
        border: none;

        > viewport.frame {
          > list {
            @extend %circular_list;

            > row.activatable { @extend %circular_row; }
          }
        }
      }

      > scrolledwindow > viewport > clamp.medium {
        > box > box > box > frame > box > box.vertical {
          > separator {
            background: none;
            min-height: 2px;
          }

          > list { border-radius: 4px; }

          &:first-child:last-child > list { border-radius: $wm_radius; }
          &:first-child > list { border-radius: $wm_radius $wm_radius 4px 4px; }
          &:not(:first-child):last-child > list { border-radius: 4px 4px $wm_radius $wm_radius; }
        }
      }
    }
  }

  > leaflet > box.vertical > scrolledwindow.view, // > 3.38.0
  > hdyleaflet > box.vertical > scrolledwindow.view, // > 3.34.0
  > box.horizontal > box.vertical > scrolledwindow.view { // > 3.25.90
    background-color: rgba($dark_sidebar_bg, 1);
    border-bottom-left-radius: $wm_radius + 1px;

    > viewport.frame > stack {
      background-color: transparent;

      list { // left-pane
        background-color: transparent;

        separator { background: none; }

        row.activatable:not(:hover):not(:active):not(:selected) {
          background-color: transparent;
        }
      }
    }
  }

  &.maximized, &.tiled, &.fullscreen {
    > stack {
      border-radius: 0 0 $maximized_radius $maximized_radius;
    }

    > leaflet > stack.background, // > 3.38.0
    > hdyleaflet > stack.background, // > 3.34.0
    > box.horizontal > stack.background {
      border-bottom-right-radius: $maximized_radius;

      > widget {
        > box.vertical > box.vertical { // Gnome 3.34 Wallpaper setting
          > scrolledwindow > viewport.frame {
            border-bottom-right-radius: $maximized_radius;
          }
        }
      }
    }

    > leaflet > box.vertical > scrolledwindow.view, // > 3.38.0
    > hdyleaflet > box.vertical > scrolledwindow.view, // > 3.34.0
    > box.horizontal > box.vertical > scrolledwindow.view { // > 3.25.90
      border-bottom-left-radius: $maximized_radius;
    }
  }
}

box.horizontal > separator.sidebar,
hdyleaflet > separator.sidebar,
leaflet > separator.sidebar,
leaflet > leaflet > separator.sidebar { // reset
  @extend %side_separator;
}


//
// Gnome system monitor
//

window#gnome-system-monitor.background.csd {
  > box.vertical > stack {
    background-color: $base_color;
    border-radius: 0 0 $wm_radius $wm_radius;

    > box.vertical > scrolledwindow {
      treeview.view:not(:hover):not(:selected):not(.progressbar):not(.trough) {
        background: none;
      }
    }
  }

  &.maximized, &.tiled, &.fullscreen {
    > box.vertical > stack {
      border-radius: 0 0 $maximized_radius $maximized_radius;
    }
  }
}


//
// Gnome-sound-recorder
//

window.background.csd > stack {
  > grid.vertical {
    > scrolledwindow {
      border: none;
      border-radius: 0 0 $wm_radius $wm_radius;

      > viewport.frame {
        list {
          border-radius: 0 0 $wm_radius $wm_radius;
        }
      }
    }

    scrolledwindow.frame.emptyGrid { border: none; } // Removed ugly borders
  }
}

window.background.csd {
  &.maximized, &.tiled, &.fullscreen {
    stack {
      > grid.vertical {
        > scrolledwindow {
          border-radius: 0 0 $maximized_radius $maximized_radius;

          > viewport.frame {
            list {
              border-radius: 0 0 $maximized_radius $maximized_radius;
            }
          }
        }
      }
    }
  }
}


//
// Gnome Contacts
//

window.background.csd {
  > deck > box > leaflet { // >= 40.0
    > headerbar:first-child {
      @extend %side_headerbar_left;

      &.selection-mode {
        color: $header_fg;

        > button:not(.flat):not(.suggested-action):not(.destructive-action):not(.titlebutton):not(.combo) { @extend %headerbar_buttons; }
      }
    }

    > headerbar:last-child {
      @extend %side_headerbar_right;

      &.selection-mode {
        color: $header_fg;
        border-color: $header_border;

        > button:not(.flat):not(.suggested-action):not(.destructive-action):not(.titlebutton):not(.combo) { @extend %headerbar_buttons; }
      }
    }
  }

  > deck > box > overlay > leaflet > overlay > widget > stack {
    background-color: $base_color;
  }

  > headerbar.titlebar.selection-mode {
    > hdyleaflet > headerbar,
    > leaflet > headerbar {
      color: $header_fg;
      border-color: $header_border;

      > button:not(.flat):not(.suggested-action):not(.destructive-action):not(.titlebutton) { @extend %headerbar_buttons; }
    }
  }

  > overlay > grid.horizontal {
    > frame:dir(ltr) > border { // Removed ugly borders
      border-top-width: 0;
      border-left-width: 0;
      border-bottom-width: 0;
    }

    > overlay > stack > box.horizontal > grid.horizontal {
      > scrolledwindow.contacts-contact-form {
        border-bottom-right-radius: $wm_radius + 1px;
      }
    }
  }

  > overlay > hdyleaflet,
  > overlay > leaflet,
  > deck > box > overlay > leaflet { // >= 40.0
    > stack {
      background-color: rgba($dark_sidebar_bg, 1);
      border-bottom-left-radius: $wm_radius;
    }

    > separator.sidebar {
      @extend %side_separator;
    }

    > overlay > scrolledwindow > viewport.frame {
      background-color: rgba($base_color, 1);
      border-bottom-right-radius: $wm_radius;

      > hdycolumn > stack > box.horizontal > box.vertical > box.horizontal {
        > button.image-button {
          @extend %circular_button;
          padding: 2px;
        }
      }
    }
  }

  &.maximized, &.tiled, &.fullscreen {
    > overlay > hdyleaflet,
    > overlay > leaflet {
      > stack > frame > grid.vertical {
        border-bottom-left-radius: $maximized_radius;
      }

      > overlay > scrolledwindow > viewport.frame {
        border-bottom-right-radius: $maximized_radius;
      }
    }
  }
}

entry.contacts-postal-entry {
  // background-color: transparent;
  @extend %Linked_entrys;

  &:focus {
    @if $variant == 'dark' { box-shadow: inset 0 0 0 1px $entry_highlight; }
    @if $variant == 'light' { box-shadow: 0 1px 1px 0 transparent, inset 0 0 0 1px $entry_highlight; }
  }
}

entry.contacts-postal-entry:focus + entry.contacts-postal-entry { border-top-color: $entry_highlight; }


//
// Epiphany (Gnome Web)
//

$question_bg_color: #FFEA00;

headerbar.titlebar.incognito-mode {
  entry {
    @include entry(header-normal);

    &:focus { @include entry(header-focus); }
    &:disabled { @include entry(header-insensitive); }
  }
}

// reset inverted foreground colour
notebook > box > stack > box.vertical > paned.vertical > overlay {
  > .floating-bar { color: rgba($fg_color, 0.75); }
}

// overrides foregrounds for 3.24's ssd-mode
.background headerbar entry {
  &.starred,
  &.non-starred {
    @include entry(header-normal);

    &:focus { @include entry(header-focus); }
    &:disabled { @include entry(header-insensitive); }
  }

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

// popover for downloaded lists
popover.background:not(.emoji-picker) > box.vertical {
  // For clean button
  button:not(.destructive-action):not(.suggested-action):only-child {
    &:active, &:checked { @include button(flat-active); }
  }
}

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

    > row.activatable {
      background-color: if($variant=='light', $bg_color, lighten($bg_color, 10%));
      color: rgba($fg_color, 0.85);
      border-radius: $bt_radius;
      border: 1px solid $borders_color;
      margin: 2px;
      @if $variant=='light' { box-shadow: $shadow_3, inset 0 0 0 1px rgba($borders_color, 0.01); }

      &:hover { @include button(hover); }
      &:active, &:checked { @include button(flat-active); }
    }
  }
}

// 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 {
      background-color: rgba($base_color, 0.35);
      color: rgba($fg_color, 0.85);
      border-bottom: 1px dashed rgba($borders_color, 0.05);
      padding: 6px;

      &:hover,
      &:active,
      &:checked { color: $fg_color; background-color: rgba($fg_color, 0.05); }

      button.flat {
        min-width: 16px;
        min-height: 16px;
        padding: 4px; // Same as of image.sidebar-icon
        // margin: 0 4px;
        border-radius: 100px;
        // -gtk-outline-radius: 100px;
      }
    }
  }
}

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

  label { margin-bottom: 2px; }

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

stack#titlebar_container.titlebar {
  > stack > headerbar,
  > headerbar.titlebar > deck > headerbar { // Gnome 3.38
    border-color: $header_bg;

    // entry.suggestion.url_entry {}
  }
}

notebook.main-notebook {
  > header.top {
    margin-top: 0;

    > tabs > tab {
      &:checked {
        border-top-color: $header_bg;
      }

      &:first-child { //Not use
        border-left-width: 0;
      }
    }
  }

  webkitwebview {
    border-radius: 0 0 $wm_radius $wm_radius;
  }
}

// Gnome version >= 40.0
window.background.csd {
  > deck > deck > fullscreenbox > flap > box > windowhandle {
    > headerbar.titlebar { // Gnome 40.0
      border-color: $header_bg;
    }
  }
}

.background tabbox {
  @if $monterey == 'false' {
    background-color: darken($header_bg, 10%);
    box-shadow: inset 0 -1px $borders_color;
    margin-top: -1px;
  } @else {
    background-color: $header_bg;
    border-bottom: 1px solid $borders_color;
    padding: 0 $container_padding / 2 $container_padding / 2;
  }

  > tab {
    @if $monterey == 'false' {
      @extend %tabs_tab;
    } @else {
      @extend %monterey_tab;

      + tab {
        margin-left: $container_padding / 2;
      }
    }

    button {
      @extend %flat_button;
      border-radius: 3px;
      border: none;
      padding: 0;
      min-height: $small_size;
      min-width: $small_size;

      &:hover {
        color: $fg_color;
        background-color: rgba($borders_color, 0.1);
      }

      &:active, &:active:hover {
        color: if($variant == 'light', darken($fg_color, 10%), lighten($fg_color, 10%));
        background-color: rgba($borders_color, 0.2);
      }

      &.tab-close-button {
        @if $monterey == 'false' {
          min-height: $small_size;
          min-width: $small_size;
          margin-top: 2px;
          margin-bottom: 2px;
        } @else {
          min-height: 16px;
          min-width: 16px;
          margin-top: 4px;
          margin-bottom: 4px;
          margin-right: -$container_padding;
        }
      }
    }
  }
}


//
// Gnome Music
//

window.background.csd {
  > box.vertical > overlay > stack.background {
    border-radius: 0 0 $wm_radius $wm_radius;
  }

  &.maximized, &.tiled, &.fullscreen {
    > box.vertical > overlay > stack.background {
      border-radius: 0 0 $maximized_radius $maximized_radius;
    }
  }
}


//
// Gnome Weather
//

#weather-page,
#weekly-forecast-frame {
  border-bottom-right-radius: $wm_radius;

  .maximized &, .tiled &, .fullscreen & {
    border-bottom-right-radius: $maximized_radius;
  }
}

#weather-page-content-view {
  border-bottom-right-radius: $wm_radius;
  border-bottom-left-radius: $wm_radius;

  .maximized &, .tiled &, .fullscreen & {
  border-bottom-left-radius: $maximized_radius;
    border-bottom-right-radius: $maximized_radius;
  }
}

//
// Gnome Clocks
//
window.background.csd.unified {
  > deck > deck > deck {
    > box.vertical > headerbar.titlebar.windowhandle {
      > viewswitchertitle > squeezer {
        > viewswitcher > box.horizontal {
          > button.radio {
            margin: 0;
            border-radius: 0;
          }
        }
      }
    }
  }

  &.maximized, &.tiled, &.fullscreen {
    > deck > box.vertical > headerbar.titlebar.windowhandle {
      border-top-left-radius: $maximized_radius;
      border-top-right-radius: $maximized_radius;
    }
  }
}


//
// Gnome Calendar
//

window.background.org-gnome-Calendar {
  .week-view weekgrid {
    event.color-light {
      &, & > stack > grid > label {
        color: rgba(black, 0.75);
      }
    }

    event.color-dark {
      &, & > stack > grid > label {
        color: rgba(white, 1);
      }
    }
  }
}


//
// Polari
//

.polari-room-list {
  .sidebar {
    background-color: $dark_sidebar_bg;
    border-bottom-left-radius: $wm_radius;
  }

  &.maximized, &.tiled, &.fullscreen {
    .sidebar {
      border-bottom-left-radius: $maximized_radius;
    }
  }
}

stack.view.polari-entry-area {
  background-color: $bg_color;
  border-top: 1px solid $borders_color;
  border-bottom-right-radius: $wm_radius;

  button.popup.flat.toggle.polari-nick-button {
    &:hover {
      background-color: rgba($fg_color, 0.15);
      box-shadow: none;
      background-image: none;
    }

    &:active, &:checked {
      background-color: rgba($fg_color, 0.25);
      box-shadow: none;
      background-image: none;
    }
  }

  .maximized &, .tiled &, .fullscreen & {
    border-bottom-right-radius: $maximized_radius;
  }
}

stack:disabled.view.polari-entry-area { background-image: image($bg_color); }


//
// Gnome Flashback
//

#gf-bubble,
#gf-osd-window,
#gf-input-source-popup,
#gf-candidate-popup {
  &, &.solid {
    color: lighten($osd_fg_color, 7%);
    background-color: $osd_bg_color;
    border: 1px solid darken($osd_bg_color, 8%);
    border-radius: 2px;
  }

  levelbar {
    block {
      &.low, &.high, &.full {
        background-color: $selected_bg_color;
        border-color: $selected_bg_color;
      }

      &.empty { background-color: darken($osd_bg_color, 5%); }
    }

    trough { background: none; }
  } // FIXME still needs button styling
}

#gf-input-source {
  min-height: 32px;
  min-width: 40px;

  &:selected {
    color: $selected_fg_color;
    background-color: $selected_bg_color;
    border-radius: 2px;
  }
}

gf-candidate-box {
  label {
    padding: 3px;
  }

  &:hover,
  &:selected {
    color: $selected_fg_color;
    background-color: $selected_bg_color;
    border-radius: 2px;
  }
}


//
// rhythmbox
//

%toolbar_radio_button {
  @if $variant == 'dark' { border: none; }

  &:active, &:checked {
    background-image: none;
    color: if($variant=='light', $selected_fg_color, $base_color);
    background-color: if($variant=='light', rgba(black, 0.5), darken(white, 25%));
    border-color: $borders_color;
  }
}

// add top-border to inline-toolbar
.sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar {
  box-shadow: inset 0 1px $borders_color;
  padding: 4px;
  background-color: darken($bg_color, 3%);

  button.image-button {
    @extend %toolbar_radio_button;

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

// tweak sidebar styling
.sidebar-paned {
  scrolledwindow { border: none; }

  // treeview.view.sidebar { }
}

// 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;
    border-bottom: none;
    box-shadow: none;
    background-color: transparent;

    > toolitem > .linked > button,
    > toolitem > box.horizontal > button {
      min-height: 36px;
      min-width: 36px;
      padding: 0;
      margin-top: 8px;
      margin-bottom: 8px;

      @extend %toolbar_radio_button;
    }
  }

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

    > border { border: none; }
  }
}

// hard-coded spacing depends on non-scalable unit,
// seems cover-art widget is the most biggest thing?
window.background > box.vertical > toolbar.primary-toolbar {
  > toolitem {
    > .linked > button.image-button.raised { // 'shuffle/repeat'
      min-height: 36px;
      min-width: 36px;
      padding: 0;
      margin: 0;
      @extend %toolbar_radio_button;

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

    button.flat.scale { // 'volume'
      min-height: 24px;
      min-width: 36px;
      padding: 0;
      margin-top: 8px;
      margin-bottom: 8px;
    }

    > box.horizontal:not(.linked) > button.toggle,
    > .linked > button:not(.toggle):not(.raised):not(.flat) {
      min-height: 28px;
      min-width: 28px;
      padding: 0;
      margin: 0;
      @extend %toolbar_radio_button;
    }
  }
}


//
// Gnome Calculator
//

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

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

  > grid.vertical > box.vertical > widget,
  > grid.vertical > box.vertical > box.vertical > widget,
  > grid.vertical > box.vertical grid.math-buttons {
    button {
      font-weight: 700;

      &:not(.suggested-action) {
        &:active { @include button(flat-active); border-color: $borders_color; }
        &:checked { @include button(flat-checked); border-color: $borders_color; }
      }

      // &.suggested-action {  // '=' button
      // }
    }
  }
}

//
// Fractal
//
.background.csd.main-window {
  .sidebar.rooms-sidebar {
    border-bottom-left-radius: $wm_radius;
  }

  &.maximized, &.tiled, &.fullscreen {
    .sidebar.rooms-sidebar {
      border-bottom-left-radius: $maximized_radius;
    }
  }
}

//
// Seahorse
//

window.background.csd {
  > leaflet.unfolded {
    > scrolledwindow > viewport.frame {
      > list { // left side
        background-color: $dark_sidebar_bg;
        border-bottom-left-radius: $wm_radius;

        > row {
          @extend %sidebar_row;
        }
      }
    }

    > box.vertical > stack {
      background-color: $base_color;
      border-bottom-right-radius: $wm_radius;
    }

    // > box.vertical > searchbar > revealer > box { background-color: $base_color; }
  }
}

//
// documents-scrolledwi (Totem, Documents, EvView)
//
.documents-scrolledwin {
  background-color: transparent;

  .content-view:not(:selected):not(:hover) {
    background-color: transparent;
    // border-radius: 0 0 $wm_radius $wm_radius;
  }

  .content-view:hover { background-color: rgba($fg_color, 0.08); }

  viewport.frame { // Documents
    background-color: transparent;

    widget > frame.content-view:not(:selected):not(:hover) {
      border { border: none; }

      background-color: transparent;
      // border-radius: 0 0 $wm_radius $wm_radius;
    }
  }
}

// Documents

window.background.csd { // Documents actionbar
  > box.vertical > overlay > stack > box.vertical {
    > actionbar > revealer > box {
      border-radius: 0 0 $wm_radius $wm_radius;
    }
  }

  &.maximized, &.tiled, &.fullscreen {
    > box.vertical > overlay > stack > box.vertical {
      > actionbar > revealer > box {
        border-radius: 0 0 $maximized_radius $maximized_radius;
      }
    }
  }
}

//
// Document Viewer
//
window.background.csd {
  > box.vertical {
    > scrolledwindow {
      > iconview.view.content-view:not(:hover):not(:selected) {
        background-color: transparent;
        border-radius: $wm_radius;
      }
    }

    > paned.horizontal > box.vertical > scrolledwindow {
      > treeview.view:not(:hover):not(:selected) { background-color: transparent; }
    }
  }

  evview.view.content-view {
    background-color: transparent;
    border-radius: 0 0 $wm_radius $wm_radius;
  }

  &.maximized, &.tiled, &.fullscreen {
    > box.vertical {
      > scrolledwindow {
        > iconview.view.content-view:not(:hover):not(:selected) {
          border-radius: $maximized_radius;
        }
      }
    }

    evview.view.content-view {
      border-radius: 0 0 $maximized_radius $maximized_radius;
    }
  }
}

//
// Archive Manager (File roller)
//
window.background.csd {
  > grid.horizontal > paned.horizontal {
    > scrolledwindow {
      border-radius: 0 0 $wm_radius $wm_radius;
      background-color: $base_color;

      treeview.view:not(:hover):not(:selected) {
        background: none;
      }

      > treeview.view:not(:hover):not(:selected) {
        background-color: $base_color;
      }
    }

    > box.vertical {
      > scrolledwindow {
        border-radius: 0 0 0 $wm_radius;
        background-color: $bg_color;

        treeview.view:not(:hover):not(:selected) {
          background: none;
        }
      }
    }
  }

  &.maximized, &.tiled, &.fullscreen {
    > grid.horizontal > paned.horizontal {
      > scrolledwindow {
        border-radius: 0 0 $maximized_radius $maximized_radius;
      }

      > box.vertical {
        > scrolledwindow {
          border-radius: 0 0 0 $maximized_radius;
        }
      }
    }
  }
}

//
// Eye of GNOME Image Viewer
//
window.background.csd {
  > box.vertical > box.vertical > box.vertical{
    > paned.horizontal {
      > separator {
        background-image: none;
        background-color: $header_border;
      }
    }
  }
}

//
// Gnome-Disk
//
window.background.csd {
  > box.vertical > paned.horizontal {
    > scrolledwindow {
      treeview.view {
        min-width: 240px;
        @extend %row_activatable;

        &:not(:selected):not(:hover) {
          background-color: transparent;
        }
      }
    }

    > separator {
      background-image: if($variant == 'light', image($solid_borders_color), image($header_border));
    }
  }

  > paned.titlebar {
    background-color: $header_bg;
    box-shadow: inset 0 1px $highlight_color;

    > headerbar {
      background: none;
      box-shadow: none;
    }

    > separator {
      background: none;
    }
  }
}

//
// Gnome Todo
//
.org-gnome-Todo {
  stack.background, scrolledwindow.background {
    background: none;
  }

  stack.background {
    tasklistview {
      .view {
        border-radius: 0 0 $wm_radius $wm_radius;

        .new-task-row {
          // border-radius: $bt_radius; // not use!

          button, entry {
            border-radius: 3px;
            border: none;
          }

          .linked > button,
          .linked > entry {
            &:not(:only-child):first-child { border-radius: 3px 0 0 3px; }
            &:not(:only-child):not(:first-child):last-child { border-radius: 0 3px 3px 0; }
          }
        }
      }
    }
  }
}

//
// Geary
//

.geary-main-window.background.csd, // <= 3.38
window#GearyMainWindow.background.csd { // <= 3.32
  > overlay > box.vertical {
    > paned {
      > separator { @extend %side_separator; }

      > .sidebar {
        border-bottom-left-radius: $wm_radius;

        > searchbar {
          @extend %side_searchbar;
        }

        treeview.view.sidebar {
          padding: 3px 0;

          &:hover {
            color: $fg_color;
            background-color: rgba($fg_color, 0.1);
          }

          &:selected {
            color: $fg_color;
            background-color: rgba($fg_color, 0.15);
          }
        }
      }
    }
  }

  paned.geary-sidebar-pane-separator {
    > separator {
      margin-left: -1px;
      background: none;
    }

    statusbar {
      margin: -8px -12px;
      border: none;
      background-color: rgba($dark_sidebar_bg, 1);
      border-bottom-left-radius: $wm_radius;

      frame > border { border: none; }
    }

    frame.geary-conversation-frame {
      background-color: rgba($dark_sidebar_bg, 1);

      > border { border: none; }

      scrolledwindow {
        background-color: $base_color;
        margin: 6px 6px 6px 0;
        padding: 6px 0;
        border: 1px solid $borders_color;
        border-radius: $bt_radius;

        treeview.view {
          background-image: none;

          &:hover { background-color: rgba($fg_color, 0.1); }

          &:selected {
            background-color: rgba($fg_color, 0.15);
            color: if($variant == 'light', $fg_color, $selected_fg_color);
          }

          &:not(:hover):not(:selected) {
            background: none;
          }
        }
      }
    }
  }

  stack#conversation_viewer { // 3.28
    background-color: $base_color;
    border-bottom-right-radius: $wm_radius + 1px;

    scrolledwindow.geary-conversation-scroller {
      viewport.frame {
        background-color: $base_color;
        border-bottom-right-radius: $wm_radius;

        list.conversation-listbox {
          background-color: transparent;
        }
      }
    }

    searchbar {
      > revealer > box {
        background-color: $base_color;
        border-color: $dark_sidebar_border;
      }
    }
  }

  &.maximized, &.tiled, &.fullscreen {
    > overlay > box.vertical {
      > paned {
        > .sidebar {
          border-bottom-left-radius: $maximized_radius;
        }
      }
    }

    stack#conversation_viewer {
      border-bottom-right-radius: $maximized_radius + 1px;

      scrolledwindow.geary-conversation-scroller {
        viewport.frame {
          border-bottom-right-radius: $maximized_radius;
        }
      }
    }

    paned.geary-sidebar-pane-separator {
      statusbar {
        border-bottom-left-radius: $maximized_radius;
      }
    }
  }
}

// >= 40.0
.geary-main-window {
  &.background.csd.unified {
    background: none;

    .geary-main-layout { // >= 40.0 reset
      > leaflet > leaflet > headerbar { // left and center headerbar
        &:first-child { box-shadow: none; }
        &:last-child { box-shadow: none; }
      }

      > leaflet > headerbar { // right headerbar
        box-shadow: none;
      }
    }
  }

  .geary-main-layout { // >= 40.0
    background-color: $dark_sidebar_bg;

    > leaflet > leaflet > headerbar { // left and center headerbar
      &:first-child { @extend %side_headerbar_left; background-color: transparent; }
      &:last-child { @extend %side_headerbar_right; }
    }

    > leaflet > headerbar { // right headerbar
      @extend %side_headerbar_right;
    }
  }

  frame.geary-folder-frame { // left side
    background-color: transparent;

    > border { border: none; }

    scrolledwindow {
      treeview.view.sidebar {
        background-color: transparent;

        &:hover {
          color: $fg_color;
          background-color: rgba($fg_color, 0.1);
        }

        &:selected {
          color: $fg_color;
          background-color: rgba($fg_color, 0.15);

          &:hover {
            background-color: rgba($fg_color, 0.12);
          }
        }
      }
    }
  }

  frame.geary-conversation-frame { // center part
    background-color: $base_color;

    > border { border: none; }

    scrolledwindow {
      // margin: -1px 0;
      padding: 0 4px;
      background-color: $base_color;

      treeview.view {
        background-image: none;
        border: 2px solid transparent;
        border-radius: $mn_radius;
        outline: none;
        padding: 6px 0;
        margin: 0 4px;

        &:hover {
          background-color: rgba($fg_color, 0.1);
          border-color: transparent;
        }

        &:selected, &:active {
          border-color: transparent;
          border-radius: $mn_radius;
          background-color: rgba($fg_color, 0.15);
          color: if($variant == 'light', $fg_color, $selected_fg_color);
        }

        &:not(:hover):not(:selected) {
          background: none;
        }
      }
    }
  }

  leaflet > leaflet > box.vertical {
    searchbar { // center part searchbar
      > revealer > box {
        background-color: $base_color;
        border-color: $dark_sidebar_border;
      }
    }

    > revealer > components-conversation-actions { // center part actionbar
      margin-top: -1px;
      background-color: $base_color;
      border-color: transparent; // not use?
      box-shadow: inset 0 1px $dark_sidebar_border;

      button {
        @extend %flat_button;
      }

      > .linked > button {
        border-radius: $bt_radius;
        margin: 0 1px;
      }
    }
  }

  separator.geary-sidebar-pane-separator { background-color: $dark_sidebar_border; }

  geary-conversation-viewer#conversation_viewer { // right side
    background-color: $base_color;

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

      > row.activatable {
        border: 1px solid $borders_color;
        border-bottom-width: 0;

        &:first-child {
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
        }
      }

      .geary-attachment-pane {
        border-radius: 0 0 8px 8px;

        actionbar.background {
          background-color: transparent;

          > revealer > box {
            border-radius: 0 0 7px 7px;
          }
        }
      }

      geary-composer-editor {
        > box.background {
          background-color: transparent;

          > actionbar > revealer > box {
            border-radius: 0 0 7px 7px;
          }
        }
      }
    }

    searchbar {
      > revealer > box {
        background-color: $base_color;
        border-color: $dark_sidebar_border;
      }
    }
  }
}

geary-composer-box.background.csd {
  geary-composer-editor {
    > box.background {
      background-color: transparent;

      > actionbar > revealer > box {
        border-radius: 0 0 $wm_radius $wm_radius;
      }
    }
  }
}

// Accounts setting dialog
.geary-accounts-editor-pane-content {
  frame:not(.geary-signature) {
    > border { border: none; }

    > list {
      @extend %circular_list;

      > row.activatable {
        @extend %circular_row;

        > grid > entry { background-color: $divider_color; }
      }
    }
  }
}


//
// Gnome-Box
//

window.background.csd {
  > overlay > stack.content-bg {
    background-color: transparent;
    border-radius: 0 0 $wm_radius $wm_radius;

    > notebook.frame {
      border: none;

      > stack {
        border-radius: 0 0 $wm_radius $wm_radius;

        > box.transparent-bg > scrolledwindow > viewport.frame > grid > stack > box {
          > frame {
             > border {
              border: 1px solid $borders_color;
              border-bottom: none;
              border-radius: $bt_radius $bt_radius 0 0;
            }

            > stack > list {
              border-radius: $bt_radius $bt_radius 0 0;
            }
          }

          > toolbar.inline-toolbar { border-top: 1px solid $borders_color; }
        }
      }
    }
  }
}

.app-notification.boxes-toast {
  > button.circular.flat {
    padding: 2px;
  }
}

//
// Dialogs
//

dialog.background.csd {
  background-image: none;
  background-color: $dialog_bg_color;
  border-radius: 0 0 $wm_radius $wm_radius;

  &.maximized { border-radius: 0 0 $maximized_radius $maximized_radius; }

  > headerbar {
    &.titlebar {
      > label:not(.title):not(.subtitle) { // wallpaper set dialog
        font-weight: 700;
      }
    }
  }

  > box.vertical.dialog-vbox {
    &.view { background: none; }

    > leaflet.unfolded > box.vertical.view { background: none; } // Formats setting dialog gnome >= 41.0

    > grid.horizontal {
      > scrolledwindow.frame { //removed ugly boders for nautilus batch renaming dialog
        border: none;

        > viewport.frame {
          border: none;

          list:first-child { border-radius: 0 0 0 $wm_radius; }
          list:last-child { border-radius: 0 0 $wm_radius 0; }
        }
      }

      > stack {
        > scrolledwindow.frame { // reset border for totem setting dialog
          border: 1px solid $borders_color;
        }
      }
    }

    > stack,
    > stack > stack {
      > scrolledwindow {
        border-radius: 0 0 $wm_radius $wm_radius;
        background-color: $base_color;

        iconview.view:not(:hover):not(:selected):not(:active) { // Wallpaper setting window
          background-color: transparent;
        }
      }
    }

    > stack {
      > scrolledwindow > viewport.frame {
        > list {
          border-radius: 0 0 $wm_radius $wm_radius;

          row.activatable:not(:hover):not(:selected):not(:active) {
            background-color: transparent;
          }
        }
      }

      > box.vertical > stack.view {
        > scrolledwindow > treeview.view:not(:hover):not(:selected):not(:active) {
          background-color: transparent;
        }
      }

      toolbar.toolbar {
        border-radius: 0 0 $wm_radius $wm_radius;
        border-width: 1px 0 0 0;
      }

      > notebook > stack { // Control center wifi setting 3.36 or later
        border-radius: 0 0 $wm_radius $wm_radius;
      }
    }

    > notebook {
      > stack {
        border-radius: 0 0 $wm_radius $wm_radius;

        > box.horizontal > notebook > stack {  // Control center wifi setting
          border-radius: 0 0 $wm_radius $wm_radius;
        }
      }
    }

    separator.vertical { background-color: $borders_color; }

    // Outline for low res icons
    .lowres-icon { // FIXME: not use
      -gtk-icon-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
    }

    // Dropshadow for large icons
    .icon-dropshadow { // FIXME: not use
      -gtk-icon-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    }

    > .dialog-action-box {
      > .dialog-action-area {
        padding: 3px 6px 6px;
      }
    }
  }

  stack scrolledwindow {
    &.frame {
      border-radius: $bt_radius;

      textview.view {
        border-radius: $bt_radius;

        > text {
          background: none;
        }
      }

      treeview.view:not(:hover):not(:selected) { background: none; }
    }

    viewport.frame {
      &.view { border-radius: $bt_radius; }
    }
  }

  > .dialog-vbox > .dialog-action-box {
    > .dialog-action-area {
      margin: 0 6px 6px;
    }
  }
}


//
// Extensions
//
window.background.csd {
  > stack, // GameMode setting
  > stack > scrolledwindow > viewport > box, // User Themes (Workspace) setting
  > box > stack > scrolledwindow > viewport > box {
    > list {
      @extend %circular_list;

      row.activatable { @extend %circular_row; }
    }
  }

  stack stack stack frame, // ArcMenu setting
  > stack > stack > box > frame, // Night Theme Switcher setting
  > stack > stack > box > box > frame, // Night Theme Switcher setting bottom lists
  > stack > box > stack > box > frame, // ArcMenu setting
  > stack > box > stack > scrolledwindow > viewport frame, // ArcMenu setting
  > stack > box > stack > box > scrolledwindow > viewport > frame, // ArcMenu setting
  > stack > grid > scrolledwindow > viewport > box > frame { // GSConnect setting
    > border { border: none; }

    > list {
      @extend %circular_list;

      row.activatable { @extend %circular_row; }
    }
  }

  > stack > box > box > list,
  > stack > box > stack > scrolledwindow > viewport > list { // ArcMenu setting sidebar
    border-bottom-left-radius: $wm_radius;
  }

  &.maximized, &.tiled, &.fullscreen {
    > stack > box > box > list,
    > stack > box > stack > scrolledwindow > viewport > list { // ArcMenu setting sidebar
      border-bottom-left-radius: $maximized_radius;
    }
  }
}

//
// Unified window (> = Gnome 40)
//

window.background.csd.unified {
  headerbar {
    &, &.selection-mode {
      box-shadow: none;
    }
  }

  // ...and add it on the window itself
  > decoration-overlay {
    box-shadow: inset 0 0 0 1px $highlight_color;
  }

  &,
  > decoration,
  > decoration-overlay {
    border-radius: $wm_radius;
  }

  &.tiled,
  &.tiled-top,
  &.tiled-right,
  &.tiled-bottom,
  &.tiled-left,
  &.maximized,
  &.fullscreen {
    > decoration-overlay {
      box-shadow: none;
    }

    &,
    > decoration,
    > decoration-overlay {
      border-radius: $maximized_radius;
    }
  }
}
