@mixin button-variant($color, $background, $border) {
  $active-background: darken($background, 10%);
  $active-border: darken($border, 10%);
  color: $color;
  &:not(.ghost){
    background-color: $background;
    border-color: $border;
  }
  &.ghost:not(.default){
    color:$background;
  }
  &:active{
    &:not(.ghost){
      background-color: $active-background;
      border-color:$active-border;
    }
  }
}

@mixin border-button-variant($color,$border-color) {
  color: $color;
  border-color:$border-color;

  &:active{
    background-color: transparent;
    color: $color;
  }
}

.text-button{
  @extend .text-base-button;
  padding: 0 $content-padding;
  @include button-variant( $content-color,$button-color, $border-color);
  text-align: center;
  font-size: $font-size;
  @include text-ellipsis;
  transition: $transition-time;
  &.no-style{
    padding:0;
    background: transparent;
    border-color: transparent;
  }
  &.ghost{
    background: transparent;
    border-color: transparent;
  }
  &.no-border{
    border:transparent;
  }
  &:visited,&:link,&:active{
    color:$content-color;
  }
  &:hover{
    outline:none;
  }
  &:focus{
    outline:none;
  }
  &:active{
    outline:none;
  }
  &.small-radius{
    border-radius:$border-radius;
  }
  &.radius{
    border-radius:$component-size;
    &:active{
      outline:none;
      transform:scale(0.99);
    }
  }
  &.block {
    display: block;
    width: 100%;
  }
  &.light{
    &:not(.ghost) {
      @include button-variant( $dark,$light,$light);
    }
    &.ghost{
      color: $light;
    }
  }
  &.dark{
    &:not(.ghost) {
      @include button-variant( $light,$dark,$dark);
    }
    &.ghost{
      color: $dark;
    }
  }
  &.primary {
    @include button-variant( $light,$primary-color,$primary-color);
  }
  &.secondary{
    @include button-variant( $light,$secondary-color,$secondary-color);
  }
  &.info {
    @include button-variant( $light,$info-color,$info-color);
  }
  &.success {
    @include button-variant( $light,$success-color,$success-color);
  }
  &.warning {
    @include button-variant( $light,$warning-color,$warning-color);
  }
  &.danger {
    @include button-variant( $light,$error-color,$error-color);
  }
  &.colored{
    color: $light;
  }
  [class*="icon-"]{
    margin-left: $icon-text-span;
    margin-right: $icon-text-span;
  }
  .button-label{
    cursor: pointer;
  }
  &.button-loading{
    &:before{
      content: '';
      background-image: url("#{$resourceRoot}/image/loading/loading.svg");
      background-size: 100% 100%;
      animation: load-loop 1s linear infinite;
      width: $component-size-small;
      height: $component-size-small;
      line-height: $component-size-small;
      font-size: $component-size-small;
      display: inline-block;
      margin-left: $component-span;
      vertical-align: middle;
    }
  }

  &.border {
    background: transparent !important;
    color: $dark;
    @include border-button-variant($dark,$gray);
    &.light{
      @include border-button-variant($light,$light);
    }
    &.dark{
      @include border-button-variant($dark,$dark);
    }
    &.primary {
      @include border-button-variant($primary-color,$primary-color);
    }
    &.secondary{
      @include border-button-variant($secondary-color,$secondary-color);
    }
    &.info {
      @include border-button-variant($info-color,$info-color);
    }
    &.success {
      @include border-button-variant($success-color,$success-color);
    }
    &.warning {
      @include border-button-variant($warning-color,$warning-color);
    }
    &.danger {
      @include border-button-variant($error-color,$error-color);
    }
  }
  &.circle{
    border-radius:$component-size;
  }

  &.small{
    height: $component-size-small;
    line-height:$component-size-small -(2*$border-width);
    &.circle{
      border-radius:$component-size-small;
    }
  }
  &.large{
    height: $component-size-large;
    line-height:$component-size-large -(2*$border-width);
    &.circle{
      border-radius:$component-size-large;
    }
  }
}