@st-namespace 'CounterBadge-st-css';
@st-import [ --wix-color-1, --wix-color-8 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ --wst-primary-background-color-rgb, --wst-links-and-actions-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
@st-import [ createColor ] from '../../common/formatters.st';
@st-import [ fontFamily ] from '../../common/fonts.st.css';

/*
 * Background color
 * @type color
 * @default [primaryBgColor]: --wix-color-8, [secondaryBgColor]: --wix-color-8 with opacity 0.1
 */
@property st-global(--wix-ui-tpa-counter-badge-counter-badge-bg-color);

/*
 * Text color
 * @type color
 * @default [primaryTextColor]: --wix-color-1, [secondaryTextColor]: --wix-color-8
 */
@property st-global(--wix-ui-tpa-counter-badge-counter-badge-text-color);

.root {
  font-family: value(fontFamily);
  display: inline-flex;
  line-height: 20px;
  font-size: 12px;
  border-radius: 10px;
  min-width: 20px;
  justify-content: center;
}

.innerContainer {
  -st-states: maximumNumber;
  align-items: center;
  padding: 0 6px;
}

.innerContainer:maximumNumber {
  padding: 0 8px 0 6px;
}

.priority-primary {
  background-color: createColor(--wix-ui-tpa-counter-badge-counter-badge-bg-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
  color: createColor(--wix-ui-tpa-counter-badge-counter-badge-text-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
}

.priority-secondary {
  background-color: rgb(var(--wix-ui-tpa-counter-badge-counter-badge-bg-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)), 0.1));
  color: createColor(--wix-ui-tpa-counter-badge-counter-badge-text-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
}

/* st-namespace-reference="../../../../src/components/CounterBadge/CounterBadge.st.css" */