tabs {
  counter-reset: tab-counter;
}

/* Automatically increment tab numbers for each .tab-content inside a tab */
tab .tab-content::before {
  counter-increment: tab-counter;
  content: counter(tab-counter) "";

  position: absolute;
  top: 4px;
  right: 1px;
  padding: 0px 0px;
  border-radius: 10px;
  z-index: -100;

  opacity: 0.7;
  font-weight: var(
    --bold-text,
    normal
  ); /* Fallback to "Small" if --font-size is not defined */
  font-size: var(--font_size, 80%); /* Default font size (same as "Small") */
  color: var(--number_color, inherit); /* Fallback to default color */
}

/* Enable bold text when the preference is enabled */
@media (-moz-bool-pref: "uc.theme.bold-text-enable.enabled") {
  tab .tab-content {
    --bold-text: bold;
  }
}

/* Set Custom Color for Tab Numbers */
@media (-moz-bool-pref: "uc.theme.custom_color_enabled") {
  tab .tab-content {
    --number_color: var(--uc-theme-number_color) !important;
  }
}

/* Set font size for Extra Small (Override default) */
:root:has(#theme-Tab-Numbers[uc-theme-font_size="XSmall"]) {
  --font_size: 70% !important; /* Extra Small font size */
}

/* Set font size for Small */
:root:has(#theme-Tab-Numbers[uc-theme-font_size="Small"]) {
  --font_size: 80% !important; /* Small font size */
}

/* Set font size for Medium (Override default) */
:root:has(#theme-Tab-Numbers[uc-theme-font_size="Medium"]) {
  --font_size: 90% !important; /* Medium font size */
}

/* Set font size for Large (Override default) */
:root:has(#theme-Tab-Numbers[uc-theme-font_size="Large"]) {
  --font_size: 100% !important; /* Large font size */
}

/* Set font size for Extra Large (Override default) */
:root:has(#theme-Tab-Numbers[uc-theme-font_size="XLarge"]) {
  --font_size: 120% !important; /* Extra Large font size */
}