@mixin button-bordered($color, $background, $border) {
  $active-background: darken($background, 10%);
  $active-border: darken($border, 12%);
  $active-color: darken($color, 10%);

  &.bordered {
    border-color: $border;
    background-color: transparent;
    color: $color;

    &:hover {
      border-color: $active-border;
    }

    &:active,
    &.active {
      background-color: transparent;
      border-color: $active-border;

      &:hover,
      &:focus,
      &.focus {
        color: $active-color;
      }
    }
    &.disabled,
    &:disabled {
      cursor: not-allowed;
      
      &:focus,
      &.focus {
        background-color: transparent;
            border-color: $border;
            color: $color;
      }
      &:hover {
        background-color: transparent;
            border-color: $border;
            color: $color;
      }
    }
  }
}

@mixin button-theme($color, $background, $border) {
  $active-background: darken($background, 10%);
  $active-border: darken($border, 12%);
  
  background-color: $background;
  border-color: $border;
  color: $color;

  &:hover {
    background-color: $active-background;
        border-color: $active-border;
               color: $color;
  }

  &:focus,
  &.focus {
    background-color: $active-background;
        border-color: $active-border;
               color: $color;
  }

  &:active,
  &.active {
    background-color: $active-background;
        border-color: $active-border;
               color: $color;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);

    &:hover,
    &:focus,
    &.focus {
      background-color: darken($background, 17%);
          border-color: darken($border, 25%);
                 color: $color;
    }
  }
  
  &.disabled,
  &:disabled {
    cursor: not-allowed;
    
    &:focus,
    &.focus {
      background-color: $background;
          border-color: $border;
    }
    &:hover {
      background-color: $background;
          border-color: $border;
    }
  }

}

@mixin button-size($height, $padding, $font-size, $border-radius) {
  padding: $padding;
  font-size: $font-size;
  height: $height;
  line-height: $height;

  &.radius {
    border-radius: $border-radius;
  }
  
  &.round {
    border-radius: r(1000);
/*    padding-left: $height / 2;
    padding-right: $height / 2;*/
  }

  &.circle {
    width: $height;
    height: $height;
    padding: 0;
    border-radius: 50%;
  }

  .ui-icon + span,
  span + .ui-icon {
    margin-left: $height / 10;
  }
}

.ui-button {
  display: inline-block;
  margin-bottom: 0;
  @include button-size($base-height, 0 r(15), $base-fontSize, $base-radius);
  @include button-theme(#fff, $base-color-bbb, $base-btn-default-border);
  @include button-bordered(#9b9b9b, $base-btn-default-bg, $base-btn-default-border);
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  background-image: none;
  border: 1px solid transparent;
  /*border-width: 0;*/
  cursor: pointer;
  outline: 0;
  -webkit-appearance: none;
  user-select: none;
  transition: background-color 300ms ease-out, border-color 300ms ease-out;
  
  /* disabled Button */
  &.disabled,
  &:disabled {
    cursor: not-allowed;
    opacity: .35;
    box-shadow: none;
  }

  /* block Button */
  &.block {
    width: 100%;
    display: block;
  }

  /* Button sizes */
  &.size-xl {
    @include button-size($base-height-xl, 0 r(20), $base-fontSize-xl, $base-radius-xl);
  }
  &.size-lg {
    @include button-size($base-height-lg, 0 r(18), $base-fontSize-lg, $base-radius-lg);
  }
  &.size-sm {
    @include button-size($base-height-sm, 0 r(12), $base-fontSize-sm, $base-radius-sm);
  }
  &.size-xs {
    @include button-size($base-height-xs, 0 r(8), $base-fontSize-xs, $base-radius-xs);
  }

  /* Button themes */
  &.theme-info {
    @include button-theme($base-btn-info-color, $base-btn-info-bg, $base-btn-info-border);
    @include button-bordered($base-btn-info-border, $base-btn-info-bg, $base-btn-info-border);
  }
  &.theme-success {
    @include button-theme($base-btn-success-color, $base-btn-success-bg, $base-btn-success-border);
    @include button-bordered($base-btn-success-border, $base-btn-success-bg, $base-btn-success-border);
  }
  &.theme-warning {
    @include button-theme($base-btn-warning-color, $base-btn-warning-bg, $base-btn-warning-border);
    @include button-bordered($base-btn-warning-border, $base-btn-warning-bg, $base-btn-warning-border);
  }
  &.theme-error {
    @include button-theme($base-btn-error-color, $base-btn-error-bg, $base-btn-error-border);
    @include button-bordered($base-btn-error-border, $base-btn-error-bg, $base-btn-error-border);
  }

}