@import "settings";
@import "display";
@import "typography";

/// Flag for if we should include buttons
/// @type Bool
$bonsai-include-badges: $bonsai-include-components !default;

/// Badge color
/// @type Color
$bonsai-badge-default-color: $bonsai-black !default;

/// Badge border styling
/// @type List
$bonsai-badge-border: 1px solid $bonsai-medium-gray !default;

/// Badge padding
/// @type List
$bonsai-badge-padding: 2px 4px !default;

/// Bonsai badge border mixin
@mixin badge-border {
  padding: $bonsai-badge-padding;
  border: $bonsai-badge-border;
  border-color: inherit;
}

/// Bonsai styling badge mixin
/// @param {String} $color [$bonsai-badge-default-color] - Style the badge with a defined color
@mixin bonsai-badge($color: $bonsai-badge-default-color) {
  @include upper;
  @include bold;
  @include small;

  color: $color;
  margin-right: $bonsai-spacing-extra-small;
}

/// Badges mixin
@mixin badges {
  @if $bonsai-include-badges {
    .badge {
      @include bonsai-badge;

      &.badge-border {
        @include badge-border;
      }
    }
  }
}