/*
  sizes: .a-badge--lg, .a-badge--sm (dot only, no text) - md default
*/

.a-badge {
  --bg: var(--lens-semantic-color-status-new-default);
  --color: var(--lens-semantic-color-status-new-text-default);
  --border-color: var(--lens-semantic-color-surface-default);
  --border-width: var(--lens-semantic-border-width-thin);
  --radius: var(--lens-semantic-radius-full);
  --height: var(--lens-core-spacing-2);
  --width: unset;
  --px: var(--lens-semantic-spacing-desktop-padding-0-5);
  --font-size: var(--lens-semantic-font-label-sm-font-size);
  --line-height: var(--lens-semantic-font-label-sm-line-height);
  --letter-spacing: var(--lens-semantic-font-label-sm-letter-spacing);
  --font-weight: var(--lens-semantic-font-weight-emphasis);
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  height: var(--a-badge-height, var(--height));
  width: var(--a-badge-width, var(--width));
  padding-inline: var(--a-badge-padding-x, var(--px));
  background: var(--a-badge-bg, var(--bg));
  color: var(--a-badge-color, var(--color));
  box-shadow: 0 0 0 var(--a-badge-border-width, var(--border-width))
    var(--a-badge-border-color, var(--border-color));
  border-radius: var(--a-badge-radius, var(--radius));
  font-size: var(--a-badge-label-font-size, var(--font-size));
  line-height: var(--a-badge-label-line-height, var(--line-height));
  letter-spacing: var(--a-badge-label-letter-spacing, var(--letter-spacing));
  font-weight: var(--a-badge-label-font-weight, var(--font-weight));
  user-select: none;
  -webkit-user-select: none;
  &.a-badge--lg {
    --height: var(--lens-core-spacing-3);
    --px: var(--lens-semantic-spacing-desktop-padding-1);
    --font-size: var(--lens-semantic-font-label-xl-font-size);
    --line-height: var(--lens-semantic-font-label-xl-line-height);
    --letter-spacing: var(--lens-semantic-font-label-xl-letter-spacing);
  }
  &.a-badge--sm {
    --height: var(--lens-core-spacing-1);
    --width: var(--lens-core-spacing-1);
    --px: 0;
  }
}