@import "aloha_prefix";

$a_badge_font_size:                   .75em;
$a_badge_font_weight:                 700;
$a_badge_color:                       var(--#{$aloha-prefix}color_white);
$a_badge_padding_y:                   .35em;
$a_badge_padding_x:                   .65em;
$a_badge_border_radius:               var(--#{$aloha-prefix}border_radius);

.#{$aloha-prefix}badge {
  --#{$aloha-prefix}badge-padding-x: #{$a_badge_padding_x};
  --#{$aloha-prefix}badge-padding-y: #{$a_badge_padding_y};
  --#{$aloha-prefix}badge-font-size: #{$a_badge_font_size};
  --#{$aloha-prefix}badge-font-weight: #{$a_badge_font_weight};
  --#{$aloha-prefix}badge-color: #{$a_badge_color};
  --#{$aloha-prefix}badge-border-radius: #{$a_badge_border_radius};

  display: inline-block;
  padding: var(--#{$aloha-prefix}badge-padding-y) var(--#{$aloha-prefix}badge-padding-x);
  font-size: var(--#{$aloha-prefix}badge-font-size);
  font-weight: var(--#{$aloha-prefix}badge-font-weight);
  line-height: 1;
  color: var(--#{$aloha-prefix}badge-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--#{$aloha-prefix}badge-border-radius);
}

.#{$aloha-prefix}pill_rounded {
  border-radius: var(--#{$aloha-prefix}border_radius_pill) !important;
}