@st-namespace 'Tag-st-css';
@st-import [ --wix-color-1, --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createFont, createColor, setColor, setFont, createFontWithOverrides ] from '../../common/formatters.st';
@st-import [ --wst-paragraph-2-color-rgb, --wst-primary-background-color-rgb] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
/*
 * Background color
 * @type color
 * @default --wix-color-5, --wix-color-1
 */
@property st-global(--wix-ui-tpa-tag-background-color);

/*
 * Background opacity
 * @type size
 * @default 0.1, 1
 */
@property st-global(--wix-ui-tpa-tag-background-opacity);

/*
 * Background hover opacity
 * @type size
 * @default 0.12
 */
@property st-global(--wix-ui-tpa-tag-background-hover-opacity);

/*
 * Background hover color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-tag-background-hover-color);

/*
 * Text hover color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-tag-text-hover-color);

/*
 * Border color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-tag-border-color);

/*
 * Border opacity
 * @type size
 * @default 0.3
 */
@property st-global(--wix-ui-tpa-tag-border-opacity);

/*
 * Main text color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-tag-text-color);

/*
 * Border radius
 * @type size
 * @default 0
 */
@property st-global(--wix-ui-tpa-tag-border-radius);

/*
 * Border width
 * @type size
 * @default 1
 */
@property st-global(--wix-ui-tpa-tag-border-width);

/*
 * Main text font
 * @type font
 * @default [small] preset: 'Body-M' | overrides: { size: '12px', lineHeight: '16px'}, [medium] preset: 'Body-M' | overrides: { size: '14px', lineHeight: '20px'}, [large] preset: 'Body-M' | overrides: { size: '16px', lineHeight: '24px'}
 */
@property st-global(--wix-ui-tpa-tag-text-font);

.root {
  display: inline-flex;
  align-items: center;
  background-color: #fff;
  width: fit-content;
  position: relative;
  box-sizing: border-box;
  border-style: solid;
  padding: 0;
  border-radius: var(--wix-ui-tpa-tag-border-radius, 0);
}

.root::before,
.root::after {
  content: '';
  width: 12px;
  display: inline-block;
}

.root.withIcon::after {
  width: 4px;
}

.small {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "16px", "size": "12px" }'),
  createFont((--wix-ui-tpa-tag-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
  height: calc((16 / 12) * 1em + 8px);
}

.medium {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "20px", "size": "14px" }'),
  createFont((--wix-ui-tpa-tag-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
  height: calc((20 / 14) * 1em + 12px);
}

.large {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "24px", "size": "16px" }'),
  createFont((--wix-ui-tpa-tag-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
  height: calc((24 / 16) * 1em + 12px);
}

.opaque {
  position: absolute;
  background: createColor(--wix-ui-tpa-tag-background-hover-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: opacity 300ms;
}
.root.clickable:focus .opaque,
.root.clickable:hover .opaque{
  opacity: var(--wix-ui-tpa-tag-background-hover-opacity, 0.12);
}

.root.clickable {
  cursor: pointer;
}

.root.solid:focus .label,
.root.solid:hover .label {
  color: createColor(--wix-ui-tpa-tag-text-hover-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

.label {
  position: relative;
}

.root .removeIcon {
  color: createColor(--wix-ui-tpa-tag-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

.root.small .label {
  -st-mixin: 
  setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-tag-text-font, 'Body-M', '{ "line-height": "16px", "size": "12px", "family": "var(--wst-paragraph-2-font-family, var(--wix-font-Body-M-family))" }');
  color: createColor(--wix-ui-tpa-tag-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

.root.medium .label {
  -st-mixin: setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-tag-text-font, 'Body-M', '{ "line-height": "20px", "size": "14px", "family": "var(--wst-paragraph-2-font-family, var(--wix-font-Body-M-family))" }');
  color: createColor(--wix-ui-tpa-tag-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

.root.large .label {
  -st-mixin: setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-tag-text-font, 'Body-M', '{ "line-height": "24px", "size": "16px", "family": "var(--wst-paragraph-2-font-family, var(--wix-font-Body-M-family))" }');
  color: createColor(--wix-ui-tpa-tag-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

.root.solid {
  background-color: createColor(--wix-ui-tpa-tag-background-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), var(--wix-ui-tpa-tag-background-opacity, 0.1));
  border-width: var(--wix-ui-tpa-tag-border-width, 0px);
  border-color: createColor(--wix-ui-tpa-tag-border-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

.root.light {
  background-color: createColor(--wix-ui-tpa-tag-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)), var(--wix-ui-tpa-tag-background-opacity, 1));
  border-width: var(--wix-ui-tpa-tag-border-width, 1px);
  border-color: createColor(--wix-ui-tpa-tag-border-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), var(--wix-ui-tpa-tag-border-opacity, 0.3));
}

.root,
.opaque {
  border-radius: var(--wix-ui-tpa-tag-border-radius, 0);
}

.iconWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  font: inherit;
  width: calc(1.5em + 4px);
  min-width: 28px;
}

.iconWrapper::before {
  content: "";
  display: inline-block;
  width: 4px;
}

.removeIcon {
  width: 1em;
  height: 1em;
  min-width: 16px;
  min-height: 16px;
}

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