@mixin make-button {
    display: inline-block;
    font-family: $btn-font-family;
    font-weight: $btn-font-weight;
    color: $body-color;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: $btn-border-width solid transparent;
    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
    @include transition($btn-transition);
    cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
    white-space: nowrap;

    @include hover {
        color: $body-color;
        text-decoration: none;
    }

    // &:focus,
    // &.focus {
    //     outline: 0;
    //     box-shadow: $btn-focus-box-shadow;
    //   }

    // Disabled comes first so active can properly restyle
    &.disabled,
    &:disabled {
        opacity: $btn-disabled-opacity;
        @include box-shadow(none);
    }

    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active {
        @include box-shadow($btn-active-box-shadow);

        &:focus {
          @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
        }
    }
}


@mixin make-button-block {
    display: block;
    width: 100%;
}

@each $color, $value in $theme-colors {
    %make-button-#{$color} {
        @include button-variant($value, $value);

        &:not(:hover) {
            color: color-yiq($value);
            background-color: $value;
            border-color: $value;
        }

        &:not(label.btn),
        &:not([href]) {
            &,
            &:not([href]):not(:disabled):not(.disabled) {
                background-color: $value;
                border-color: $value;
            }
        }

        &:hover {
            color: color-yiq($value) !important;
            background-color: darken($value, 7.5%);
            border-color: darken($value, 7.5%);

        }

        &:focus {
            color: color-yiq($value) !important;
            background-color: darken($value, 7.5%);
            border-color: darken($value, 7.5%);
            box-shadow: 0 0 0 0.2rem rgba(57,57,60,.5);

        }
    }

    %make-button-outline-#{$color} {
        @include button-outline-variant($value);
    }
}

