// mixins

@mixin box() {
    margin-bottom: 5px;
    padding: 0;
    border: none;
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-top: 0;
        margin-bottom: 12px;
    }
}

@mixin stripes($stripe-opacity) {
    background-image: linear-gradient(-45deg, rgba($white, $stripe-opacity) 25%, rgba($white, 0) 25%, rgba($white, 0) 50%, rgba($white, $stripe-opacity) 50%, rgba($white, $stripe-opacity) 75%, rgba($white, 0) 75%, rgba($white, 0));
    background-size: 100% 400%;
}

// taken from bootstrap with adaptations
@function important($important) {
    @if($important == true) {
        @return !important;
    } @else {
        @return true;
    }
}
@mixin button-variant($color, $background, $border, $important: false) {
    background-image: none important($important);
    margin-bottom: 0; // For input.btn
    padding: 6px 20px important($important);
    border-radius: $btn-border-radius-base important($important);
    color: $color important($important);
    font-size: $font-size-small important($important);
    line-height: $font-size-small;
    font-weight: normal;
    text-transform: none important($important);
    letter-spacing: normal important($important);
    background-color: $background important($important);
    border: 1px solid $border important($important);
    background-clip: padding-box;
    appearance: none;
    &:focus {
        color: $color important($important);
        background-color: $background important($important);
        border-color: $border important($important);
        filter: brightness(var(--focus-brightness))  important($important);
        text-decoration: none important($important);
    }
    &:hover {
        color: $color important($important);
        background-color: $background important($important);
        border-color: $border important($important);
        filter: brightness(var(--focus-brightness))  important($important);
        text-decoration: none important($important);
    }
    &:active {
        color: $color important($important);
        background-color: $background important($important);
        border-color: $border important($important);
        filter: brightness(var(--active-brightness))  important($important);
        box-shadow: $btn-active-shadow important($important);

        &:hover,
        &:focus {
            color: $color important($important);
            background-color: $background important($important);
            border-color: $border important($important);
            filter: brightness(calc(var(--focus-brightness) * var(--active-brightness)))  important($important);
        }
    }
    &:active {
        background-image: none important($important);
    }
    &[disabled] {
        &,
        &:hover,
        &:focus,
        &:active {
            background-color: $background important($important);
            opacity: 0.4;
            border-color: rgba($border, 0.4) important($important);
            color: rgba($color, 0.8) important(1);
            cursor: not-allowed;
            box-shadow: none important($important);
            &:before {
                opacity: 0.4 important(1);
            }
        }
    }
}