@import "../../../theme/global";

$badge-padding-top:              var(--lar-badge-padding-top, .15rem) !default;
$badge-padding-right:            var(--lar-badge-padding-right, .25rem) !default;
$badge-padding-bottom:           var(--lar-badge-padding-bottom, .15rem) !default;
$badge-padding-left:             var(--lar-badge-padding-left, .25rem) !default;
$badge-border-radius:            var(--lar-badge-border-radius, .2rem) !default;


:host {
  @include border-radius($badge-border-radius);
  @include font-smoothing();
  @include padding($badge-padding-top, $badge-padding-right, $badge-padding-bottom, $badge-padding-left);
  display: inline-block;
  line-height: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  contain: content;
  vertical-align: bottom;
}

:host(:empty) {
  display: none !important;
}


@mixin generate-badge-color($color-name) {
  background: lar-color($color-name, base) !important;
  color: lar-color($color-name, contrast) !important;
}
@each $color-name, $value in $colors {
  :host(.lar-color-#{$color-name}) {
    @include generate-badge-color($color-name);
  }
}