@mixin common_sidebar() {
  background-color: $sidebar_bg_color;

  row, view row, row.sidebar-row, .view, iconview {
    &, &:focus {
      border: none;
      color: $sidebar_fg_color;
      background-color: transparent;

      &:hover {
        color: $sidebar_fg_color;
        background-color: gtkmix($sidebar_bg_color, $sidebar_fg_color, 0.05);
      }
      
      &:active {
        color: $sidebar_fg_color;
        background-color: gtkmix($sidebar_bg_color, $sidebar_fg_color, 0.15);
      }
      
      &:selected {
        color: $sidebar_fg_color;
        background-color: gtkmix($sidebar_bg_color, $dark_shadow, 0.15);
        
        &:hover {
          color: $sidebar_fg_color;
          background-color: gtkmix($sidebar_bg_color, $dark_shadow, 0.1);
        }
        
        &:active {
          color: $sidebar_fg_color;
          background-color: gtkmix($sidebar_bg_color, $dark_shadow, 0.2);
        }
        
        &:backdrop {
          color: $sidebar_fg_color;
          background-color: gtkmix($sidebar_bg_color, $dark_shadow, 0.15);
        }
      }
    }

    &.expander {
      color: $sidebar_fg_color;

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

  frame > border, .frame { border: none; }
  separator, separator:backdrop { background-color: transparent; }

  // allows light scrollbar on dark sidebar
  scrollbar {
    background-color: transparent;
    
    slider, slider:hover, slider:active, &.overlay-indicator:not(.dragging):not(.hovering) slider {
      background-color: gtkalpha($sidebar_fg_color, 0.3);
    }
  }
}

@mixin sidebar() {
  filechooser, .nautilus-window, .nemo-window {
    &.csd.background, placessidebar list {
      background-color: $sidebar_bg_color;
    }
    
    .sidebar { @include common_sidebar(); }
  }
  
  .caja-navigation-window .caja-side-pane { @include common_sidebar(); }
  
  stacksidebar {
    &.sidebar {
      &:dir(ltr) list,
      &.left list,
      &.left:dir(rtl) list {
        border-right: 1px solid $borders;
        border-left-style: none;
      }

      &:dir(rtl) list,
      &.right list {
        border-left: 1px solid $borders;
        border-right-style: none;
      }
    }

    row {
      padding: 10px 4px;
      
      > label {
        padding-left: 6px;
        padding-right: 6px;
      }

      &.needs-attention > label { background-size: 6px 6px, 0 0; }
    }
  }

  placessidebar {
    > viewport.frame { border-style: none; }

    row {
      min-height: 36px;
      padding: 0px;

      > revealer { padding: 0 14px; }

      image.sidebar-icon {
        opacity: 0.75;

        &:dir(ltr) { padding-right: 8px; }
        &:dir(rtl) { padding-left: 8px; }
      }

      label.sidebar-label {
        &:dir(ltr) { padding-right: 2px; }
        &:dir(rtl) { padding-left: 2px; }
      }

      &.sidebar-new-bookmark-row { color: $selected_bg_color; }
      &:drop(active):not(:disabled) {
        color: $selected_bg_color;
        box-shadow: inset 0 1px $selected_bg_color, inset 0 -1px $selected_bg_color;
        
        &:selected {
          color: $selected_fg_color;
          background-color: $selected_bg_color;
        }
      }
    }
  }

  button.sidebar-button {
    &, &:backdrop {
      min-width: 22px;
      min-height: 22px;
      margin-top: 2px;
      margin-bottom: 2px;

      padding: 0;
      border-radius: 100%;
      color: $sidebar_fg_color;
      border-color: transparent;
      background-color: transparent;
      background-image: none;
      
      -gtk-outline-radius: 100%;
      outline-color: transparent;
    }

    &:hover { color: $sidebar_fg_color; }
    &:active { color: gtkmix($sidebar_fg_color, $sidebar_bg_color, 0.2); }
    &:not(:hover):not(:active) > image { opacity: 0.5; }
  }
}
