@mixin common-toolbar-button($bg-color, $type){
  &, .x-toolbar & {
    border: 1px solid darken($bg-color, 22%);
    border-top-color: darken($bg-color, 15%);
    min-height: 29px;
    padding-top: 0;
    padding-bottom: 0;

    @include border-radius(2px);
    @include box-shadow(rgba(#fff, .35) 0 1px 0);

    @include color-by-background($bg-color);

    .x-button-icon {
      width: $icons-default-size;
      height: $icons-default-size;
    }

    // Fix Back/Forward buttons
    &.x-button-forward, &.x-button-back {
      &:before, &:after {
        $mask-height: $button-height;
        $mask-width: $mask-height/2.23;

        -webkit-mask-size: $mask-width $mask-height - .05em;
      }
    }

    & .x-button-label {
      @if $type == normal {
        color: darken($bg-color, 60%);
        text-shadow: lighten($bg-color, 50%) 0 .09em 0;
      } @else {
        color: lighten($bg-color, 80%);
        text-shadow: darken($bg-color, 22%) 0 -.09em 0;
      }
    }

    &.x-button-back:before, &.x-button-forward:before {
      background: darken($bg-color, 20%);
    }

    &, &.x-button-back:after, &.x-button-forward:after {
      @include background-gradient($bg-color, color_stops(lighten($bg-color, 100%), lighten($bg-color, 13%) 3%, $bg-color));
    }

    &.x-button-pressing, &.x-button-pressed, &.x-button-active {
      &, &:after {
        @if $type == normal {
          @include background-gradient(darken($bg-color, 40%), 'recessed');
        } @else {
          @include background-gradient(darken($bg-color, 10%), 'recessed');
        }
      }

      & .x-button-label {
        @if $type == normal {
          color: lighten($bg-color, 80%);
          text-shadow: darken($bg-color, 50%) 0 .09em 0;
        } @else {
          text-shadow: darken($bg-color, 22%) 0 .09em 0;
        }
      }
    }
  }
}


@mixin common-button-ui($ui-label, $color, $type: 'normal') {

  // Buttons

  .x-button.x-button-#{$ui-label}{
    padding: .3em 8px;

    @include common-toolbar-button($color, $type);

    @if $ui-label == back {
      &, .x-toolbar & {
        @include border-radius(4px);
        @include border-top-left-radius(6px);
        @include border-bottom-left-radius(6px);
      }
    }
  }

// SegmentedButtons
  .x-segmentedbutton-base {
    &:not(.divided) {
      margin: 0 .2em;

      .x-button-#{$ui-label} {
        margin: 0;

        @include border-radius(0 !important);

        &:not(.x-first) {
          border-left: 0 !important;
        }
      }
    }

    &.divided {
      .x-button-#{$ui-label} {
        &:not(.x-first) {
          border-left: 1px solid darken($color, 22%);
        }

        &:not(.x-last) {
          margin-right: 7px;
        }
      }
    }

    .x-button-#{$ui-label} {
      &.x-first {
        @include border-left-radius(2px !important);
      }
      &.x-last {
        @include border-right-radius(2px !important);
      }
    }
  }

}

// Additional button styles

.x-button.border-radius-10 {
  @include border-radius(10px !important);
}