/************
 * Nautilus *
 ************/
// based css:
// https://gitlab.gnome.org/GNOME/nautilus/blob/master/src/resources/css/Adwaita.css
// hard-coded css:
// https://gitlab.gnome.org/GNOME/nautilus/blob/master/src/resources/css/nautilus.css

$theme_list_radius: $window-radius - $space-size;

.nautilus-window {
  &.background.csd.unified {
    headerbar { box-shadow: none; } // reset
  }

  &.background.csd {
    background-color: if($topbar == 'dark' and $variant == 'light', $titlebar, $base);
    border-radius: 0 0 $window-radius $window-radius;

    headerbar {
      padding-left: $space-size * 2;
      background-color: if($topbar == 'dark' and $variant == 'light', $titlebar, $base);
      box-shadow: inset 0 1px highlight($titlebar);
    }

    > grid.horizontal > paned.horizontal > separator,
    > deck > box.vertical > paned.horizontal > separator { margin-left: if($topbar == 'dark' and $variant == 'light', -1px, 0); }

    placessidebar {
      background-color: transparent;
      border-radius: $window-radius;
      color: $titlebar-text-secondary;
      margin: 0 0 $space-size * 2 $space-size * 2;

      > viewport.frame {
        border-radius: $theme_list_radius;
        background-color: if($topbar == 'dark' and $variant == 'light', transparent, rgba($primary, 0.08));

        > list {
          padding: 12px 0 12px 0;
          background: none;
          border-radius: $theme_list_radius;

          > row.activatable {
            border-radius: 0;
            margin: -8px 0 -8px 0;

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

            &, image.sidebar-icon, label.sidebar-label {
              color: $titlebar-text-secondary;
            }

            image.sidebar-icon {
              padding-right: $space-size;
            }

            label.sidebar-label {
              color: inherit;
              min-height: 54px;
              padding: 0 0 0 $space-size;
            }

            &.sidebar-placeholder-row { background-color: transparent; }

            > revealer.sidebar-revealer {
              padding-left: 12px;
              padding-right: 0;

              > widget > box {
                padding-right: 12px;
                padding-left: 0;
              }
            }

            &:drop(active) {
              border-radius: 0;

              @if $topbar == 'dark' {
                border-radius: $circular_radius 0 0 $circular_radius;
              }

              background-color: rgba($drop_target_color, 0.1);

              &, image.sidebar-icon, label.sidebar-label {
                color: $drop_target_color;
              }
            }

            button.sidebar-button {
              @if $topbar == 'dark' { @extend %button-on-dark; }
            }

            &:hover {
              image.sidebar-icon, label.sidebar-label { color: $primary; }
            }

            &:selected {
              background-color: transparent;
              font-weight: 700;
              // font-size: larger;

              image.sidebar-icon, label.sidebar-label { color: $primary; }

              > revealer.sidebar-revealer > widget > box {
                background-color: $base;
                border-image-width: 10px 10px 10px 46px;
                border-image-slice: 10 10 10 46;
                border-image-repeat: stretch;
                border-image-source: -gtk-scaled(url("assets/row-selected#{$blackness-asset-suffix}#{$theme-asset-suffix}.png"),
                                                 url("assets/row-selected#{$blackness-asset-suffix}#{$theme-asset-suffix}@2.png"));

                label.sidebar-label {
                  padding-left: 14px;
                }
              }

              button.sidebar-button {
                color: $primary;

                @extend %button-flat-simple;
              }
            }

            &:disabled {
              &, image.sidebar-icon, label.sidebar-label {
                color: $titlebar-text-secondary-disabled;
              }
            }
          }

          > separator { background: none; }
        }
      }

      scrollbar {
        background: none;
        border: none;
        margin: 2px 0;
      }

      > undershoot {
        &.top {
          background: none;
        }

        &.bottom {
          background: none;
        }
      }

      > overshoot {
        &.top {
          border-radius: $theme_list_radius $theme_list_radius 0 0;
        }

        &.bottom {
          border-radius: 0 0 $theme_list_radius $theme_list_radius;
        }
      }
    }

    .nautilus-list-view {
      background-color: transparent;
      border-radius: $window-radius;

      treeview.view:not(:hover):not(:active):not(:selected) {
        background-color: transparent;
        border-radius: 0;

        > header > button {
          &:first-child { border-top-left-radius: $window-radius; }
          &:last-child { border-top-right-radius: $window-radius; }
        }
      }
    }

    notebook {
      background: none;
      margin: if($topbar == 'dark' and $variant == 'light', (0 6px 6px 0), 0);

      > header {
        padding: 0 16px;
        background: none;
        border-color: if($topbar == 'dark' and $variant == 'light', transparent, $solid-border);

        tab {
          color: $titlebar-text-secondary;

          &:hover:not(:checked):not(:active) {
            color: $titlebar-text;
            background-color: if($topbar == 'dark', rgba($titlebar-text, 0.05), $fill);
          }

          &:disabled { color: $titlebar-text-secondary-disabled; }

          &:checked, &:active {
            color: $text;
            border-color: if($topbar == 'dark' and $variant == 'light', transparent, $solid-border);

            &:disabled { color: $text-disabled; }

            button.flat { @extend %button-flat-simple; }
          }

          button.flat {
            @if $topbar == 'dark' {
              @extend %button-on-dark;
            }
            @else {
              @extend %button-flat-simple;
            }
          }
        }
      }

      > stack {
        background-color: $base;
        border-radius: $window-radius - 2px;
      }

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

      scrolledwindow .view:selected {
        background-color: mix($primary, $base, 15%);
      }

      placesview {
        > stack > frame > scrolledwindow > viewport > list { background-color: transparent; }
        > actionbar {
          background-color: transparent;
          border-radius: 0 0 $window-radius $window-radius;

          > revealer > box { background-color: transparent; }
        }
      }
    }

    paned > separator {
      background: none;

      &.wide {
        min-width: 0;
        min-height: 0;
        background: none;
      }
    }
  }

  &.maximized { // No border radius when window maximized
    &, placessidebar { border-radius: 0; }
  }

  // Floating status bar
  .floating-bar {
    min-height: $menuitem-size;
    padding: $space-size / 2;
    margin: $space-size;
    border-style: none;
    border-radius: $circular-radius;
    background-color: rgba($background, 0.95);

    button {
      margin: (32px - $small-size) / 2;

      @extend %small-button;
    }
  }
}

