// #############################################################################
// OTHER

// add clearfix which doesnt add overflow:hidden
@mixin clearfix() {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}
// 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: darken($background, 5%) important($important);
        border-color: darken($border, 5%) important($important);
        text-decoration: none important($important);
    }
    &:hover {
        color: $color important($important);
        background-color: darken($background, 5%) important($important);
        border-color: darken($border, 5%) important($important);
        text-decoration: none important($important);
    }
    &:active {
        color: $color important($important);
        background-color: darken($background, 10%) important($important);
        border-color: darken($border, 10%) important($important);
        box-shadow: $btn-active-shadow important($important);

        &:hover,
        &:focus {
            color: $color important($important);
            background-color: darken($background, 17%) important($important);
            border-color: darken($border, 25%) important($important);
        }
    }
    &:active {
        background-image: none important($important);
    }
    &[disabled] {
        &,
        &:hover,
        &:focus,
        &:active {
            background-color: rgba($background, 0.4) important($important);
            border-color: rgba($border, 0.4) important($important);
            color: rgba($color, 0.8) important(1);
            cursor: not-allowed;
            box-shadow: none important($important);
            &:before {
                color: rgba($color, 0.4) important(1);
            }
        }
    }
}*/

@mixin button-variant($color, $background, $border, $important: false) {
    background-image: none important($important);
    margin-bottom: 0; // For input.btn
    border-radius: $btn-border-radius-base important($important);
    color: $color important($important);
    background-color: $background important($important);
    border: 1px solid $border important($important);
    background-clip: padding-box;
    -webkit-appearance: none;
    &:focus,
    &.focus,
    &:hover {
        color: $color important($important);
        @if $background == $btn-default-bgcolor {
            background-color: $gray-lightest important($important);
            border-color: $border important($important);
        } @else {
            background-color: $background important($important);
            border-color: $border important($important);
            filter: invert(0.05) important($important);
        }
        text-decoration: none important($important);
    }
    &:active,
    &.cms-btn-active {
        color: $color important($important);
        background-color: $background important($important);
        border-color: $border important($important);
        filter: brightness(var(--active-brightness)) opacity(1) important($important);
        // Strange: removing opacity(1.) or correcting it makes item transparent
        box-shadow: $btn-active-shadow important($important);

        &:hover,
        &:focus,
        &.focus {
            color: $color important($important);
            background-color: $background important($important);
            border-color: $border important($important);
            filter: brightness(calc(var(--focus-brightness) * var(--active-brightness))) opacity(1) important($important);
        }  // Strange: removing opacity(1.) or correcting it makes item transparent
    }
    &:active,
    &.cms-btn-active {
        background-image: none important($important);
    }
    &.cms-btn-disabled,
    &[disabled] {
        &,
        &:hover,
        &:focus,
        &.focus,
        &:active,
        &.cms-btn-active { // TODO: FABR
            background-color: $background important($important);
            border-color: $border important($important);
            @if $color == $gray {
                color: $gray-lighter important(1);
            } @else {
                color: $color important(1);
                filter: brightness(0.6) opacity(1);  // Strange: removing opacity(1.) or correcting it makes item transparent
            }
            cursor: not-allowed;
            box-shadow: none important($important);
            &:before {
                @if $color == $gray {
                    color: $gray-lighter important(1);
                } @else {
                    color: $color important(1);
                    filter: brightness(0.6) opacity(1); // Strange: removing opacity(1.) or correcting it makes item transparent
                }
            }
        }
    }
}
