@mixin button-color($color, $background-color, $hover-color: darken($background-color, 10%)) {

    &:not(.button-ghost) {

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

        &:hover {
            color: $color;
            background-color: $hover-color;
        }
    }

    /* .button-ghost& {
        border: 2px solid $background-color;
        color: $background-color;
    } */
}

@mixin button-variant($color, $background, $hover: darken($background, 10%)) {

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

    &:hover,
    &:active {
        color: $color;
        background-color: $hover;
    }
}

@mixin button-outline-variant($color, $background) {

    box-shadow: inset 0 0 0 2px $background;
    color: $background;

    &:hover,
    &:active {
        color: $color;
        background-color: $background;
    }
}

@mixin button-circle($width) {
    display: block;
    text-align:     center;
    width:          $width;
    height:         $width;
    line-height:    $width;
    border-radius:  50%;
}

// Rectangular button.
@mixin rect-button($color, $hover-color: darken($color, 20%)) {
    border-radius: 0;
    border: 2px solid $color;
    color: $color;
    &:hover {
        color: $hover-color;
        border-color: $hover-color;
    }
}