/************
 * Toolbars *
 ************/
%toolbar {
  padding: 0px;
  background-color: $headerbar_bg_color;
  color: $headerbar_fg_color;

  &:backdrop {
    background-color:$backdrop_headerbar_bg_color;
    color:$backdrop_headerbar_fg_color;
  }
}

toolbar {
  @extend %toolbar;

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

  // buttons
  button {
    border: none;
    background: none;
    text-shadow: none;
    background-color: transparent;
    color: $headerbar_fg_color;
    border-radius: 0px;
    padding: 10px;

    &:focus,
    &:active {
      color: $headerbar_fg_color; 
      text-shadow: none;
      box-shadow: inset 0 -2px 0 0 $headerbar_fg_color;
      background-color: transparentize(white, 0.9);

      &:backdrop {
        background-color: transparent;
        color: $backdrop_headerbar_fg_color;
      }
    }

    &:hover {
      background-color: transparentize(white, 0.9);
      text-shadow: none;
      color: $headerbar_fg_color;
      box-shadow: inset 0 -2px 0 0 $headerbar_fg_color;
    }

    &:disabled {
      background:none;
      background-color: transparent;
      color: transparentize($headerbar_fg_color,0.5);
    }

    &:backdrop {
      background:none;
      background-color: transparent;
      color: $backdrop_headerbar_fg_color;
    }
  }

  .separator {
    color: transparent;
    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: 0 7px 1px 6px; }
  &.vertical separator { margin: 6px 1px 7px 0; }

}


/*******************
 * Inline Toolbars *
 *******************/

%inline-toolbar,
.inline-toolbar {

  background-color: darken($bg_color, 2%);
  color: $fg_color;

  border: 1px solid $borders_color;
  border-top-width: 0;
  border-radius: 0 0 5px 5px;

  box-shadow: inset 0 -1px 1px -2px transparentize(black, 0.5);
  
  padding: 0px;

  &:backdrop {
    background-color: darken($bg_color, 5%);
  }

  // buttons
  button {
    border: none;
    background: none;
    text-shadow: none;
    box-shadow: none;
    background-color: transparent;
    color: $fg_color;
    border-radius: 0px;
    padding: 10px;

    &:focus,
    &:active {
      font:bold;
      color: $fg_color; 
      text-shadow: none;
      box-shadow: none;
      background-color: transparentize(black, 0.95);

      &:backdrop {
        border: none;
        background-color: transparent;
        color: $backdrop_fg_color;
      }
    }

    &:hover {
      background-color: transparentize(black, 0.95);
      text-shadow: none;
      color: $fg_color;
      box-shadow: none;
    }

    &:disabled {
      background:none;
      background-color: transparent;
      color: transparentize($fg_color,0.5);
    }

    &:backdrop {
      border: none;
      background:none;
      background-color: transparent;
      color: $backdrop_fg_color;
    }
  }

  entry {
    background: none;
    color: $fg_color;
    border-radius: 0px;
    border: none;
    box-shadow: none;

    &.image {
      color: $fg_color;

      &.left{
        padding-right: 6px;
      }
    }

    &:backdrop {
      color: $backdrop_fg_color;
    }

    &:selected {
      color: $base_color;
      background-color:$selected_bg_color;
    }
  }
}


%darkbar {
  border-style: solid;
  border-color: $borders_color;
  $_bg: mix($bg_color, $borders_color, 70%);
  background-color: $_bg;

  &:backdrop {
    border-color: $backdrop_borders_color;
    background-color: $backdrop_dark_fill;
    box-shadow: none;
    transition: $backdrop_transition;
  }
}


// search-bar
searchbar,
.search-bar {
  @extend %darkbar;
  @extend %inline-toolbar;

  padding:3px 0px;
  border-width: 0;
  border-radius:0;

}

// location-bar
.location-bar {
  @extend %darkbar;
  @extend %inline-toolbar;

  border-width: 0 0 1px;
  padding: 3px;
}
