@st-namespace 'Badge-st-css';
@st-import [ --wix-color-1, --wix-color-5, --wix-color-8 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, createFont, createFontWithOverrides ] from '../../common/formatters.st';
@st-import BadgeBase, [ innerContainer, icon ] from './Badge.base.st.css';
@st-import [ --wst-paragraph-2-color-rgb, --wst-primary-background-color-rgb, --wst-links-and-actions-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

/*
 * Background color
 * @type color
 * @default --wix-color-1 with opacity 0.1
 */
@property st-global(--wix-ui-tpa-badge-badge-bg-color);

/*
 * Text color
 * @type color
 * @default --wix-color-5 for default and light, --wix-color-1 for primary, --wix-color-8 for secondary
 */
@property st-global(--wix-ui-tpa-badge-badge-text-color);

/*
 * Icon color
 * @type color
 * @default priority default and light: --wix-color-5, priority primary: --wix-color-1
 */
@property st-global(--wix-ui-tpa-badge-icon-color);

/*
 * Text font
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '12px', line-height: 20px}
 */
@property st-global(--wix-ui-tpa-badge-text-font);

/*
 * Border color
 * @type color
 * @default priority default and light: --wix-color-5, priority primary: --wix-color-8
 */
@property st-global(--wix-ui-tpa-badge-border-color);

/*
 * Border radius start start
 * @type size
 * @default 12px
 */
@property st-global(--wix-ui-tpa-badge-border-radius-start-start);

/*
 * Border radius start end
 * @type size
 * @default 12px
 */
@property st-global(--wix-ui-tpa-badge-border-radius-start-end);

/*
 * Border radius end start
 * @type size
 * @default 12px
 */
@property st-global(--wix-ui-tpa-badge-border-radius-end-start);

/*
 * Border radius end end
 * @type size
 * @default 12px
 */
@property st-global(--wix-ui-tpa-badge-border-radius-end-end);

/*
 * Border width
 * @type size
 * @default priority default and primary: 0px, priority light: 1px
 */
@property st-global(--wix-ui-tpa-badge-border-width);

/*
 * Space between icon and text
 * @type size
 * @default 2px
 */
@property st-global(--wix-ui-tpa-badge-space-between);

/*
 * Padding start
 * @type size
 * @default priority default and primary: 12px, priority light: 11px
 */
@property st-global(--wix-ui-tpa-badge-padding-start);

/*
 * Padding end
 * @type size
 * @default priority default and primary: 12px, priority light: 11px
 */
@property st-global(--wix-ui-tpa-badge-padding-end);

/*
 * Padding top
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-badge-padding-top);

/*
 * Padding bottom
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-badge-padding-bottom);

/*
 * Icon size
 * @type size
 * @default 16px
 */
@property st-global(--wix-ui-tpa-badge-icon-size);

.root {
  -st-extends: BadgeBase;
}

.root .innerContainer {
  column-gap: var(--wix-ui-tpa-badge-space-between, 2px);
}

.root {
  --text-color: var(--wst-paragraph-2-color-rgb, var(--wix-color-5));
  --background-color: var(--wst-primary-background-color-rgb, var(--wix-color-1));
  --action-color: var(--wst-links-and-actions-color-rgb, var(--wix-color-8));
  
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "12px", "line-height": "20px" }'),
  createFont((--wix-ui-tpa-badge-text-font, --wst-paragraph-2-overriden-font), null);
  background-color: createColor(--wix-ui-tpa-badge-badge-bg-color, (var(--text-color), 0.06));
  color: createColor(--wix-ui-tpa-badge-badge-text-color, var(--text-color));
  border-start-start-radius: var(--wix-ui-tpa-badge-border-radius-start-start, 12px);
  border-start-end-radius: var(--wix-ui-tpa-badge-border-radius-start-end, 12px);
  border-end-start-radius: var(--wix-ui-tpa-badge-border-radius-end-start, 12px);
  border-end-end-radius: var(--wix-ui-tpa-badge-border-radius-end-end, 12px);
  border-color: createColor(--wix-ui-tpa-badge-border-color, (var(--text-color), 0));
  box-sizing: border-box;
  border-width: var(--wix-ui-tpa-badge-border-width, 0px);
  border-style: solid;
  padding-inline-start: var(--wix-ui-tpa-badge-padding-start, 12px);
  padding-inline-end: var(--wix-ui-tpa-badge-padding-end, 12px);
  padding-top: var(--wix-ui-tpa-badge-padding-top, 0px);
  padding-bottom: var(--wix-ui-tpa-badge-padding-bottom, 0px);
}

.root:withIcon {
  padding-inline-start: var(--wix-ui-tpa-badge-padding-start, 10px);
}

.priority-light {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "12px", "line-height": "18px" }'),
  createFont((--wix-ui-tpa-badge-text-font, --wst-paragraph-2-overriden-font), null);
  background-color: createColor(--wix-ui-tpa-badge-badge-bg-color, var(--background-color));
  color: createColor(--wix-ui-tpa-badge-badge-text-color, var(--text-color));
  border-color: createColor(--wix-ui-tpa-badge-border-color, (var(--text-color), 0.45));
  border-width: var(--wix-ui-tpa-badge-border-width, 1px);
  padding-inline-start: var(--wix-ui-tpa-badge-padding-start, 11px);
  padding-inline-end: var(--wix-ui-tpa-badge-padding-end, 11px);
}

.priority-primary {
  background-color: createColor(--wix-ui-tpa-badge-badge-bg-color, var(--action-color));
  color: createColor(--wix-ui-tpa-badge-badge-text-color, var(--background-color));
  border-color: createColor(--wix-ui-tpa-badge-border-color, (var(--action-color), 0));
  border-width: var(--wix-ui-tpa-badge-border-width, 0px);
}

.priority-secondary {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "12px", "line-height": "18px" }'),
  createFont((--wix-ui-tpa-badge-text-font, --wst-paragraph-2-overriden-font), null);
  background-color: createColor(--wix-ui-tpa-badge-badge-bg-color, (var(--background-color), 0));
  color: createColor(--wix-ui-tpa-badge-badge-text-color, var(--action-color));
  border-color: createColor(--wix-ui-tpa-badge-border-color, (var(--action-color), 1));
  border-width: var(--wix-ui-tpa-badge-border-width, 1px);
  padding-inline-start: var(--wix-ui-tpa-badge-padding-start, 11px);
  padding-inline-end: var(--wix-ui-tpa-badge-padding-end, 11px);
}

/* Icons */

.root .icon svg {
  width: var(--wix-ui-tpa-badge-icon-size, 16px);
  height: var(--wix-ui-tpa-badge-icon-size, 16px);
}

.root .icon svg[fill="currentColor"] {
  fill: createColor((--wix-ui-tpa-badge-icon-color, --wix-ui-tpa-badge-badge-text-color), var(--text-color));
}

.priority-light .icon svg[fill="currentColor"] {
  fill: createColor((--wix-ui-tpa-badge-icon-color, --wix-ui-tpa-badge-badge-text-color), var(--text-color));
}

.priority-primary .icon svg[fill="currentColor"] {
  fill: createColor((--wix-ui-tpa-badge-icon-color, --wix-ui-tpa-badge-badge-text-color), var(--background-color));
}

.priority-secondary .icon svg[fill="currentColor"] {
  fill: createColor((--wix-ui-tpa-badge-icon-color, --wix-ui-tpa-badge-badge-text-color), var(--action-color));
}

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