//
// BUTTON
//

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

  color: $button-text-color;
  border: rem(1) solid $button-border-color;

  cursor: pointer;

  font-weight: $button-font-weight;
  font-size: $button-font-size;
  text-align: center;

  padding-top: rem(2);
  padding-bottom: rem(2);
  padding-left: rem(20);
  padding-right: rem(20);

  height: rem(30);
  line-height: rem(30);
  width: auto;
}

.button.active {
  @include background($button-active-background);
  color:  $button-active-text-color;
  border: rem(1) solid $button-active-border-color;
}

.button .label {
  @extend .qx-flex1;
}