@import '@vtmn/css-design-tokens/src/base-colors';
@import '@vtmn/css-design-tokens/src/themes/default';
@import '@vtmn/css-design-tokens/src/typography';
@import '@vtmn/css-design-tokens/src/radius';

.vtmn-badge {
  font-family: var(--vtmn-typo_font-family);
  font-size: var(--vtmn-typo_text-3-font-size);
  font-weight: var(--vtmn-typo_font-weight--normal);
  line-height: 1;
  display: inline-flex;
  block-size: rem(20px);
  justify-content: center;
  align-items: center;
  border-radius: var(--vtmn-radius_700);
  background-color: var(--vtmn-semantic-color_background-tertiary);
  color: var(--vtmn-semantic-color_content-primary);
  box-shadow: inset 0 0 0 rem(1px) var(--vtmn-semantic-color_border-primary);
  padding-block: 0;
  padding-inline: rem(6px);
}

/* Variants */
.vtmn-badge_variant--default {
  background-color: var(--vtmn-semantic-color_background-tertiary);
  color: var(--vtmn-semantic-color_content-primary);
  box-shadow: inset 0 0 0 rem(1px) var(--vtmn-semantic-color_border-primary);
}

.vtmn-badge_variant--brand {
  background-color: var(--vtmn-semantic-color_background-brand-primary);
  color: var(--vtmn-semantic-color_content-primary-reversed);
  box-shadow: none;
}

.vtmn-badge_variant--reversed {
  background-color: var(
    --vtmn-semantic-color_background-brand-primary-reversed
  );
  color: var(--vtmn-semantic-color_content-primary);
  box-shadow: none;
}

.vtmn-badge_variant--accent {
  background-color: var(--vtmn-semantic-color_background-accent);
  color: var(--vtmn-semantic-color_content-accent);
  box-shadow: none;
}

.vtmn-badge_variant--alert {
  background-color: var(--vtmn-semantic-color_background-alert);
  color: var(--vtmn-semantic-color_content-primary-reversed);
  box-shadow: none;
}

/* Sizes */

.vtmn-badge:empty {
  min-inline-size: rem(8px);
  block-size: rem(8px);
  padding: 0;
}
