%button-block{
  display: block;
}
%button-large{
  padding: $gap 2*$gap !important;
  //@include small;
  font-size: inherit !important;
  &.icon{
    padding-left: 4*$gap !important;
    &:before{
      width: 4*$gap;
      font-size: $font-h3;
    }
  }
}
%button-small{
  padding: 0.25*$gap .5*$gap !important;
  @include small;
  &.icon{
    padding-left: 3*$gap !important;
    &:before{
      width: 3*$gap !important;
      font-size: $font-size;
    }
  }
  #sidebar &,#easy_grid_sidebar &{
    display: inline-block !important;
  }
}
%button-mini{
  padding: 0.25*$gap 0.5*$gap !important;
  @include smaller;
  &.icon{
    padding-left: 2*$gap !important;
    &:before{
      width: 2*$gap !important;
      font-size: $font-size;
    }
  }
  #sidebar &,#easy_grid_sidebar &{
    display: inline-block !important;
  }
}
%button-with-icon-insidebar{
  padding-left: 4*$gap !important;
  &:before{
    width: 4*$gap !important;
  }
}
%button{
  //font-weight: bold;
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  border: 1px solid transparent;
  padding: 0.5*$gap $gap;
  text-align: left;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  //overflow: hidden;

  @include small;
  @extend %border-radius-small;

  //@if $rails-env != "test" {
  //  @extend %ripple;
  //}

  &:focus{
    outline: none;
  }
  &.icon{
    padding-left: 3*$gap;
    @extend %button-with-icon;
  }
  //@include respond-to(max-small-screen){
  //  display: block;
  //}
  #sidebar &,#easy_grid_sidebar &{
    display: block;
    position: relative !important;
    z-index: 2;
    margin-bottom: 3px;
    &.icon{
     @extend %button-with-icon-insidebar;
    }
    @include respond-to(min-sidebar-collapse){
      .nosidebar &{
        &:hover {
          @include animation(sidebar-buttons-slide-left 0.25s forwards);
        }
      }
    }
  }
  .form-actions &, .ui-dialog-buttonset &{
    margin: 3px 0.5*$gap;
  }
  &.active,&:active{
    //@extend %box-shadow-inset-active;
  }
  .splitcontent .contextual &, .contextual &{
    @extend %button-small;
  }

}
@include keyframes(sidebar-buttons-slide-left) {
  from {
    @include translate(0,0);
  }
  to {
    @include translate(-$sidebar-width + 4*$box-margin, 0)
  }
}

@mixin button($background:$button-base-background,$color:$button-base-color,$height:$button-height, $color-border: $background){
  @extend %button;
  line-height: $height - $gap - 2;
  min-height: $height - $gap - 2;
  background: $background;
  //border-color: background-to-border($background);
  border-color: $color-border;
  color: $color;
  &:hover{
    color: $color;
	  text-decoration: none;
    background: darken($background,5%);
    border-color: darken($color-border,5%);
  }
  &.selected{
    background: darken($background,5%);
    border-color: darken($color-border,5%);
    color: rgba($color,.75);
  }
  .ui-widget-content & { //hack to overide jui ****
    color: $color;
  }
}

@mixin button-small($background:$button-base-background,$color:$button-base-color,$height:$button-height){
  @include button($background, $color, $height);
  @extend %button-small;
}
@mixin button-mini($background:$button-base-background,$color:$button-base-color,$height:$button-height){
  @include button($background, $color, $height);
  @extend %button-mini;
}

@mixin button-outlined($color:$color-main, $color-hover: $color-main-border){
  color: $color !important;
  background: transparent !important;
  &:hover{
    background:transparent !important;
    color: $color-hover !important;
  }
}

%button-base{
  @include button($button-base-background,$button-base-color,$button-height);
}
%button-main{
  @include button($button-main-background,$button-main-color,$button-height);
}
%button-important{
  @include button($button-important-background,$button-important-color,$button-height);
}
%button-positive{
  @include button($button-positive-background,$button-positive-color,$button-height);
}
%button-negative{
  @include button($button-negative-background,$button-negative-color,$button-height);
}
%button-mini{
  @include button($button-base-background,$button-base-color,$button-mini-height);
}
%button-mini-positive{
  @include button($button-positive-background,$button-positive-color,$button-mini-height);
}
%button-mini-negative{
  @include button($button-negative-background,$button-negative-color,$button-mini-height);
}
%button-mini-important{
  @include button($button-important-background,$button-important-color,$button-mini-height);
}
%button-outlined{
  @include button-outlined($color-text , darken($color-text,10%));
  &.button-positive{
    @include button-outlined($color-positive, $color-positive-border);
  }
  &.button-negative{
    @include button-outlined($color-negative, $color-negative-border);
  }
  &.button-main{
    @include button-outlined($color-main, $color-main-border);
  }
}
%button-light{
  $bg: lighten($button-base-background,10%);
  @extend %button-base;
  background: $bg;
  &:hover{
    background: darken($bg,5%);
  }
}
%button-reset{
  background: none;
  border: none;
  padding: 0;
  line-height: normal;
  &:hover{
    background: none;
  }
}

%button-group{
  display: inline-block;
  margin-bottom: $gap;
  [class*=button-]{
    @extend %border-radius-none;
    &:last-child{
      @include border-radius(0 $border-radius $border-radius 0);
    }
    &:first-child{
      @include border-radius($border-radius 0 0 $border-radius);
    }
    &:only-child{
      @include border-radius($border-radius);
    }
    & + & {
      margin-left: -1px;
    }
  }
}
%button-append{
  display: inline-block;
  @extend %box-sizing-border-box;
  @extend %button-base;
  @extend %truncate;
  @include border-radius(0);
  border-color: $color-border-minor;
  width: 1.5*$box-padding + 2;
  //max-width: 25%;
  line-height: $tab-height;
  height: $tab-height;
  text-align: center;
  padding: 0 .5*$gap !important;
  margin: 0;
  margin-left: -1px;
  position: relative;
  z-index: 1;
  vertical-align: middle;
  &:before{
    width: 100% !important;
  }
}
%button-icon {
  text-decoration: none;
  //background: $color-foreground;
  color: $button-base-color;
  border: 1px solid transparent;
  width: 1.5em !important;
  font-size: $font-h4;
  line-height: 1.5em;
  text-align: center;
  @extend %border-radius-infinite;
  &.icon-add{
    color: $color-positive;
  }
  &:hover{
    background: darken($color-positive,5%);;
    color: $white;
    border-color: darken($color-positive,10%);
    cursor: pointer;
  }
  &.active{
    background: darken($color-important,5%);;
    color: $white;
    border-color: darken($color-important,10%);
    &:hover{
      background: darken($color-positive,5%);;
      border-color: darken($color-positive,10%);
    }
  }
}
%button-link{
  @extend %base-font;
  text-decoration: underline;
  @include small;
  color: $color-text;
  &:before{
    @extend %button-icon;
  }
  &+&{
    //margin-left: $gap;
  }
}

%button-icon-only{
  @extend %button-base;
  padding-right: 0;
}


%button-rounded{
  @extend %border-radius-infinite;
}

%button-with-icon{
  &:before{
    position: absolute;
    left: 0;
    width: 3*$gap;
    text-align: center;
    font-size: $font-h3;
    line-height: 1;
    color: inherit;
    top: 50%;
    margin-top: -0.5em;
  }
}