@mixin btn-size($name, $v, $h, $font-size, $radius) {
  .ui-btn-#{$name} {
    padding: $v $h;
    font-size: $font-size;
    border-radius: $radius;
  }
}

@mixin btn-theme($name, $color, $bg-color) {
  .ui-btn-#{$name} {
    color: $color;
    background-color: $bg-color;
    @if $name != default {
      border: 1px solid $bg-color;
    }
    &:hover {
      background-color: darken($bg-color, 7);
      @if $name != default {
        border-color: darken($bg-color, 7);
      }
    }
    &:focus {
      background-color: darken($bg-color, 10);
      @include focus(if($name == default, $color, $bg-color));
      z-index: 1;
      @if $name != default {
        border-color: darken($bg-color, 7);
      }
    }
    &:active {
      background-color: darken($bg-color, 15);
      @if $name != default {
        border-color: darken($bg-color, 7);
      }
    }
    &.ui-disabled, &[disabled], &[readonly] {
      opacity: .6;
      cursor: not-allowed;
      &:focus, &:hover, &:active {
        background-color: $bg-color;
      }
    }
  }
}

.ui-btn {
  display: inline-block;
  border: 1px solid $color-gray;
  font-size: $button-font-size;
  cursor: pointer;
  text-align: center;
  padding: $button-padding-vertical $button-padding-horizontal;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  user-select: none;
  outline: none;
  border-radius: $button-radius;
  &.ui-disabled, &[disabled], &[readonly] {
    opacity: .6;
    cursor: not-allowed;
  }
  &[readonly] {
    cursor: default;
  }
  &.ui-btn-block {
    width: 100%;
    display: block;
  }

}
@include btn-theme(default, $color-default, $color-lighter);
@include btn-theme(dark, #fff, $color-dark);
@include btn-theme(gray, #fff, $color-gray-dark);
@include btn-theme(primary, #fff, $color-primary);
@include btn-theme(success, #fff, $color-success);
@include btn-theme(info, #fff, $color-info);
@include btn-theme(danger, #fff, $color-danger);
@include btn-theme(warning, #fff, $color-warning);

@include btn-size(sm, $button-padding-vertical-sm, $button-padding-horizontal-sm, $button-font-size-sm, $button-radius-sm);
@include btn-size(lg, $button-padding-vertical-lg, $button-padding-horizontal-lg, $button-font-size-lg, $button-radius-lg);

ui-dropdown.ui-open > .ui-btn {
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .125);
  &.ui-btn-default {
    background-color: darken($color-lighter, 10);
    z-index: 1;
  }
  &.ui-btn-dark {
    background-color: darken($color-dark, 10);
    z-index: 1;
    border-color: darken($color-dark, 7);
  }
  &.ui-btn-gray {
    background-color: darken($color-gray-dark, 10);
    z-index: 1;
    border-color: darken($color-gray-dark, 7);
  }
  &.ui-btn-primary {
    background-color: darken($color-primary, 10);
    z-index: 1;
    border-color: darken($color-primary, 7);
  }
  &.ui-btn-info {
    background-color: darken($color-info, 10);
    z-index: 1;
    border-color: darken($color-info, 7);
  }
  &.ui-btn-success {
    background-color: darken($color-success, 10);
    z-index: 1;
    border-color: darken($color-success, 7);
  }
  &.ui-btn-warning {
    background-color: darken($color-warning, 10);
    z-index: 1;
    border-color: darken($color-warning, 7);
  }
  &.ui-btn-danger {
    background-color: darken($color-danger, 10);
    z-index: 1;
    border-color: darken($color-danger, 7);
  }
}