.host {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 5px;
  color: var(--vkui_internal--counter_foreground);
  text-align: center;
  background: var(--vkui_internal--counter_background);

  --vkui_internal--counter_background: transparent;
  --vkui_internal--counter_foreground: var(--vkui--color_text_contrast);
}

/* -------- Mode Primary --------- */

.modePrimary {
  --vkui_internal--counter_foreground: var(--vkui--color_text_contrast);
}

.modePrimary.appearanceAccent {
  --vkui_internal--counter_background: var(--vkui--color_background_accent_themed);
  --vkui_internal--counter_foreground: var(--vkui--color_text_contrast_themed);
}

.modePrimary.appearanceNeutral {
  --vkui_internal--counter_background: var(--vkui--color_icon_secondary);
}

.modePrimary.appearanceAccentGreen {
  --vkui_internal--counter_background: var(--vkui--color_accent_green);
}

.modePrimary.appearanceAccentRed {
  --vkui_internal--counter_background: var(--vkui--color_accent_red);
}

.modePrimary.appearanceCustom {
  --vkui_internal--counter_background: transparent;
}

/* -------- Mode Contrast --------- */

.modeContrast {
  --vkui_internal--counter_background: var(--vkui--color_background_contrast);
}

.modeContrast.appearanceAccent {
  --vkui_internal--counter_foreground: var(--vkui--color_text_accent);
}

.modeContrast.appearanceNeutral {
  --vkui_internal--counter_foreground: var(--vkui--color_text_tertiary);
}

.modeContrast.appearanceAccentGreen {
  --vkui_internal--counter_foreground: var(--vkui--color_accent_green);
}

.modeContrast.appearanceAccentRed {
  --vkui_internal--counter_foreground: var(--vkui--color_accent_red);
}

.modeContrast.appearanceCustom {
  --vkui_internal--counter_foreground: var(--vkui--color_text_primary_invariably);
}

/* -------- Mode Tertiary --------- */

.modeTertiary {
  --vkui_internal--counter_background: transparent;
}

.modeTertiary.appearanceAccent {
  --vkui_internal--counter_foreground: var(--vkui--color_text_accent);
}

.modeTertiary.appearanceNeutral {
  --vkui_internal--counter_foreground: var(--vkui--color_text_subhead);
}

.modeTertiary.appearanceAccentGreen {
  --vkui_internal--counter_foreground: var(--vkui--color_accent_green);
}

.modeTertiary.appearanceAccentRed {
  --vkui_internal--counter_foreground: var(--vkui--color_accent_red);
}

.modeTertiary.appearanceCustom {
  --vkui_internal--counter_foreground: var(--vkui--color_text_contrast);
}

/*----------------------------------*/

.sizeM {
  min-inline-size: 24px;
  block-size: 24px;
  border-radius: 12px;
}

.sizeS {
  min-inline-size: 18px;
  block-size: 18px;
  border-radius: 9px;
}

.modeInherit {
  --vkui_internal--counter_background: var(
    --vkui_internal--counter_inherit_background,
    var(--vkui--color_icon_secondary)
  );
  --vkui_internal--counter_foreground: var(
    --vkui_internal--counter_inherit_color,
    var(--vkui--color_text_contrast_themed)
  );
}

/**
 * CMP:
 * TabbarItem
 */

/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

:global(.vkuiInternalTabbarItem__label) .host {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-end: -9px;
}