/* @docs */
$button-background-color: $primary !default;
$button-color: $primary-invert !default;
$button-border-radius: $base-border-radius !default;
$button-border: 1px solid $button-background-color !default;
$button-box-shadow: none !default;
$button-font-weight: 400 !default;
$button-line-height: $base-line-height !default;
$button-margin-icon-to-text: .1875em !default;
$button-margin: 0 !default;
$button-height: $control-height !default;
$button-padding: $control-padding-vertical .75em !default;
$button-rounded-border-radius: $base-rounded-border-radius !default;
$button-disabled-opacity: $base-disabled-opacity !default;
$button-outlined-background-color: transparent !default;
/* @docs */


@keyframes spinAround {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.o-btn {
    -moz-appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: inline-flex;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    text-decoration: none;
    @include unselectable;
    @include avariable('background-color', 'button-background-color', $button-background-color);
    @include avariable('color', 'button-color', $button-color);
    @include avariable('padding', 'button-padding', $button-padding);
    @include avariable('border', 'button-border', $button-border);
    @include avariable('border-radius', 'button-border-radius', $button-border-radius);
    @include avariable('box-shadow', 'button-box-shadow', $button-box-shadow);
    @include avariable('font-size', 'base-font-size', $base-font-size);
    @include avariable('font-weight', 'button-font-weight', $button-font-weight);
    @include avariable('line-height', 'button-line-height', $button-line-height);
    @include avariable('margin', 'button-margin', $button-margin);
    @include avariable('height', 'button-height', $button-height);
    &__wrapper {
        @include side-flex-gap($button-margin-icon-to-text);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100%;
    }
    &__label {
        width: 100%;
    }
    &--expanded {
        width: 100%;
    }
    &--rounded {
        @include avariable('border-radius', 'button-rounded-border-radius', $button-rounded-border-radius);
    }
    &--disabled {
        @include avariable('opacity', 'button-disabled-opacity', $button-disabled-opacity);
        cursor: not-allowed;
        pointer-events: none;
    }
    @each $name, $value in $sizes {
        &--#{$name} {
            @include avariable('font-size', ('button-font-size-' + #{$name}), $value);
        }
    }
    @each $name, $pair in $colors {
        $color: nth($pair, 1);
        $color-invert: nth($pair, 2);
        &--#{$name} {
            border-color: transparent;
            @include avariable('background-color', ('variant-' + #{$name}), $color);
            @include avariable('color', ('variant-invert-' + #{$name}), $color-invert);
            &:hover {
                // background-color: darken($color, 2.5%)
                // IE 11 needs polyfill
                filter: brightness(97.5%);
            }
        }
    }
    &--outlined {
        @include avariable('background-color', 'button-outlined-background-color', $button-outlined-background-color);
        @include avariable('border-color', 'button-background-color', $button-background-color);
        @include avariable('color', 'button-background-color', $button-background-color);
        &:hover {
            border-color: transparent;
            @include avariable('background-color', 'button-background-color', $button-background-color);
            @include avariable('color', 'button-color', $button-color);
        }
        @each $name, $pair in $colors {
            $color: nth($pair, 1);
            $color-invert: nth($pair, 2);
            &-#{$name} {
                @include avariable('background-color', 'button-outlined-background-color', $button-outlined-background-color);
                @include avariable('border-color', ('variant-' + #{$name}), $color);
                @include avariable('color', ('variant-' + #{$name}), $color);
                &:hover {
                    border-color: transparent;
                    @include avariable('background-color', ('variant-' + #{$name}), $color);
                    @include avariable('color', ('variant-invert-' + #{$name}), $color-invert);
                }
            }
        }
    }
    &--loading{
        color: transparent!important;
        pointer-events: none;
    }
    &--loading::after{
        -webkit-animation: spinAround 500ms infinite linear;
        left: calc(50% - 0.5em);
        top: calc(50% - 0.5em);
        position: absolute!important;
        border: 2px solid #dbdbdb;
        border-radius: 9999px;
        border-right-color: transparent;
        border-top-color: transparent;
        content: "";
        display: block;
        height: 1em;
        width: 1em;
    }
    &--inverted {
        @include avariable('background-color', 'button-color', $button-color);
        @include avariable('border-color', 'button-color', $button-color);
        @include avariable('color', 'button-background-color', $button-background-color);
        &:hover {
            // background-color: darken($color-invert, 5%)
            // IE 11 needs polyfill
            filter: brightness(95%);
        }
        @each $name, $pair in $colors {
            $color: nth($pair, 1);
            $color-invert: nth($pair, 2);
            &-#{$name} {
                @include avariable('background-color', ('variant-invert-' + #{$name}), $color-invert);
                @include avariable('border-color', ('variant-invert-' + #{$name}), $color-invert);
                @include avariable('color', ('variant-' + #{$name}), $color);
                &:hover {
                    // background-color: darken($color-invert, 5%)
                    // IE 11 needs polyfill
                    filter: brightness(95%);
                }
            }
        }
    }
}