/* We don't use 2xl, 3xl, 4xl map keys because in some Intellij configurations, these keys are reformatted */
:host {
  /**
   * @prop --badge-padding : Default padding for the badge
   * @prop --badge-height : Default height for the badge
   */
  --badge-padding: 3px 4px 4px;
  --badge-height: 20px;
  display: flex;
  align-items: center;
  width: 1px;
  font-family: var(--joy-font-family-base);
  font-size: var(--joy-font-size-primary-200);
  line-height: var(--joy-line-height-small);
}

:host(.joy-badge-level) {
  width: auto;
}

svg {
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
svg + svg {
  margin-left: 6px;
}
svg.joy-badge-level__maltlinker {
  width: 16px;
}
svg.joy-badge-level__supermalter {
  width: 12px;
}
svg.joy-badge-level__highpotential {
  width: 12px;
}

.joy-badge-level__tag {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  border-radius: 2px;
  height: var(--badge-height);
  padding: var(--badge-padding);
  white-space: nowrap;
}
.joy-badge-level__tag.red {
  background-color: var(--joy-color-primary-10);
  color: var(--joy-color-primary-30);
}
.joy-badge-level__tag.turquoise {
  background-color: var(--joy-color-tertiary-30);
  color: white;
}
.joy-badge-level__tag.blue {
  background-color: var(--joy-color-information-10);
  color: var(--joy-color-brand-secondary-30);
}
* + .joy-badge-level__tag {
  margin-left: 6px;
}