$brand-primary: #7266ba;
$brand-info: #23b7e5;
$brand-success: #27c24c;
$brand-warning: #fad733;
$brand-danger: #f05050;
$brand-light: #edf1f2;
$brand-dark: #3a3f51;
$brand-black: #1c2b36;
$brand-secondary: white;

$btn-border-radius: 2px;
$border-radius-base: 2px;
$btn-text-color: #58666e;
$btn-default-bg: lighten($brand-light, 5%);
$border-color: darken($brand-light, 5%);
$btn-default-border: $border-color;
$btn-active-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);

@mixin button-variant($color, $background, $border, $isDarken) {
    $active-background: lighten($background, 8%);
    $active-border: lighten($border, 9%);
    @if $isDarken {
        $active-background: darken($background, 5%);
        $active-border: darken($border, 6%);
    }

    // material design
    .taint {
        display: block;
        position: absolute;
        @if $isDarken {
            background: rgba(0, 0, 0, 0.1);
        } @else {
            background: rgba(255, 255, 255, 0.45);
        }
        border-radius: 100%;
        transform: scale(0);
        &.drop {
            animation: fit-button-ripple 0.65s linear;
        }
    }

    color: $color;
    background-color: $background;
    border-color: $border;

    &:hover:not(.active) {
        color: $color;
        background-color: $active-background;
        border-color: $active-border;
    }

    &:focus:not(.active),
    &.focus:not(.active) {
        color: $color;
        background-color: $active-background;
        border-color: $active-border;
    }

    &:active,
    &.active {
        color: $color;
        border-color: $active-border;
        // Remove the gradient for the pressed/active state
        background-image: none;
        box-shadow: $btn-active-box-shadow;
    }

    &.disabled,
    &:disabled {
        &:focus,
        &.focus {
            background-color: $background;
            border-color: $border;
        }
        &:hover {
            background-color: $background;
            border-color: $border;
        }
    }
}