// >= 42.0
.windowhandle .linked.nautilus-path-bar {
  background-color: $titlebar-fill;
  border-radius: $circular-radius;
  margin: $space-size 0;

  button:not(.suggested-action):not(.destructive-action) {
    margin-top: 0;
    margin-bottom: 0;
    border-radius: $circular-radius;

    &.current-dir {
      color: $titlebar-text;

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

// .nautilus-canvas-item {
//   border-radius: $corner-radius;
// }

.nautilus-canvas-item.dim-label,
.nautilus-list-dim-label {
  color: $text-secondary;
}

%desktop-canvas-item,
.nautilus-desktop.nautilus-canvas-item {
  // background-color: $scrim;
  color: on(dark);
  text-shadow: $text-shadow;
}

// Toolbar

@keyframes nautilus-operations-button-needs-attention {
  to { background-color: $overlay-focus; }
}

.nautilus-operations-button-needs-attention {
  animation: nautilus-operations-button-needs-attention $ripple-fade-out-duration $ease 2 alternate;
}

.nautilus-operations-button-needs-attention-multiple {
  animation: nautilus-operations-button-needs-attention $ripple-fade-out-duration $ease 6 alternate;
}

.linked:not(.vertical) > button:not(.suggested-action):not(.destructive-action):not(:only-child).disclosure-button { @extend %circular-button; }

// Path bar
.path-bar-box {
  transition: background-color $duration $ease-out;
  margin: $space-size 0;
  border-radius: $circular-radius;

  button { margin: 0; } // reset the margin

  &.width-maximized { background-color: $titlebar-fill; }

  // workaround for 3.30.1
  &.background.frame {
    border-style: none;
    background-color: $titlebar-fill;
  }

  // for 3.30
  .path-bar button {
    label:not(:only-child) {
      &:first-child { margin-left: 0; }

      &:last-child { margin-right: 0; }
    }
  }

  // for 3.32
  .linked.nautilus-path-bar button:not(.suggested-action):not(.destructive-action) {
    padding-left: ($medium-size - 12px) / 2;
    padding-right: ($medium-size - 12px) / 2;
    margin-left: 1px;
    margin-right: 1px;

    label:not(:only-child) {
      &:first-child { margin-left: 0; }

      &:last-child { margin-right: 0; }
    }

    &.text-button {
      min-width: 0;
      border-radius: $circular_radius;
    }

    &.text-button.image-button {
      border-radius: $circular_radius;
      image:not(:only-child) { margin: 0; }
    }

    &:last-child:dir(ltr),
    &:first-child:dir(rtl) {
      background-color: rgba($titlebar-text, 0.08);

      &:disabled {
        background-color: transparent;
        color: $titlebar-text-disabled;
      }
    }
  }
}

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

  &.unknown {
    background-color: $track;
    color: $track;
  }

  &.used {
    background-color: $primary;
    color: $primary;
  }

  &.free {
    background-color: $track-disabled;
    color: $track-disabled;
  }
}

// View
// Hide superfluous treeview drop target indication
.nautilus-list-view .view:not(.dnd) {
  // border-bottom: 1px solid $divider;
}

.search-information {
  padding: 2px;
  border-bottom: 1px solid $divider;
  background-color: $base;
  color: $text;
}

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

.conflict-row:not(:selected) { background-color: mix($warning, $base, percentage(0.3)); }

// Icon view
.nautilus-window flowboxchild {
  // .icon-background { background-color: black; }

  .icon-item-background {
    padding: 4px;
    border-radius: $bar-size;
  }

  &:selected {
    background-color: transparent;

    .icon-item-background { @extend %selected_items_color; }
  }
}

.nautilus-window notebook :not(treeview).view {
  border-radius: $bar-size;

  selection,
  &:selected {
    @extend %selected_items_color;
  }
}

// Batch rename dialog
dialog.background > box.dialog-vbox.vertical > grid.horizontal {
  > scrolledwindow.frame { border-style: none; }

  > box.horizontal:last-child {
    margin: -6px 0 0 -6px;
    border-top: 1px solid $divider;

    > label { margin: 0 8px; }

    > box > button { border-radius: 0; }
  }
}

// Tweak to fix the messy sizing of the popover menu
.nautilus-window > popover.menu:not(:last-child) {
  padding: 3px;

  > stack > box > box > box {
    margin-top: -6px;

    > box {
      margin-bottom: -6px;

      &.linked { margin-top: 1px; }
    }
  }

  separator { margin-bottom: -2px; }
}

.nautilus-menu-sort-heading {
  // min-height: 26px;
  // padding-left: 5px;
  // padding-right: 5px;
  margin: 1px 3px;
  font-weight: 500;

  &:disabled { color: $text-secondary; }
}

// Make operations button circular
.nautilus-window headerbar revealer > button { @extend %circular-button; }

// Ensure paned separator rendering. See issue #84 for details.
.nautilus-window paned > separator { background-color: $base-alt; }


/*********
 * gedit *
 *********/
// based css:
// https://gitlab.gnome.org/GNOME/gedit/blob/master/gedit/resources/css/gedit.adwaita.css
// hard-coded css:
// https://gitlab.gnome.org/GNOME/gedit/blob/master/gedit/resources/css/gedit-style.css

window.org-gnome-gedit,
window.background.csd {
  > paned.titlebar {
    box-shadow: inset 0 -1px $divider, inset 0 1px highlight($titlebar);
    background-color: $titlebar;

    &:backdrop {
      background-color: $titlebar-backdrop;
    }

    > separator, > headerbar { background-color: transparent; }
  }
}

.gedit-side-panel-paned {
  // 'file-browser' pane
  > box.vertical > stack > grid.horizontal {
    > box.horizontal {  // header-part
      margin: 4px 2px;
    }

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

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

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

// Only normal state is handle
.open-document-selector-path-label {
  color: $text-secondary;
  font-size: smaller;
}

// Only normal state is handle
.open-document-selector-match {
  background-color: $warning;
  color: on($warning);
}

.gedit-document-panel {
  background-color: $base-alt;
  border-bottom-left-radius: $window-radius;

  // Try to look as the notebook tab close button
  row button.flat {
    margin-top: 8px;
    margin-bottom: 8px;

    @extend %small-button;
  }
}

.gedit-document-panel-group-row:not(:first-child) {
  border-top: 1px solid $divider;
}

.gedit-side-panel-paned statusbar {
  border-top: 1px solid $divider;
  border-radius: 0 0 $window-radius $window-radius;
}

.gedit-search-slider {
  margin: 0 6px 8px;
  padding: $space-size;
  background-color: $surface;
  color: $text-secondary;
  box-shadow: $shadow-z4;
  border-radius: 0 0 $window-radius $window-radius;

  .linked:not(.vertical) > entry {
    border-radius: $corner-radius;
    @extend %entry_raised;

    .gedit-search-entry-occurrences-tag {
      all: unset;
      color: $text-secondary;
    }

    $buttons_width: $small-size * 2 + $space-size * 3;

    &:dir(ltr):not(:only-child) {
      margin-right: -$buttons_width;
      padding-right: $buttons_width;

      .gedit-search-entry-occurrences-tag { margin-left: $space-size; }

      image.right { margin-right: 0; }
    }

    &:dir(rtl):not(:only-child) {
      margin-left: -$buttons_width;
      padding-left: $buttons_width;

      .gedit-search-entry-occurrences-tag { margin-right: $space-size; }

      image.left { margin-left: 0; }
    }

    &:not(.error) { background-color: $surface; }

    &.error ~ button {
      color: on($error, secondary);

      &:hover, &:active { color: on($error); }

      &:disabled { color: on($error, secondary-disabled); }
    }
  }

  .linked > button {
    border: solid $space-size transparent;
    border-radius: $circular-radius;

    @extend %button-flat-simple;
    @extend %small-button;

    &:last-child:dir(ltr),
    &:not(:first-child):dir(rtl) {
      margin-left: -$space-size / 2;
      border-radius: $circular-radius;
    }

    &:first-child:dir(rtl),
    &:not(:last-child):dir(ltr) {
      margin-right: -$space-size / 2;
      border-radius: $circular-radius;
    }
  }
}

frame.gedit-map-frame > border {
  &:dir(ltr) { border-style: none none none solid; }
  &:dir(rtl) { border-style: none solid none none; }
}


/**********
 * Tweaks *
 **********/

// the sidebar
.tweak-categories {
  // padding: 4px 0;
  // background-color: shade(@theme_bg_color, 0.99);
  background-image: image($base-alt);

  separator { @extend %hide_separators; }

  .csd & {
    border-bottom-left-radius: $window-radius;
  }
}

.tweak {
  // padding-top: 3px;
  padding: 3px;

  &.title:hover { box-shadow: none; }
}

.tweak-group-white,
.tweak-white,
.tweak-white:hover {
  // background-color: white;
  background-image: image($base);
}

.tweak-startup,
.tweak-startup:hover {
  // background-color: lighter(shade(@theme_bg_color, 0.9));
  background-image: image($base);
}

.tweak-group-startup {
  // background-color: @view_separators;
  background-image: image($base);
  // border: 1px solid $frame;

  @extend %circular_list;

  row.activatable { @extend %circular_row; }

  row.tweak-startup {
    border-radius: $corner-radius;
    background-color: transparent;
    background-image: none;
  }
}

// Workaround for 3.26
list {
  &.tweak-group {
    list {
      @extend %circular_list;

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

// Add more spaces between title and list
row#Focus,
row#ClickMethod,
row#PrimaryWorkspaceTweak, // for 3.26.0
row#workspaces-only-on-primary {
  margin-top: 4px;
}

// See https://github.com/nana-4/materia-theme/issues/432
leaflet.titlebar, hdyleaflet.titlebar {
  > .titlebar.tweak-titlebar-right, > .titlebar.tweak-titlebar-left {
    background-color: inherit;
    box-shadow: inherit;
    // Remove only background-color transition.
    // This shouldn't be necessary, but otherwise it gets lag...
    transition: color $duration $ease-out;

    + separator {
      background-color: inherit;
      background-image: image($titlebar-divider);
    }
  }
}

// >= 45.0
list.navigation-sidebar {
  border-bottom-left-radius: $window-radius;

  > separator {
    background-color: transparent;
  }
}


/************************
 * Gnome Control Center *
 ************************/
window.background.csd {
  > headerbar.titlebar {
    > leaflet.unfolded,
    > hdyleaflet.unfolded {
      > headerbar {
        &:first-child:not(:only-child) {
          border-top-left-radius: $window-radius;
        }

        &:last-child:not(:only-child) {
          border-top-right-radius: $window-radius;
        }

        &:first-child:only-child, &:last-child:only-child {
          border-top-right-radius: $window-radius;
          border-top-left-radius: $window-radius;
        }
      }
    }
  }

  > stack:not(.titlebar) > stack.background { border-radius: 0 0 $window-radius $window-radius; }

  > leaflet,
  > hdyleaflet,
  > box.horizontal {
    > stack.background {
      background: none;

      > widget {
        > box.vertical > box.vertical { // Gnome 3.34 Wallpaper setting
          > scrolledwindow > viewport.frame {
            background-color: $base;
            border-bottom-right-radius: $window-radius;

            > box.vertical.view {
              background: none;

              flowboxchild button.osd.remove-button {
                min-width: 28px;
                min-height: 26px;
                margin: 3px;
                background-color: rgba(black, 0.65);
                color: white;

                &:hover {
                  background-color: rgba(black, 0.75);
                  color: white;
                }

                &:active {
                  background-color: rgba(black, 0.85);
                  color: white;
                }

                &:disabled {
                  background-color: rgba(black, 0.3);
                  color: rgba(white, 0.45);
                }
              }
            }
          }
        }
      }

      frame.view { // Wifi setting
        border-radius: $corner-radius;
        background: none;
      }
    }

    > box.vertical > scrolledwindow.view { // > 3.25.90
      background-color: $base;
      border-bottom-left-radius: $window-radius;

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

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

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

  > leaflet.folded {
    > box.vertical > scrolledwindow.view {
      border-bottom-right-radius: $window-radius;
    }
  }

  stack.background clamp.medium {
    frame > box.vertical > box.vertical { // VPN setting
      > list {
        border-top-width: 0;
        border-bottom-width: 0;

        &, > row { border-radius: 0; }
      }

      &:first-child {
        > list {
          border-top-width: 1px;

          &, > row { border-radius: $corner-radius $corner-radius 0 0; }
        }
      }

      &:last-child {
        > list {
          border-bottom-width: 1px;

          &, > row { border-radius:  0 0 $corner-radius $corner-radius; }
        }
      }
    }
  }
}

dialog.background.csd {
  > box.vertical.dialog-vbox { // wifi setting
    > notebook > stack > box.horizontal > notebook > stack {
      border-radius: 0 0 $window-radius $window-radius;
    }
  }
}

hdyleaflet, leaflet, box.horizontal > stack.background {
  frame:not(.view) list:not(.contacts-contact-list) {
    @extend %circular_list;

    row.activatable { @extend %circular_row; }
  }

  stack.background, overlay {
    scrolledwindow > viewport {
      list {
        @extend %circular_list;

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

  frame > border { border: none; }

  > box.vertical > scrolledwindow > viewport.frame {
    list:not(.view):not(.tweak-group) {
      row.activatable {
        @extend %sidebar_row;
      }

      > separator { margin: $space-size / 2 0; }
    }
  }

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

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

/************************
 * Gnome system monitor *
 ************************/
window#gnome-system-monitor.background.csd {
  > box.vertical > stack {
    background-color: $base;
    border-radius: 0 0 $window-radius $window-radius;

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

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

window#gnome-system-monitor.background:not(.csd) {
  > box.vertical > headerbar { box-shadow: none; }
}


/************************
 * Gnome Sound Recorder *
 ************************/
stack {
  > grid.vertical {
    > scrolledwindow {
      border: none;
      border-radius: 0 0 $window-radius $window-radius;

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

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


/******************
 * Gnome Contacts *
 ******************/
window.background.csd {
  scrolledwindow.contacts-contact-form {
    border-bottom-right-radius: $window-radius;
  }
}


/************************
 * Epiphany (Gnome Web) *
 ************************/

tabbox { // Gnome 40.0
  background-color: $background;
  box-shadow: inset 0 -1px $divider;
  padding: ($space-size / 2) ($space-size / 2) 0;

  > tab {
    @extend %tabs_tab;
    border-radius: $corner-radius $corner-radius 0 0;
    border-bottom: none;

    // close button
    button {
      min-height: 24px;
      min-width: 24px;
      border-radius: $circular-radius;
      border: none;
      padding: 0;
      @extend %button-flat-simple;
    }
  }
}


/*****************
 * Gnome Weather *
 *****************/
#weather-page,
#weekly-forecast-frame {
  border-bottom-right-radius: $window-radius;
}

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

statuspage.search-view {
  entry.search {
    @if $variant == 'light' { background-color: $base; }

    &:focus { box-shadow: none; }

    > window.background treeview.view:selected {
      @extend %selected_items_primary;
    }
  }
}


/***************
 * Gnome Music *
 ***************/
window.background.csd {
  box.vertical > overlay > stack.background { border-radius: 0 0 $window-radius $window-radius; }
}


/****************
 * Gnome Clocks *
 ****************/
window.background.csd.unified {
  border-top-left-radius: $window-radius;
  border-top-right-radius: $window-radius;

  > deck > deck > deck {
    > box.vertical > headerbar.titlebar.windowhandle {
      border-top-left-radius: $window-radius;
      border-top-right-radius: $window-radius;
      box-shadow: inset 0 -1px $divider;

      > viewswitchertitle > squeezer {
        margin: 0 0;
        background: none;

        > viewswitcher > box.horizontal {
          > button.radio {
            margin: 0;
            padding: 0;
            border-radius: 0;
          }
        }
      }
    }

    list {
      @extend %circular_list;

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


/*************
 * Rhythmbox *
 *************/
%image-button {
  min-height: 24px;
  min-width: 24px;
  padding: ($medium-size - 24px) / 2;
  margin: 0;
}

.sidebar-paned .inline-toolbar.horizontal.sidebar-toolbar {
  button.image-button {
    border-radius: $circular-radius;

    &:not(:first-child), &:not(:last-child) {
      border-top-left-radius: $circular-radius;
      border-bottom-left-radius: $circular-radius;
      border-top-right-radius: $circular-radius;
      border-bottom-right-radius: $circular-radius;
    }

    &.image-button:not(.text-button) {
      &:first-child {
        border-top-left-radius: $circular-radius;
        border-bottom-left-radius: $circular-radius;
      }

      &:last-child {
        border-top-right-radius: $circular-radius;
        border-bottom-right-radius: $circular-radius;
      }
    }

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

// tweak border and frame in alt-toolbar
window.csd > box.vertical > box.vertical,
window.solid-csd > box.vertical > box.vertical {
  > toolbar.horizontal {
    padding: $space-size;
    // margin: -1px 0;
    border-bottom: none;
    box-shadow: none;
    background-color: transparent;

    > toolitem > .linked > button,
    > toolitem > box.horizontal > button {
      @extend %circular-button;
      @extend %image-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'
      @extend %circular-button;
      @extend %image-button;

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

    button.flat.scale { // 'volume'
      @extend %circular-button;
      @extend %image-button;
    }

    > box.horizontal:not(.linked) > button.toggle,
    > .linked > button:not(.toggle):not(.raised):not(.flat) {
      @extend %circular-button;
      @extend %image-button;
    }
  }
}


/**********
 * Polari *
 **********/
.polari-room-list {
  .sidebar {
    background: none;

    > row.activatable:selected {
      background-color: $primary;
      color: on($primary);

      // > widget > box.horizontal > label {
      //   color: $text; // not use !
      // }
    }
  }
}

stack.view.polari-entry-area {
  background-color: $background;
  border-top: 1px solid $divider;
  border-bottom-right-radius: $window-radius;
}

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

/***********
 * Builder *
 ***********/
// based css for 3.22:
// https://gitlab.gnome.org/GNOME/gnome-builder/tree/gnome-builder-3-22/data/theme
// based css for 3.24:
// https://gitlab.gnome.org/GNOME/gnome-builder/tree/gnome-builder-3-24/data/theme
// based css for 3.26:
// https://gitlab.gnome.org/GNOME/gnome-builder/tree/gnome-builder-3-26/data/themes

// Layout tab and tab bar tweaks
// The following makes the layout stack header look similar to a tab bar.
layouttabbar {
  border-bottom: 1px solid $divider;
  background-color: $background;

  button { @extend %button-flat; }

  > box > button {
    margin: (40px - $medium-size) / 2 0;
    // border-radius: 0;
  }
}

layouttab {
  margin: 0 8px; // not working
  border-style: none solid;
  border-width: 1px;
  border-color: $frame;
  box-shadow: inset 0 -2px $primary;
  background-color: $base;

  separator.vertical { margin: 8px 4px; }

  button {
    &.text-button, &.image-button, & {
      margin-top: 8px;
      margin-bottom: 8px;
      padding: 0 4px;
    }
  }

  // Close button styling for layouttab.
  // > box > button.close { @extend %circular-button; }
}

layout {
  border: 1px solid $frame;
  -PnlDockBin-handle-size: 1;
}

entry.search-missing {
  background-color: $error;
  color: on($error);
}

// tweak icons for treeviews
window.workbench treeview.image {
  color: $text-secondary;
}

popover.popover-selector list {
  padding: 8px - 2px;

  row {
    border-radius: $corner-radius;

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

    .accel {
      &:dir(ltr) { margin-left: 6px; }
      &:dir(rtl) { margin-right: 6px; }
    }
  }
}

omnibar {
  &.linked:not(.vertical) entry { border-radius: $corner-radius; }

  &:not(:hover):not(:active) entry { color: $text-secondary; }
}

popover.omnibar list row:not(:last-child) {
  border-bottom: 1px solid $divider;
}

entry.preferences-search {
  border-bottom: 1px solid $divider;
  box-shadow: none;
  background-color: $base;

  // doesn't work properly
  // &:dir(ltr) { border-right: 1px solid $divider; }
  // &:dir(rtl) { border-left: 1px solid $divider; }
}

preferences stacksidebar.sidebar {
  list { background-color: $base-alt; }

  &:dir(ltr),
  &:dir(rtl) { list { border-style: none; }}

  list separator { @extend %hide_separators; }
}

preferences > box > box {
  &:dir(ltr) { border-right: 1px solid $divider; }
  &:dir(rtl) { border-left: 1px solid $divider; }
}

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

  .popover-action-area button {
    @extend %button-flat-simple;

    padding: 8px 16px;
    border-top: 1px solid $divider;
    border-radius: 0;

    &:first-child { border-bottom-left-radius: $corner-radius; }

    &:last-child { border-bottom-right-radius: $corner-radius; }
  }

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

popover.transfers list {
  background-color: transparent;

  row:not(:first-child) { border-top: 1px solid $divider; }

  row > box { padding: 10px; }
}

dockbin {
  border: 1px solid $frame;
  -PnlDockBin-handle-size: 1;
}

dockpaned {
  border: 1px solid $frame;
}

eggsearchbar box.search-bar {
  padding: 0 8px;
  border-bottom: 1px solid $divider;
  background-color: $background;
}

docktabstrip {
  padding: 0 8px;
  border-bottom: 1px solid $divider;
  background-color: $background;
}

docktab {
  transition: $transition,
              background-size 0ms,
              background-image 0ms;
  min-height: $small-size;
  min-width: $small-size;
  margin-bottom: -1px;
  padding: $space-size 6px;

  border-width: 1px;         // for reorderable tabs
  border-color: transparent; //

  box-shadow: inset 0 -2px transparent;
  background-image: radial-gradient(circle, $primary 10%, transparent 0%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0% 0%;

  color: $text-secondary;
  font-weight: 500;

  &:hover {
    background-color: $overlay-hover;
    color: $text;
  }

  &:checked {
    transition: $transition,
                background-size $ripple-fade-in-duration $ease-out,
                background-image $ripple-fade-in-duration + $ripple-fade-out-duration $ease-out;
    box-shadow: inset 0 -2px $primary;
    background-color: transparent;
    background-image: radial-gradient(circle, transparent 10%, transparent 0%);
    background-size: 1000% 1000%;
    color: $text;
  }
}

dockoverlayedge {
  background-color: $background;

  docktabstrip {
    padding: 0;
    border: none;
  }

  &.left-edge docktab:checked { box-shadow: inset -2px 0 $primary; }

  &.right-edge docktab:checked { box-shadow: inset 2px 0 $primary; }
}

pillbox {
  background-color: $background;
  border-radius: $corner-radius;
}

buildperspective row {
  // padding: 10px;
}

layoutpane entry.search {
  border-bottom: 1px solid $divider;
  box-shadow: none;
  background-color: $base;
}

editortweak entry.search {
  margin-bottom: -1px;
  box-shadow: none;
  background-color: transparent;
}

//
// let's tweak hard-coded elements
//

.gb-search-entry-occurrences-tag {
  box-shadow: none;
  background-color: transparent;
}

// Keep search bar and layouttab height in sync.
// layouttabbar > box,
// eggsearchbar > revealer > box,
docktabstrip {
  min-height: 39px;
}

eggsearchbar entry {
  // min-height: 24px;
}

window.workbench preferences preferencesgroup list entry {
  // background: none;
  // min-height: 0px;
  padding-top: 8px;
  padding-bottom: 8px;
}

button.run-arrow-button {
  // min-width: 12px;
  padding-left: ($medium-size - 16px) / 2;
  padding-right: ($medium-size - 16px) / 2;
}

//
// Additional styles for 3.26
//

button.dzlmenubutton image {
  min-width: $medium-size - 6px;

  &.arrow { min-width: $medium-size - 9px; }
}

button.dzlmenubuttonitem {
  color: $text;
  font-weight: normal;

  &:disabled { color: $text-disabled; }
}

idelayoutstackheader {
  border-bottom: 1px solid $divider;

  button:checked { color: $text; }
}

// utilities stack switcher
ideeditorutilities > dzldockpaned > box > stackswitcher {
  padding: 8px 0;
  background-color: $background;

  &:dir(ltr) { border-right: 1px solid $divider; }

  &:dir(rtl) { border-left: 1px solid $divider; }

  button {
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;

    &:active {
      background-image: radial-gradient(circle, rgba($primary, 0.7) 10%, transparent 0%);
    }

    &:checked {
      background-color: transparent;
      color: $text;
    }

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

      &:checked { box-shadow: inset -2px 0 $primary; }
    }

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

      &:checked { box-shadow: inset 2px 0 $primary; }
    }
  }
}

// buildui panel
ideeditorsidebar notebook header {
  background: transparent;
}

popover.messagepopover {
  // padding: 0;

  list {
    border: 1px solid $divider;

    row:not(:last-child) { border-bottom: 1px solid $divider; }
  }
}


/**********
 * Photos *
 **********/
// based css:
// https://gitlab.gnome.org/GNOME/gnome-photos/blob/master/data/Adwaita.css

GdMainIconView.content-view {
  -GdMainIconView-icon-size: 48;

  // Make spinner visible on both dark and bright backgrounds w/o making
  // it look ugly/weird.
  // &.cell:active { color: $text-disabled; }
}

.documents-counter {
  margin: 8px;
  border-radius: $circular-radius;
  box-shadow: $shadow-z4;
  background-color: $primary;
  color: on($primary);
  font-weight: bold;
}

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

.documents-scrolledwin.frame {
  border-style: none;

  frame.content-view > border { border-style: none; }
}

.photos-icon-bg {
}

.photos-fade-in {
  opacity: 1;
  transition: opacity $duration $ease-out;
}

.photos-fade-out {
  opacity: 0;
  transition: opacity $duration $ease-out;
}

.photos-collection-icon {
}

button.photos-filter-preview {
  color: $text;
  font-weight: normal;

  &:checked {
    background-color: $overlay-selected;
    color: $text;

    image {
      color: on(dark);
      -gtk-icon-shadow: $text-shadow;
    }
  }
}

overlay grid.horizontal > revealer > scrolledwindow.frame {
  &:dir(ltr) { border-style: none none none solid; }
  &:dir(rtl) { border-style: none solid none none; }
}


/*********
 * Music *
 *********/
// hard-coded css:
// https://gitlab.gnome.org/GNOME/gnome-music/blob/master/data/application.css

.side-panel:dir(ltr) {
  // border-width: 0 1px 0 0;
  border-style: solid;
  border-color: $divider;
}

.side-panel:dir(rtl) {
  // border-width: 0 0 0 1px;
  border-style: solid;
  border-color: $divider;
}

.side-panel .view {
  // background-color: mix(@theme_fg_color, @theme_bg_color, 0.9);
  background-image: image($base-alt);

  &:hover { background-image: image(mix($text, $base-alt, percentage(0.08))); }
}

.side-panel .view:selected {
  // background-color: mix(@theme_fg_color, @theme_bg_color, 0.5);
  background-image: image($primary);

  &:hover { background-image: image(mix(on($primary), $primary, percentage(0.08))); }
}

.songs-list {
  // box-shadow: inset 0 -1px shade(@borders, 1.30);
  // background-color: @theme_bg_color;

  &:hover { background-image: image($overlay-hover); }
}

frame.documents-dropdown {
  @extend %toolbar_osd;

  margin: 8px;

  > border { border: none; }
}

box.vertical > revealer > toolbar.search-bar {
  border-bottom: 1px solid $divider;
  background-clip: border-box; // avoid black border

  button > widget {
    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
    // -GtkArrow-arrow-scaling: 1;
  }
}


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

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

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

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

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

/***********************
 * Gnome Note (bijiben)*
 ***********************/

dialog.background {
  scrolledwindow.frame > viewport {
    > list {
      background-color: transparent;
      border: none;

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

/*******************
 * Document Viewer *
 *******************/
window.background.csd {
  > box.vertical {
    > paned.horizontal > box.vertical > scrolledwindow {
      > treeview.view:not(:hover):not(:active):not(:selected) { background-color: transparent; }
    }
  }

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

    &:selected, &:selected:backdrop {
      @extend %selected_items_primary;
    }
  }
}


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

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

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

    > box + separator + scrolledwindow {
      border-radius: 0 0 $window-radius 0;
    }

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

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


/**************
 * Gnome Disk *
 **************/
window.background.csd {
  > box.vertical > paned.horizontal {
    > scrolledwindow {
      treeview.view:not(:hover):not(:active):not(:selected) {
        background-color: transparent;
      }
    }
  }
}


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

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

window.background { // 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: $window-radius;
      }
    }
  }

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

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

// Console
popover.background.menu {
  radiobutton {
    &.system, &.light, &.dark {
      margin: $space-size 0 $space-size / 2;
    }
  }
}

/*********
 * To Do *
 *********/
// less than 3.28
task-list-view {
  taskrow {
    transition: $transition;
    margin: 0 -8px;

    &:hover { transition: none; }

    label { margin: 0 8px; }

    image.dim-label { min-width: 16px; }
  }

  > box > revealer > box > button {
    margin: (12px * 2 - $medium-size) / 2;

    .dim-label { color: inherit; }
  }
}

// 3.28 or later
tasklistview {
  taskrow {
    outline: none;

    entry {
      &, &:focus, &:disabled { box-shadow: none; }
    }

    image.dim-label { min-width: 16px; }
  }

  > box > revealer > box > button {
    margin: (12px * 2 - $medium-size) / 2;

    .dim-label { color: inherit; }
  }
}


/*******
 * Eog *
 *******/
#eog-thumb-nav {
  scrolledwindow { border-top: none; }
}


/*************
 * Evolution *
 *************/
frame.taskbar > border { border-style: solid none none; }

box.vertical > paned.horizontal notebook widget .frame { border-style: none; }


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


/********
 * Gitg *
 ********/
frame.commit-frame > border { border-style: solid none none; }


/**************
 * Characters *
 **************/
box.dialog-vbox scrolledwindow.related { border: 1px solid $frame; }

list.categories { background-image: image($base-alt); }


/*********
 * Boxes *
 *********/
.transparent-bg + stack overlay > label {
  min-height: 24px;
  padding: 0 4px;
  border-radius: $corner-radius;
  background-color: $scrim;
  color: on($scrim);
}


/**************
 * Calculator *
 **************/
button.title label { min-height: $medium-size; }


/*********
 * Geary *
 *********/
window.background.csd.geary-main-window,
window#GearyMainWindow.background.csd {
  box.vertical > paned.horizontal > box.sidebar.vertical {
    border-bottom-left-radius: $window-radius;

    statusbar {
      border-bottom-left-radius: $window-radius;
    }
  }

  stack#conversation_viewer {
    border-bottom-right-radius: $window-radius;

    scrolledwindow.geary-conversation-scroller {
      viewport.frame {
        list.conversation-listbox {
          background: none;
          border-bottom-right-radius: $window-radius;
        }
      }
    }

    .geary-expanded {
      animation: none;
      background-image: none;

      > .geary-composer-embed {
        actionbar > revealer > box { border-radius: 0; }

        headerbar {
          color: $text;
          background-color: $background;
          box-shadow: none;
          border-bottom: 1px solid $frame;

          button { @extend %button-flat; }
        }
      }
    }

    .geary-composer-box {
      actionbar > revealer > box { border-bottom-left-radius: 0; }
    }
  }
}

preferencesgroup, .geary-accounts-editor-pane {
  list {
    @extend %circular_list;

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

.geary-accounts-editor-pane {
  frame:not(.geary-signature) > border,
  scrolledwindow.frame { border: none; }
}

.geary-main-window {
  > deck > overlay > .geary-main-layout {
    background-color: $base-alt;

    $titlebar-size: if($variant == 'light' and $topbar == 'dark', $large-size, $large-size - 1px);

    > leaflet > separator.sidebar, // centry
    > leaflet > separator.geary-sidebar-pane-separator, // centry > = 44.0
    > leaflet > leaflet > separator.sidebar { // left
      background-color: transparent;
      background-image: linear-gradient(to bottom, $titlebar 0%,
                                                   $titlebar $titlebar-size,
                                                   $border $titlebar-size,
                                                   $border 100%);
      transition: background-image $duration $ease-out,
                  color $duration $ease-out;

      &:backdrop {
        background-color: transparent;
        background-image: linear-gradient(to bottom, $titlebar-backdrop 0%,
                                                     $titlebar-backdrop $titlebar-size,
                                                     $border $titlebar-size,
                                                     $border 100%);
      }
    }

    > leaflet > leaflet > box.vertical > .geary-conversation-frame {
      > scrolledwindow {
        margin: -1px 0; // hide .view top border
      }
    }
  }

  geary-conversation-viewer#conversation_viewer { // right side
    list.background.conversation-listbox.content {
      > row.activatable {
        border: 1px solid $divider;
        border-bottom-width: 0;
        background-color: $base;

        &: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 6px 6px;
          }
        }
      }

      geary-composer-editor {
        box.background,
        actionbar > revealer > box {
          border-radius: 0 0 8px 8px;
        }
      }
    }
  }
}

geary-composer-box#GearyComposerWindow {
  geary-composer-editor {
    box.background,
    actionbar > revealer > box {
      border-radius: 0 0 $window-radius $window-radius;
    }
  }
}


/**************
 * 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: $window-radius;
  }

  > stack > box > .sidebar > scrolledwindow > viewport > list {
    padding: 0 0;
  }
}

/***********
 * Dialogs *
 ***********/
dialog.background.csd {
  > box.vertical.dialog-vbox {
    > grid.horizontal {
      > scrolledwindow.frame {
        > viewport.frame {
          list:first-child { border-radius: 0 0 0 $window-radius; }
          list:last-child { border-radius: 0 0 $window-radius 0; }
        }
      }
    }

    > stack,
    > stack > stack {
      > scrolledwindow {
        border-radius: 0 0 $window-radius $window-radius;
        background-color: $base;

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

    > stack {
      > scrolledwindow > viewport.frame {
        > list {
          border-radius: 0 0 $window-radius $window-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 $window-radius $window-radius;
      }
    }

    > notebook:not(.frame) {
      &, > stack {
        border-radius: 0 0 $window-radius $window-radius;
      }

      .inline-toolbar {
        border-radius: 0 0 $corner-radius $corner-radius;
      }
    }
  }

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

      textview.view {
        border-radius: $corner-radius;

        > text {
          background: none;
        }
      }

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

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

//
// Pamac
//

window.background {
  > deck > box > overlay > stack > leaflet > box > scrolledwindow > viewport > box > stack > scrolledwindow {
    border: 1px solid $divider;
  }
}

//
// unified window
//

window.background.csd.unified {
  // Remove the sheen on headerbar...
  headerbar {
    box-shadow: inset 0 -1px $divider;

    &.selection-mode {
      box-shadow: none;
    }
  }

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

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

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

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

  > deck > .view > notebook {
    > header.top {
      border-radius: 0;
    }
  }
}
