@import "../definitions";

// remove theme colors we don't want to support as button class
$theme-colors: map-remove($theme-colors, "success", "info", "warning", "danger", "light", "dark");

@import "bootstrap/scss/buttons";

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value, lighten($value, 11%), $value);
    font-weight: $font-weight-normal;

    &:hover {
      box-shadow: none;
      color: $white;
      font-weight: $font-weight-normal;
    }
  }

  .btn-outline-#{$color} {
    background-color: $white;
    @include button-outline-variant($value, $value, $gray-100);
    font-weight: $font-weight-normal;

    &:hover {
      font-weight: $font-weight-normal;
    }
  }
}

.btn-block {
  box-sizing: border-box;
}

.btn-secondary {
  $color: theme-color("secondary");
  @include button-variant($color, $color, lighten($color, 3%), $color);
  text-shadow: 1px 1px 1px #999;
}

a.btn {
  text-decoration: none;
}

.btn {
  white-space: normal;

  &.disabled {
    border-color: $gray-500;

    &[class^="btn-outline-"], &[class*=" btn-outline-"] {
      background-color: $white;
      color: $btn-link-disabled-color;
    }

    &:not([class^="btn-outline-"]):not([class*=" btn-outline-"]) {
      background-color: $gray-500;
    }
  }

  i {
    margin-right: .6em;
  }
}