// Dark sidebar theme apps
$side_theme_bg: $dark_sidebar_icon_bg;
$side_theme_fg: rgba($dark_sidebar_icon_fg, 0.8);
$side_theme_alt_fg: $dark_sidebar_icon_fg;

%side_background {
  color: $side_theme_fg;
  background-color: $side_theme_bg;

  &:disabled, label:disabled {
    color: rgba($side_theme_alt_fg, 0.35);
  }
}

%side_buttons {
  color: $side_theme_fg;
  background-color: rgba($dark_sidebar_icon_fg, 0.15);
  border: none;

  &:hover {
    color: $side_theme_alt_fg;
    background-color: rgba($dark_sidebar_icon_fg, 0.25);
  }

  &:active, &:checked {
    color: $selected_fg_color;
    background-color: $selected_bg_color;
  }

  &:disabled {
    color: rgba($side_theme_alt_fg, 0.35);
    background-color: rgba($side_theme_alt_fg, 0.08);
  }

  @at-root %side_buttons_flat, &.flat {
    border: none;
    background: none;
    box-shadow: none;
    color: $side_theme_fg;

    &:hover {
      color: $side_theme_alt_fg;
      background-color: rgba($dark_sidebar_icon_fg, 0.15);
    }

    &:active, &:checked {
      color: $selected_fg_color;
      background-color: $selected_bg_color;
    }

    &:disabled {
      color: rgba($side_theme_alt_fg, 0.35);
    }
  }
}

%side_views {
  color: $side_theme_fg;
  background-color: $side_theme_bg;

  &.has-open-popup,
  &:hover {
    color: $side_theme_alt_fg;
    background-color: mix($side_theme_alt_fg, $side_theme_bg, 10%);
  }

  &:active {
    color: $side_theme_fg;
    background-color: mix($side_theme_fg, $side_theme_bg, 15%);
  }

  &:disabled, label:disabled {
    color: rgba($side_theme_alt_fg, 0.35);
  }

  &:selected {
    @extend %selected_items;

    &.has-open-popup,
    &:hover { background-color: mix(black, $selected_bg_color, 10%); }
  }
}

%side_searchbar {
  background: none;
  box-shadow: none;
  border: none;

  > revealer > box {
    background-color: $side_theme_bg;
    border: none;
  }

  entry {
    color: $side_theme_fg;
    background-color: rgba($side_theme_fg, 0.1);

    image { color: $side_theme_fg; }

    &:focus {
      background-color: rgba($side_theme_fg, 0.12);
    }

    &:disabled, label:disabled, image:disabled {
      color: rgba($side_theme_alt_fg, 0.35);
    }
  }
}

