.toolbar {
  padding: 4px;
  border-spacing: 4px;
  background-color: $bg_color;

  // on OSD
  .osd & { background-color: transparent; }

  // stand-alone OSD toolbars
  &.osd {
    padding: 13px;
    border: none;
    border-radius: 5px;
    background-color: $osd_bg_color;

    &.left,
    &.right,
    &.top,
    &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
  }

  // toolbar separators
  &.horizontal > separator { margin: 4px 0; }
  &.vertical > separator { margin: 0 4px; }
}

/****************
 * GtkSearchBar *
 ****************/

searchbar > revealer > box {
  padding: 6px;
  border-spacing: 6px;

  border-width: 0 0 1px;
  border-style: solid;
  border-color: $borders_color;

  background-color: mix($bg_color, $borders_color, 70%);

 .close {
    min-width: 16px;
    min-height: 16px;
    padding: 4px;
    border-radius: 50%;
    @extend %button_basic_flat;
  }
}

/****************
 * GtkActionBar *
 ****************/

actionbar > revealer > box {
  padding: 6px;
  border-top: 1px solid $borders_color;

  &, > box.start, > box.end {
    border-spacing: 6px;
  }
}

/**************
 * GtkInfoBar *
 **************/

infobar {
  > revealer > box {
    padding: 8px;
    border-spacing: 12px;
  }

  &.action:hover > revealer > box {
    background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 47%), 30%),
                      desaturate(darken(invert($selected_bg_color), 42%), 70%));
  }

  &.info,
  &.question,
  &.warning,
  &.error {
    > revealer > box {
      border-bottom: 1px solid lighten($borders_color, 5%);
      background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 45%), 30%),
                        desaturate(darken(invert($selected_bg_color), 40%), 70%));
    }
  }

 .close {
    min-width: 16px;
    min-height: 16px;
    padding: 4px;
    border-radius: 50%;
    @extend %button_basic_flat;
  }
}
