/// Creates a button class (.bg-*) base on a name and color
/// @param {String} $name name of the theme/color
/// @param {String} $color color use on the theme
/// @param {Number} $is-hover [0] 1 will create a hover class

@mixin create-button-for-theme($name, $theme-color) {
  $hover-color: darken($theme-color, 12%);
  $flat-hover-color:rgba($theme-color, 0.5);

  .btn-#{$name}{
    color: set-color($theme-color);
    background-color: $theme-color ;
    border-color:transparent;
    &:hover{
      background-color: darken($theme-color,10%);
    }
    &-flat{
      border-color:transparent;
      color: $theme-color;
      &:hover{
        background-color: rgba($theme-color, 0.12);
      }
    }
    &-outline{
      color: $theme-color;
      border-color: $theme-color;
      &:hover{
        color: set-color($theme-color);
        background-color: $theme-color ;
      }
    }
  }
  /*
  .btn-#{$name}-outline,.btn-#{$name}-flat{
    @extend .text-#{$name};
  }

  .btn-#{$name},.btn-#{$name}-outline:hover{
    @extend .bg-#{$name};
  }
  .btn-#{$name},.btn-#{$name}-outline{
    @extend .b-#{$name};
  }
  .btn-#{$name}:hover{
  background-color: $hover-color ;
  }
  .btn-#{$name}-flat{
    @extend .flat;
  }
  .btn-#{$name}-flat:hover{
    background-color:  $flat-hover-color;
    border-color: $flat-hover-color;
  }*/

}

@mixin create-button-for-color($name, $color){
  .btn-#{$name}{
    background: $color;
    color:set-color($color)
  }
  .btn-#{$name}-outline {
    color: $color;
    border-color: $color; 
    &:hover {
      background-color: $color;
      color:set-color($color);
    }
  }
  .btn-#{$name}-flat {
    color: $color;
    border-color: transparent;
    &:hover {
      background-color: rgba($color, 0.5);
      color: $color;
    }
  }

}