%side_headerbar {
  color: $side_theme_fg;
  background-color: $side_theme_bg;
  background-image: image($side_theme_bg);
  border: none;
  box-shadow: none;

  button:not(.titlebutton) {
    color: $side_theme_fg;
    border: none;

    &:hover {
      color: $side_theme_alt_fg;
      background-color: rgba($side_theme_fg, 0.25);
    }

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

  button.titlebutton {
    color: $side_theme_fg;

    &.appmenu { // appmenu button
      border: none;
      min-height: 30px;
      min-width: 30px;
      border-radius: 1000px;
      color: transparent;
      background-color: transparent;
      background-image: -gtk-scaled(url("assets/logo.svg"),url("assets/logo@2.svg"));
      background-repeat: no-repeat;
      background-position: center;

      image { opacity: 0; } // Make menu button icon invisible

      &:hover {
        background-color: rgba($side_theme_fg, 0.15);
      }

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

    &.maximize, &.minimize {
      &:hover {
        background-color: rgba($side_theme_fg, 0.1);
      }

      &:active {
        background-color: rgba($side_theme_fg, 0.2);
        color: white;
      }
    }

    &.close {
      &:hover {
        background-color: $wm_button_close_hover_bg;
        color: white;
      }

      &:active {
        background-color: $wm_button_close_active_bg;
        color: white;
      }
    }
  }
}

//
// Nautilus
//
%dark_sidebar_button {
  @include button(normal);

  &:hover { @include button(hover); }
  &:active, &:checked { @include button(active); }
  &:disabled { @include button(insensitive); }
}

%dark_sidebar_entry {
  @include entry(normal);

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

%dark_sidebar_scrollbar {
  border-color: $borders_color;

  &.overlay-indicator:not(.dragging):not(.hovering) slider {
    background-color: lighten($dark_sidebar_fg, 15%);
    border: 1px solid $borders_color;
  }

  slider {
    background-color: transparentize(lighten($dark_sidebar_fg, 15%), 0.3);

    &:hover { background-color: lighten($dark_sidebar_fg, 20%); }
    &:hover:active { background-color: $selected_bg_color; }
    &:disabled { background-color: transparent; }
  }

  trough { background-color: darken($dark_sidebar_bg, 5%); }
}

%headerbar_image {
  background-image: -gtk-scaled(url("assets/logo.svg"),url("assets/logo@2.svg")), image($dark_sidebar_icon_bg);
  background-repeat: no-repeat;
  background-size: 38px auto;

  $_padding: 44px;

  &:dir(ltr) {
    background-position: left center;
    padding-left: $_padding;
  }

  &:dir(rtl) {
    background-position: right center;
    padding-right: $_padding;
  }
}

// Reset filechooser separator
filechooser {
  paned > separator {
    background-image: image($solid_borders_color);
  }
}

// Dark icon background sidebars
.nautilus-window {
  background-color: $dark_sidebar_bg;
  background-image: image($dark_sidebar_icon_bg);
  background-size: 38px auto;
  background-repeat: no-repeat;
  border-radius: 0 0 $corner_radius;

  &:dir(rtl) {
    background-position: right;
  }

  paned > separator {
    background-image: if($variant == 'light' and $titlebar == 'dark', _solid($base_color), _solid($dark_sidebar_border));
  }

  headerbar {
    @extend %headerbar_image; // Set nautilus headerbar mountain icon

    &, &:backdrop {
      box-shadow: inset 0 -1px if($variant=='light', rgba($dark_sidebar_icon_bg, 0.15), $dark_sidebar_icon_bg),
                  inset 38px 0 0 0 transparent;
    }
  }

  placessidebar.sidebar {
    background: none;

    row.sidebar-row {
      transition: none;
      color: $dark_sidebar_fg;

      .sidebar-icon { color: transparentize($dark_sidebar_icon_fg, 0.15); }

      image.sidebar-icon {
        $_padding: 2px;
        &:dir(ltr) {
          padding-right: $_padding;
        }

        &:dir(rtl) {
          padding-left: $_padding;
        }
      }

      label.sidebar-label {
        $_padding_short_side: 2px;
        $_padding_long_side: 20px;

        &:dir(ltr) {
          padding-right: $_padding_short_side;
          padding-left: $_padding_long_side;
        }

        &:dir(rtl) {
          padding-right: $_padding_long_side;
          padding-left: $_padding_short_side;
        }
      }

      &.has-open-popup,
      &:hover {
        background-color: transparentize($dark_sidebar_fg, 0.95);

        $_shadow_length_higlight: 2px;
        $_shadow_length_icon_bg: 38px;

        &:dir(ltr) {
          box-shadow: inset ($_shadow_length_higlight * -1) 0 lighten($selected_bg_color, 10%),
                      inset $_shadow_length_icon_bg 0 0 0 $dark_sidebar_icon_bg;
        }

        &:dir(rtl) {
          box-shadow: inset $_shadow_length_higlight 0 lighten($selected_bg_color, 10%),
                      inset ($_shadow_length_icon_bg * -1) 0 0 0 $dark_sidebar_icon_bg;
        }
      }

      &:disabled {
        &, label, image { color: transparentize($dark_sidebar_fg, 0.6); }
      }

      &:active { transition: box-shadow 0.2s; }

      &:selected.has-open-popup,
      &:selected, &:selected:hover, &:active:hover {
        background-color: rgba($selected_bg_color, 0.0);
        background-image: -gtk-scaled(url("assets/selected-dot.png"),
                                      url("assets/selected-dot@2.png"));
        background-repeat: no-repeat;
        .sidebar-label { color: $alt_dark_sidebar_fg; }
        // .sidebar-icon { color: inherit; }

        $_shadow_length: 38px;
        $_background_position: 42px;

        &:dir(ltr) {
          box-shadow: inset $_shadow_length 0 0 0 $selected_bg_color;
          background-position: $_background_position center;
        }

        &:dir(rtl) {
          box-shadow: inset ($_shadow_length * -1) 0 0 0 $selected_bg_color;
          background-position: calc(100% - #{$_background_position}) center;
        }
      }

      &:selected:hover, &:active:hover {
        background-color: transparentize($dark_sidebar_fg, 0.95);

        $_shadow_length_higlight: 2px;
        $_shadow_length_icon_bg: 38px;
        &:dir(ltr) {
          box-shadow: inset ($_shadow_length_higlight * -1) 0 lighten($selected_bg_color, 10%),
                      inset $_shadow_length_icon_bg 0 0 $selected_bg_color;
        }

        &:dir(rtl) {
          box-shadow: inset $_shadow_length_higlight 0 lighten($selected_bg_color, 10%),
                      inset ($_shadow_length_icon_bg * -1) 0 0 0 $selected_bg_color;
        }
      }

      button.sidebar-button {
        color: $dark_sidebar_fg;

        &:hover { @include button(hover); }
        &:active { @include button(active); }

        &:not(:hover):not(:active) > image { opacity: 0.5 };
      }

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

        // .sidebar-icon { color: inherit; }
      }

      &:backdrop { opacity: 0.75; }

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

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

    separator { background-color: transparent; }

    scrollbar { @extend %dark_sidebar_scrollbar; }
  }
}

//
// nemo
//
.nemo-window {
  .sidebar {
    color: $dark_sidebar_fg;
    background-color: $dark_sidebar_bg;

    .view, row, .places-treeview {
      background-color: transparent;
      color: $dark_sidebar_fg;

      &.cell:selected {
        @extend %selected_items;

        &.has-open-popup,
        &:hover {
          color: $selected_fg_color;
          background-color: mix(black, $selected_bg_color, 10%);
        }
      }

      &.has-open-popup,
      &:hover {
        color: $dark_sidebar_fg;
        background-color: mix($dark_sidebar_fg, $dark_sidebar_bg, 10%);
      }

      &.expander {
        color: mix($dark_sidebar_fg, $dark_sidebar_bg, 50%);

        &:hover { color: $dark_sidebar_fg; }
      }
    }

    separator { background-color: transparent; }

    scrollbar { @extend %dark_sidebar_scrollbar; }
  }
}

.NemoSidebar {
  &, & * { -gtk-icon-style: symbolic; }
}

//
// Gedit
//
window.org-gnome-gedit {
  .titlebar > headerbar:first-child { @extend %side_headerbar; }

  > paned > separator,
  > overlay > box.vertical > paned > separator {
    &, &:backdrop {
      background-image: if($variant == 'light', image($side_theme_bg), image($solid_borders_color));
    }
  }
}

.open-document-selector-treeview.view { // Popover menu view
  padding: 3px $cont_padding 3px $cont_padding;
  border-color: $borders_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); }
}

// Document sidebar
list.gedit-document-panel {
  @extend %side_background;

  row.activatable {
    padding: 4px 0;
    @extend %side_views;
  }

  row button {
    min-width: 22px;
    min-height: 22px;
    padding: 0;
    margin: 0 $cont_padding;
    border-radius: 100px;
    border: none;
    background: none;

    &:hover {
      color: $selected_fg_color;
      background-color: rgba($side_theme_fg, 0.15);
    }

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

    image { color: inherit; }
  }

  row:hover:not(:selected) button {
    &:active, &:checked {
      color: $selected_fg_color;
      background-color: rgba($side_theme_fg, 0.25);
    }
  }
}

.gedit-document-panel-dragged-row {
  border: none;
  @extend %side_background;
}

// Files browser sidebar
.gedit-side-panel-paned {
  @extend %side_background;

  treeview.view { @extend %side_views; }

  > box.vertical > stack > grid.horizontal > box.horizontal {
    button { @extend %side_buttons; }
  }

  statusbar { // Bottom statusbar of gedit
    border-top: 1px solid $solid_borders_color;
    background-color: $bg_color;
  }
}

.gedit-search-slider {
  background-color: lighten($bg_color, 2%);
  padding: $cont_padding;
  border-color: $borders_color;
  border-radius: 0 0 2px 2px;
  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 {
  @extend %side_background;

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

textview.view.sourceview.gedit-view {
  window#gtk-tooltip {
    @extend %side_background;

    treeview.view { @extend %side_views; }
  }
}

.gedit-bottom-panel-paned { background-color: $base_color; }
.gedit-side-panel-paned > separator { background-image: _solid($dark_sidebar_border); }
.gedit-bottom-panel-paned > separator { background-image: _solid($borders_color); }

//
// Gnome Tweak Tool (Gnome tweaks)
//
.tweak-group > .tweak > list {
  padding: 0;
  border: 1px solid $borders_color;

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

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

list#AutostartListBoxTweakGroup {
  &.tweak-group-startup {
    border: 1px solid $borders_color;
  }
}

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

// Themed left sidebar
list.tweak-categories,
leaflet > box > scrolledwindow > viewport > list.navigation-sidebar {
  @extend %side_background;

  > separator { background: none; }

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

window.background.csd {
  > box.horizontal > box.vertical {
    > searchbar {
      @extend %side_searchbar;
    }
  }
}

// separator of sidebar on Gnome contol center and Gnome tweaks
window.background.csd {
  > box:not(.titlebar).horizontal > separator.vertical {
    &, &:backdrop {
      background-image: if($variant == 'light', image($bg_color), image($borders_color));
      background-color: transparent;
    }
  }
}

//
//  Gnome Control Center
//
window.background.csd {
  > box.titlebar.horizontal {
    > headerbar:first-child {
      @extend %side_headerbar;
    }
  }

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

    > box.horizontal > separator.sidebar,
    > hdyleaflet > separator.sidebar,
    > leaflet > separator.sidebar {
      border-right-style: if($variant == 'light', none, solid);
      background: none;
      min-width: 0;
    }
  }

  > box.horizontal > box.vertical,
  > hdyleaflet > box.vertical, // gnome 3.32
  > leaflet > box.vertical { // gnome 3.38
    > scrolledwindow.view {
      @extend %side_background;

      > viewport.frame > stack {
         list {
          background: none;

          separator { background: none; }

          row.activatable:not(:hover):not(:selected) {
            background: none;
          }

          row.activatable:not(:selected):hover {
            color: $side_theme_alt_fg;
            background-color: rgba($side_theme_fg, 0.06);
            transition: all 50ms $ease-out-quad;
          }
        }

        entry.search {
          color: $side_theme_fg;
          background-color: rgba($side_theme_fg, 0.1);

          image { color: $side_theme_fg; }

          &:focus {
            background-color: rgba($side_theme_fg, 0.12);
          }

          &:disabled, label:disabled, image:disabled {
            color: rgba($side_theme_alt_fg, 0.35);
          }
        }
      }

      // > scrollbar { @extend %dark_sidebar_scrollbar; }
    }

    > searchbar {
      @extend %side_searchbar;
    }
  }

  > box.horizontal > separator.sidebar,
  > hdyleaflet > separator.sidebar,
  > leaflet > separator.sidebar {
    border-right-style: if($variant == 'light', none, solid);
    background: none;
    min-width: 0;
  }
}

//
// Geary
//

%folder_frame_border { border-width: 0; }

%conversation_frame {
  > border { border: none; }

  treeview.view {
    color: $side_theme_fg;
    background-color: darken($side_theme_bg, 3%);

    &:selected {
      &, &:focus {
        background-color: mix($selected_bg_color, darken($side_theme_bg, 3%), 25%);
        color: $selected_fg_color;
        &:dir(ltr) { box-shadow: inset 2px 0 $selected_bg_color; }
        &:dir(rtl) { box-shadow: inset -2px 0 $selected_bg_color; }
      }
    }
  }
}

%folder_frame {
  &:dir(ltr) { border: none; }
  &:dir(rtl) { border: none; }

  treeview.view.sidebar {
    @extend %side_views;

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

window#GearyMainWindow,
window.geary-main-window {
  .titlebar {
    box-shadow: inset 0 -1px $borders_color;
    background-color: $header_bg;

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

    headerbar.geary-titlebar {
      > separator {
        margin: 0 -10px 0 0;
      }
    }
  }

  > box.vertical > paned { // Geary 0.12.1
    > separator {
      background-image: if($variant == 'light', none, image($solid_borders_color));
    }

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

  > overlay > box.vertical > paned.horizontal { // Geary 0.13.1
    > box.sidebar.vertical {
      @extend %side_background;

      > searchbar {
        @extend %side_searchbar;
      }
    }
  }
}

.geary-titlebar-left {
  &, &.geary-titlebar {
    @extend %side_headerbar;
  }

  // remove unexpected "hardcoded" vertical separator
  separator {
    margin: 0 -10px 0 0;
    border-right: if($variant == 'light', none, 1px solid $solid_borders_color);
    background: none;
  }
}

// left-pane styling (legacy)
.sidebar.vertical > paned.sidebar-pane-separator {
  @extend %side_background;

  .conversation-frame { @extend %conversation_frame; }

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

   separator { background: none; }
   statusbar { @extend %side_background; }
}

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

  .geary-conversation-frame { @extend %conversation_frame; }

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

  separator { background: none; }

  statusbar {
    @extend %side_background;
  }
}

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

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

.geary-accounts-editor-pane {
  > scrolledwindow.frame {
    border: none;
  }
}

.geary-main-window { // 40.0
  > headerbar > leaflet > leaflet > headerbar:not(:last-child) {
    @extend %side_headerbar;
  }

  .geary-main-layout {
    > leaflet, & {
      > separator.sidebar {
        background-image: image($header_bg);

        @if $titlebar == 'light' {
          border-bottom: 1px solid $borders_color;
        }
      }
    }

    > leaflet > leaflet > box { // 40.0
      .geary-conversation-frame { // center
        margin: -1px 0;

        treeview.view {
          &:hover { background-color: mix($fg_color, $base_color, 15%); }

          &:selected {
            &, &:focus {
              background-color: mix($selected_bg_color, $base_color, 25%);
              color: $fg_color;
              &:dir(ltr) { box-shadow: inset -2px 0 $selected_bg_color; }
              &:dir(rtl) { box-shadow: inset 2px 0 $selected_bg_color; }
            }
          }
        }
      }

      .geary-folder-frame { // left
        @extend %side_background;
        > border { @extend  %folder_frame_border; }
        > scrolledwindow { @extend %folder_frame; }
      }

      separator { background: none; }

      statusbar {
        @extend %side_background;
        margin: -8px -12px;
        padding: 6px;
      }
    }
  }

  list.content.conversation-listbox { border: none; } // reset

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

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

.geary-main-layout > leaflet > leaflet { // 43.0
  > box.vertical:first-child > headerbar.titlebar {
    @extend %side_headerbar;
  }

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

  searchbar {
    @extend %side_searchbar;
  }
}

//
// Tilix
//
window.background.csd {
  > box.horizontal > box.vertical {
    > scrolledwindow > viewport.frame {
      > list {
        @extend %side_background;

        row > box.vertical {
          > separator.horizontal {
            background: none;
            min-height: 0;
          }

          > label:disabled { color: $side_theme_alt_fg; }
        }

        row.activatable {
          @extend %side_views;

          button { @extend %side_buttons_flat; }

          &:selected button { @extend %selected-button; }
        }
      }
    }

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

    > box.linked.horizontal {
      @extend %side_background;
      margin: -$cont_padding;
      padding: $cont_padding;

      button { @extend %side_buttons; }
    }
  }
}

//
// Polari
//
.polari-room-list {
  .sidebar {
    @extend %side_background;
    margin-top: -1px;
    border-color: if($variant == 'light', $bg_color, $solid_borders_color); // Not use

    .activatable, .inactive, .room-list-header {
      @extend %side_views;
    }
  }
}

.polari-entry-area {
  @extend %side_searchbar;

  button { @extend %side_buttons; }
}

overlay > infobar.info.top {
  margin-bottom: 0;
}

//
// Contacts
//

// box.horizontal, // gnome 3.30
hdyleaflet, // > 3.32
leaflet.unfolded {  // > 3.38
  > headerbar:first-child { @extend %side_headerbar; }

  > stack > frame > grid.vertical {
    @extend %side_background;

    > scrolledwindow {
      > viewport.frame {
        // @extend %side_background;

        > list.contacts-contact-list {
          @extend %side_background;

          row.activatable.contact-data-row {
            @extend %side_views;
          }
        }
      }
    }

    > entry.search {
      color: $side_theme_fg;
      background-color: rgba($side_theme_fg, 0.1);

      image { color: $side_theme_fg; }

      &:focus {
        background-color: rgba($side_theme_fg, 0.12);
      }

      &:disabled {
        label, image {
          color: rgba($side_theme_alt_fg, 0.35);
        }
      }
    }

    > actionbar {
      @extend %side_background;

      button {
        @extend %side_buttons;
      }
    }
  }

  > separator.sidebar {
    border-right-style: if($variant == 'light', none, solid);
    background: none;
    min-width: 0;
  }

  // selection-mode
  .selection-mode & headerbar {
    color: $selection_mode_fg;
    background-color: $selection_mode_bg;
    border-color: darken($selection_mode_bg, 4%);
    box-shadow: none;

    &:backdrop {
      background-color: $selection_mode_bg;
      color: transparentize($selection_mode_fg, 0.4);
    }

    .subtitle:link { @extend %link_selected;  }

    .selection-menu {
      box-shadow: none;
      padding-left: 10px;
      padding-right: 10px;

      .arrow {
        -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
      }
    }

    .maximized & { background-color: opacify($selection_mode_bg, 1); }

    button:not(.titlebutton) {
      &, &.flat {
        @include button(undecorated);
        color: $selection_mode_fg;
        background-color: transparentize($selection_mode_fg, 1);
      }

      &:hover { background-color: gtkalpha($selection_mode_fg, 0.3); }
      &:active, &:checked {
        color: $selected_fg_color;
        background-color: transparentize($selected_fg_color, 0.65);
        border-color: transparentize($selected_fg_color, 0.35);
      }

      &:disabled {
        &, label { color: transparentize($selected_fg_color, 0.5); }
        background-color: transparentize($selected_fg_color, 1);
        border-color: transparentize($selected_fg_color, 0.6);

        &:active, &:checked {
          color: transparentize($selected_fg_color, 0.25);
          background-color: transparentize($selected_fg_color, 0.8);
          border-color: transparentize($selected_fg_color, 0.6);
        }
      }

      &:backdrop { opacity: 0.7; background: none; }
    }

    button.titlebutton {
      &.close, &.maximize, &.minimize {
        color: transparent;
        background-color: transparent;
      }
    }
  }
}

//
// Fractal
//
hdyleaflet {
  > headerbar:first-child {
    @extend %side_headerbar;
  }

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

    > scrolledwindow > viewport {
      .sidebar {
        @extend %side_background;

        list > row.activatable {
          @extend %side_views;
        }

        .room-title {
          &, image { color: $side_theme_fg; }

          &:hover, &:active { color: $side_theme_alt_fg; }
        }

        label {
          color: $side_theme_fg;

          &:disabled { color: rgba($side_theme_alt_fg, 0.35); }
        }
      }
    }
  }
}

//
// Password and Keys
//

window > hdyleaflet, window > leaflet {
  > scrolledwindow > viewport.frame > list {
    @extend %side_background;

    > row.activatable {
      @extend %side_views;

      .seahorse-sidebar-item { -gtk-icon-style: symbolic; }

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