.efly-button {
  position: relative;
  border: 1px solid $color-border-base;
  font-size: $font-default;
  border-radius: 1px;
  padding: $space-8-14;
  line-height: 1;
  min-width: 54px;
  height: $height-default;
  transition: all .2s ease-in-out;
  @include box-sizing();

  .icon {
    font-size: $font-default;
  }

  &:hover, &.hover {
    color: $color-primary !important;
    border: 1px solid $color-primary !important;
  }

  &:active, &.active {
    background: $color-primary;
    border: 1px solid $color-primary;
    color: $color-white;


  }

  &.disabled, &:disabled {
    color: $color-text-secondary !important;
    background: $color-disabled !important;
    border: none !important;
    cursor: not-allowed;


    &:hover, &.hover, &:active, &.active {
      border: none !important;
      color: $color-text-secondary !important;
      background: $color-disabled !important;
    }
  }

  &.efly-button-auto {
    min-width: auto;
    height: auto;
    padding: 6px $space-mini;
    color: #777;
    border-color: #ccc;
    &:hover, &.hover {
      color: $color-primary !important;
      border: 1px solid $color-primary;
    }
    &:active, &.active {
      background: none !important;
      border: 1px solid $color-primary;
      color: $color-primary;
    }

    &.disabled, &:disabled {
      color: $color-text-secondary !important;
      background: $color-disabled !important;
      border: none !important;
      cursor: not-allowed;
    }
  }

  &.efly-button-text {
    border: 1px solid transparent !important;

    &:hover, &.hover {
      color: $color-primary;
      border: 1px solid transparent !important;
    }

    &:active, &.active {
      background: none;
      border: 1px solid transparent !important;
      color: $color-primary;
    }
  }

  &.efly-button-icon {
    min-width: $height-default !important;
  }
}


$btn-size: (name: "small", font: $font-small, padding: $space-mini, height: $height-small),
(name: "xsmall", font: $font-xsmall, padding: $space-xsmall, height: $height-xsmall),
(name: "mini", font: $font-mini, padding: $space-8, height: $height-mini);
@for $i from 1 through length($btn-size) {
  $item: nth($btn-size, $i);
  $name: map-get($item, name);
  $font: map-get($item, font);
  // $padding: map-get($item, padding);
  $height: map-get($item, height);
  .btn-#{$name} {
    font-size: $font;
    // padding: $padding;
    height: $height;

    &.efly-button-icon {
      min-width: $height !important;
      padding: 0;
      box-sizing: border-box;
    }

    .icon {
      font-size: $font;
    }
  }
}


$btn-color: (name: "primary", color: $color-primary, bg: $color-medium-primary),
(name: "success", color: $color-success, bg:$color-medium-success),
(name: "warning", color: $color-warning, bg:$color-medium-warning),
(name: "danger", color: $color-danger, bg:$color-medium-danger),
(name: "info", color: $color-info, bg:$color-medium-info);

@for $i from 1 through length($btn-color) {
  $item: nth($btn-color, $i);
  $name: map-get($item, name);
  $color: map-get($item, color);
  $bg: map-get($item, bg);
  .btn-#{$name} {
    background: $color !important;
    border: 1px solid $color !important;
    color: $color-white !important;

    &:hover, &.hover, &:active, &.active {
      background: $color !important;
      border: 1px solid $color !important;
      color: $color-white !important;
      opacity: 0.9;
    }

    .icon{
      color:$color-white
    }
  }

  .btn-outline-#{$name} {
    background: white;
    border: 1px solid $color;
    color: $color !important;

    &:hover, &.hover, &:active, &.active {
      background: $color;
      border: 1px solid $color;
      color: $color-white !important;
    }
  }

  .btn-solid-#{$name} {
    background: $bg;
    border: 1px solid $color;
    color: $color !important;

    &:hover, &.hover, &:active, &.active {
      background: $color;
      border: 1px solid $color;
      color: $color-white !important;
    }
  }
}


.btn-outline-white {
  background: $color-white;
  border: 1px solid $color-white !important;
  color: $color-text-primary;

  &:hover, &.hover, &:active, &.active {
    background: $color-white;
    border: 1px solid $color-white;
    color: $color-primary;
  }
}


.efly-button-group {
  @include box();
  @include flex-wrap();

  .efly-button {
    min-width: 80px;
    margin-left: 0 !important;
    border-top: 1px solid $color-border-base;
    border-bottom: 1px solid $color-border-base;
    border-left: none;
    border-right: 1px solid $color-border-base;
    border-radius: 0;

    &:nth-child(n) {
      right: -1px;
    }

    &:hover, &.hover {
      background: $color-white;
      border: 1px solid $color-primary !important;
      color: $color-primary;
    }

    &:first-child,&.efly-button-group-line-header {
      border-left: 1px solid $color-border-base;
    }

    &.disabled, &:disabled {
      color: $color-text-secondary !important;
      background: $color-disabled !important;
      border: 1px solid $color-border-base !important;
      cursor: not-allowed;


      &:hover, &.hover, &:active, &.active {
        border: 1px solid $color-border-base !important;
        color: $color-text-secondary !important;
        background: $color-disabled !important;
      }
    }
  }
}