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;

      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: $accent_color; }

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

row {
  image.sidebar-icon {
    opacity: 0.7; // see bug #786613 for details on this oddity
  }

  .sidebar-button {
    opacity: 0.7;

    &:hover,
    &:active,
    &.keyboard-activating {
      opacity: 1;
    }
  }
}

placesview {
  .server-list-button > image {
    transition: -gtk-icon-transform 200ms $ease-out-quad;
    -gtk-icon-transform: rotate(0turn);
  }

  .server-list-button:checked > image {
    -gtk-icon-transform: rotate(-0.5turn);
  }

  > actionbar > revealer > box > box {
    border-spacing: 6px;
  }
}

filechooser {
  box-shadow: 0 1px $border_color;

  // Make the toolbar buttons flat like on an actual toolbar
  #pathbarbox > stack > box > {
    button,
    box > button,
    menubutton > button {
      @extend %button_basic_flat;
    }
  }

  pathbar button {
    &:not(.image-button) {
      padding-left: 9px;
      padding-right: 9px;
    }

    // Icon + label buttons
    > box {
      border-spacing: 4px;

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

  columnview > listview > row > cell {
    padding: 0;

    > filelistcell {
      padding: 8px 6px;
    }
  }

  gridview {
    @include undershoot(top, $shade_color, true);
    padding: 15px;

    > child {
      border-radius: 12px;
      padding: 0;
      margin: 3px;

      > filelistcell {
        padding: 6px 12px;
      }

      & filethumbnail image {
        filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.3));
      }

      & box {
        border-spacing: 6px;
      }
    }
  }

  // Style the outer action bar with a toolbar view-like shadow
  > box > actionbar {
    box-shadow: 0 -1px if($contrast == 'high', $border_color, gtkalpha($headerbar_shade_color, .5)),
                0 -2px 4px gtkalpha($headerbar_shade_color, .5);

    > revealer > box {
      box-shadow: none;
      padding-top: 6px;
    }
  }

  // Style the remote search action bar like a banner
  scrolledwindow + actionbar > revealer > box {
    background-color: gtkmix($accent_bg_color, $view_bg_color, 30%);
    color: $window_fg_color;
    box-shadow: none;
    padding-top: 6px;
    font-weight: bold;

    &:backdrop {
      background-color: gtkmix($accent_bg_color, $view_bg_color, 15%);
    }
  }

  placesview {
    // Only the bottom undershoot, since the action bar is guaranteed to be
    // there, while the search bar can show and hide. That's a problem, since
    // we only need top undershoot when it's visible, to avoid a double shadow.
    > stack > scrolledwindow {
      @include undershoot(bottom);
    }

    // Make the Connect to Server action bar flat
    > actionbar > revealer > box {
      background: $view_bg_color;
      color: $view_fg_color;
      box-shadow: none;
      padding-top: 6px;

      &:backdrop {
        background: $view_bg_color;
        transition: none;
      }
    }
  }

  placessidebar {
    background-color: $sidebar_bg_color;
    color: $sidebar_fg_color;

    &:backdrop {
      background-color: $sidebar_backdrop_color;
      transition: background-color $backdrop_transition;
    }
  }

  // The separator is a part of GtkPaned, so it needs to be styled separately
  paned.horizontal > separator {
    &:dir(ltr) {
      box-shadow: inset 1px 0 $sidebar_bg_color,
                  inset 1px 0 if($contrast == 'high', $border_color, $sidebar_border_color);

      &:backdrop {
        box-shadow: inset 1px 0 $sidebar_backdrop_color,
                    inset 1px 0 if($contrast == 'high', $border_color, $sidebar_border_color);
      }
    }

    &:dir(rtl) {
      box-shadow: inset -1px 0 $sidebar_bg_color,
                  inset -1px 0 if($contrast == 'high', $border_color, $sidebar_border_color);

      &:backdrop {
        box-shadow: inset -1px 0 $sidebar_backdrop_color,
                    inset -1px 0 if($contrast == 'high', $border_color, $sidebar_border_color);
      }
    }

    &:backdrop {
      transition: box-shadow $backdrop_transition;
    }
  }
}

/* Fix header bar height in the file chooser */
window.filechooser headerbar box.start + box.vertical {
  margin-top: -6px;
  margin-bottom: -6px;
  min-height: 12px;
}
