@mixin button-flat($color, $hover-color: darken($color,5%), $active-color: lighten($color,5%)) {
    color: color-yiq($color);
    background-color: $color;
    //border-color: $color;
    box-shadow: $btn-flat-shadow;
    min-width: 86px;

    &:not(:disabled):not(.disabled):hover {
      color: color-yiq($hover-color);
      background-color: $hover-color;
      //border-color: $hover-color;
      box-shadow: $btn-flat-hover-shadow;
    }

    &:focus,
    &.focus {
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5), $btn-flat-hover-shadow;
    }

    // Disabled comes first so active can properly restyle
    &.disabled,
    &:disabled {
        color: $btn-flat-disabled-color;
        background: $btn-flat-disabled-background;
        //border-color: $btn-flat-disabled-background;
    }

    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active,
    .show > &.dropdown-toggle {
        color: color-yiq($active-color);
        background-color: $active-color;
        //border-color: $active-color;

        &:focus {
            box-shadow: none;
        }
    }
}

@mixin button-outline($color, $hover-color: darken($color,5%), $active-color: lighten($color,5%)) {
    color: $color;
    background-color: $btn-outline-background;
    border-color: $color;
    min-width: 86px;

    &:not(:disabled):not(.disabled):hover {
        color: $hover-color;
        background-color: $btn-outline-background;
        border-color: currentColor;
        box-shadow: $btn-outline-hover-shadow;
    }

    &:focus,
    &.focus {
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5), $btn-outline-hover-shadow;
    }

    &.disabled,
    &:disabled {
        color: $btn-outline-disabled-color;
        background-color: $btn-outline-disabled-background;
        border-color: $btn-outline-disabled-boder;
    }
  
    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active,
    .show > &.dropdown-toggle {
        color:$active-color;
        background-color: $btn-outline-background;
        border-color: currentColor;
    
        &:focus {
            box-shadow: none;
        }
    }
}

@mixin button-clear($color, $hover-color: darken($color,5%), $active-color: lighten($color,5%)) {
    color: $color;
    padding: $btn-clear-padding;

    &:not(:disabled):not(.disabled):hover {
      color: $hover-color;
    }

    &:focus,
    &.focus {
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
    }

    // Disabled comes first so active can properly restyle
    &.disabled,
    &:disabled {
        color: $btn-clear-disabled-color;
    }

    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active,
    .show > &.dropdown-toggle {
        color: $active-color;

        &:focus {
            box-shadow: none;
        }
    }
}

@mixin button-variant($variant, $color) {
    @if $variant == 'flat' {
        @include button-flat($color);
    } @if $variant == 'outline' {
        @include button-outline($color);
    }
}