//
// TOOLBAR
//

.toolbar-button {
  @extend .button;
  @extend .qx-hbox;
  @include background-clip(padding-box);
  @include background($toolbar-background);
  @include border-radius($toolbar-border-radius);

  overflow: hidden;

  color: $toolbar-text-color;
  border: px-to-rem(1) solid $toolbar-border-color;

  cursor: pointer;
  font-weight: $toolbar-font-weight;

  width:0;
  height: 100%;
  line-height:normal;

  padding-left: $toolbar-padding;
  padding-right: $toolbar-padding;
}

.toolbar-button.active {
  @include background($toolbar-active-background);
  color: $toolbar-active-text-color;
}

.toolbar-separator {
  width: px-to-rem(4);
}

.toolbar {
  @include box-align(stretch);

  z-index: 1;
  padding: $toolbar-padding;
  height: px-to-rem(50);

  height: -moz-calc(px-to-rem(50) + $toolbar-padding);
}

.toolbar-button img {
  vertical-align: middle;
}

.toolbar-button > div {
  @extend .qx-flex1;
}

.toolbar-button .label {
  height: auto;
  padding-top:px-to-rem(2);
  text-align:center;
  // For displaying ellipsis correctly.
  max-width:100%;
}

.toolbar-separator {
  width: $toolbar-padding;
}