.sidebar {
  background-color: mix($bg_color, $base_color, 50%);

  &:not(separator) {
    &:dir(ltr),
    &.left,
    &.left:dir(rtl) {
      border-right: 1px solid $borders_color;
      border-left-style: none;
    }

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

  listview.view,
  list { background-color: transparent; }

  paned & { &.left, &.right, &.left:dir(rtl), &:dir(rtl), &:dir(ltr), & { border-style: none; }}
}

stacksidebar row {
  padding: 10px 4px;
  @include focus-ring();

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

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

  &:selected {
    background-color: $menu_selected_color;
    border-radius: $menu_radius;
    color: $fg_color;

    &:hover {
      background-color: darken($menu_selected_color, 5%);
    }
  }

  &.activatable:active,
  &.activatable:selected:active {
    box-shadow: none; // #3413
  }
}

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

/**********************
 * Navigation Sidebar *
 **********************/

.navigation-sidebar {
  padding: $menu-margin 0; //only vertical padding. horizontal row size would clip

  > separator {
    margin: $menu-margin;
  }

  > row {
    min-height: 36px;
    padding: 0 8px;
    border-radius: $menu-margin;
    margin: 0 $menu-margin 2px;
    @include focus-ring($focus-state: 'focus-visible:focus-within');

    &:hover {
      background-color: darken($menu_selected_color, 5%);
    }

    &:selected {
      background-color: $menu_selected_color;
      color: inherit;

      &:hover {
        background-color: darken($menu_selected_color,5%);
      }
    }

    &:disabled { color: $insensitive_fg_color; }
  }
}

/********************
 * GtkPlacesSidebar *
 ********************/

$_placesidebar_icons_opacity: 0.7;

row image.sidebar-icon { opacity: $_placesidebar_icons_opacity; } // dim the sidebar icons
                                                                  // see bug #786613 for details
                                                                  // on this oddity

/* this should be more generic, only using .navigation-sidebar
   https://gitlab.gnome.org/GNOME/gtk/-/issues/2929
*/

placessidebar {
  .navigation-sidebar > row {
    // Needs overriding of the `.navigation-sidebar > row` padding
    padding: 0;

    // Using margins/padding directly in the SidebarRow
    // will make the animation of the new bookmark row jump
    > revealer { padding: 0 14px; }

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

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

    @at-root button.sidebar-button {
      @extend %button_basic_flat;

      @extend %button_selected_flat;
      min-height: 26px;
      min-width: 26px;
      margin-top: 3px;
      margin-bottom: 3px;
      padding: 0;
      border-radius: 100%;
    }

    // in the sidebar case it makes no sense to click the selected row
    &:selected:active { box-shadow: none; }

    &.sidebar-placeholder-row {
      padding: 0 8px;
      min-height: 2px;
      background-image: image($drop_target_color);
      background-clip: content-box;
    }

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

    &:drop(active):not(:disabled) {
      color: $drop_target_color;
      box-shadow: inset 0 1px $drop_target_color,
                  inset 0 -1px $drop_target_color;

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