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: var(--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, true);
    padding: 15px;

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

      > filelistcell {
        padding: 6px 12px;
      }

      & filethumbnail image {
        filter: drop-shadow(0px 1px 1px RGB(0 0 6 / 30%));
      }

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

  columnview > listview,
  gridview {
    --accent-bg-color: #959595;
    --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
  }

  // Style the outer action bar with a toolbar view-like shadow
  > box > actionbar {
    box-shadow: 0 -1px color-mix(in srgb, var(--headerbar-shade-color) 50%, transparent),
                0 -2px 4px color-mix(in srgb, var(--headerbar-shade-color) 50%, transparent);

    @media (prefers-contrast: more) {
      box-shadow: 0 -1px $border_color,
                  0 -2px 4px color-mix(in srgb, var(--headerbar-shade-color) 50%, transparent);
    }

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

  // Style the remote search action bar like a banner
  scrolledwindow + actionbar > revealer > box {
    background-color: color-mix(in srgb, var(--accent-bg-color) 30%, var(--view-bg-color));
    color: var(--window-fg-color);
    box-shadow: none;
    padding-top: 6px;
    font-weight: bold;

    &:backdrop {
      background-color: color-mix(in srgb, var(--accent-bg-color) 15%, var(--view-bg-color));
    }
  }

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

      list {
        --accent-bg-color: #959595;
        --accent-color: oklab(from var(--accent-bg-color) var(--standalone-color-oklab));
      }
    }

    // Make the Connect to Server action bar flat
    > actionbar > revealer > box {
      background: var(--view-bg-color);
      color: var(--view-fg-color);
      box-shadow: none;
      padding-top: 6px;

      &:backdrop {
        background: var(--view-bg-color);
        transition: none;
      }
    }
  }

  placessidebar {
    background-color: var(--sidebar-bg-color);
    color: var(--sidebar-fg-color);

    &:backdrop {
      background-color: var(--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 var(--sidebar-bg-color),
                  inset 1px 0 var(--sidebar-border-color);

      @media (prefers-contrast: more) {
        box-shadow: inset 1px 0 var(--sidebar-bg-color),
                    inset 1px 0 $border_color;
      }

      &:backdrop {
        box-shadow: inset 1px 0 var(--sidebar-backdrop-color),
                    inset 1px 0 var(--sidebar-border-color);

        @media (prefers-contrast: more) {
          box-shadow: inset 1px 0 var(--sidebar-backdrop-color),
                      inset 1px 0 $border_color;
        }
      }
    }

    &:dir(rtl) {
      box-shadow: inset -1px 0 var(--sidebar-bg-color),
                  inset -1px 0 var(--sidebar-border-color);

      @media (prefers-contrast: more) {
        box-shadow: inset -1px 0 var(--sidebar-bg-color),
                    inset -1px 0 $border_color;
      }

      &:backdrop {
        box-shadow: inset -1px 0 var(--sidebar-backdrop-color),
                    inset -1px 0 var(--sidebar-border-color);

        @media (prefers-contrast: more) {
          box-shadow: inset -1px 0 var(--sidebar-backdrop-color),
                      inset -1px 0 $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;
}
