@import "../vendor/bootstrap/scss/buttons";

@mixin button-loading($color) {
  &[loading]::before { color: $color; }
}

button:focus { outline: none; }

.btn-img { width: $icon-size; }

.btn {
  display: inline-flex;
  align-items: center;

  &.btn-brand { @extend %text-md-regular; }

  &[loading] {
    color: transparent !important;
    cursor: default;
    pointer-events: none;
    position: relative;

    &::before {
      @extend .spinner-border;
      @extend .spinner-border-xs;

      content: "";
      color: $link-color;
      display: block;
      position: absolute;
      left: 50%;
      margin-left: $spinner-width-xs * 0.5 * -1;
    }

    & > .btn-img { display: none; }
  }
}

@each $color, $value in $button-theme-colors {
  .btn-#{$color} {
    @include button-loading($white);
  }

  .btn-outline-#{$color} {
    @include button-loading($value);
  }
}

.btn-icon {
  --#{$prefix}btn-padding-x: #{map-get($spacers, 2)};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
}

.btn-xs {
  --#{$prefix}btn-line-height: #{$btn-line-height-xs};

  @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $btn-font-size-xs, $btn-border-radius-sm);
}

.btn-link {
  --#{$prefix}btn-font-weight: #{$font-weight-bold};
  --#{$prefix}btn-hover-bg: #{rgba($black, 0.1)};
  --#{$prefix}btn-active-bg: transparent;

  &:hover,
  &:focus { text-decoration: none; }

  &-primary {
    --#{$prefix}btn-color: #{$primary};
    --#{$prefix}btn-hover-color: #{$primary};
    --#{$prefix}btn-active-color: #{$primary};
    --#{$prefix}btn-disabled-color: #{$primary};

    @extend .btn-link;
    @include button-loading($primary);
  }
}

.btn-success {
  --#{$prefix}btn-disabled-color: #{$white};
}

.d-grid > .btn { justify-content: center; }