wix-style-react/dist/src/Tag/Tag.st.css

wix-style-react

@st-import [
  --wds-space-100,
  --wds-space-200,

  --wds-border-width-100,

  --wds-color-text-standard-primary-light,
  --wds-color-text-disabled,
  --wds-color-text-disabled-light,
  --wds-color-border-standard-tertiary,
  --wds-color-border-standard-tertiary-hover,
  --wds-color-fill-standard-secondary,
  --wds-color-fill-standard-secondary-hover,
  --wds-color-fill-standard-secondary-disabled,
  --wds-color-fill-standard-tertiary,
  --wds-color-fill-standard-tertiary-hover,
  --wds-color-fill-standard-tertiary-disabled,
  --wds-color-fill-light-primary,
  --wds-color-fill-light-primary-disabled,
  --wds-color-fill-light-secondary-hover,
  --wds-color-fill-destructive-secondary,
  --wds-color-fill-destructive-secondary-hover,
  --wds-color-fill-warning-secondary,
  --wds-color-fill-warning-secondary-hover,
  --wds-color-fill-success-secondary,
  --wds-color-fill-success-secondary-hover,
  --wds-color-fill-dark-primary,
  --wds-color-fill-dark-primary-hover,
  --wds-color-fill-dark-secondary,
  --wds-color-fill-dark-secondary-hover,

  --wds-tag-size-tiny,
  --wds-tag-size-small,
  --wds-tag-size-medium,
  --wds-tag-size-large,

  --wds-tag-padding-horizontal-tiny,
  --wds-tag-padding-horizontal-small,
  --wds-tag-padding-vertical-small,
  --wds-tag-padding-vertical-medium,
  --wds-tag-padding-horizontal-medium,
  --wds-tag-padding-vertical-large,
  --wds-tag-padding-horizontal-large,

  --wds-tag-border-radius-tiny,
  --wds-tag-border-radius-small,
  --wds-tag-border-radius-medium,
  --wds-tag-border-radius-large,
] from '@wix/design-system-tokens/all.st.css';

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: B30, B50, D10-05, D10-30, D10, D20, D60, D70, D80, D80-30, D80-70, Y30, Y40, R30,
    R40, G40, G30, THEME-COLOR-30, THEME-COLOR-40;
}

:import {
  -st-from: '../Text/Text.st.css';
  -st-default: Text;
}

.root {
  -st-states: withRemoveButton, withThumb, disabled, clickable, hoverable,
    size(enum(tiny, small, medium, large)),
    theme(enum(standard, error, warning, dark, neutral, success, light, lightOutlined));
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  transition: background-color ease 300ms;
  max-width: stretch;
  overflow: hidden;
  min-height: var(--wds-tag-size-tiny, 18px);
}

.root .thumb {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
}

.root .removeButton {
  flex: 0 0 auto;
}

.text {
  -st-extends: Text;
}

/* Sizes */
.root:size(tiny) {
  padding: 0 var(--wds-tag-padding-horizontal-tiny, 9px);
  border-radius: var(--wds-tag-border-radius-tiny, 9px);
  max-height: var(--wds-tag-size-tiny, 18px);
  height: var(--wds-tag-size-tiny, auto);
}

.root:size(tiny):withThumb {
  padding-inline-start: 3px;
}

.root:size(tiny):withRemoveButton {
  padding-inline-end: 3px;
}

.root:size(tiny) .thumb {
  height: 12px;
  width: 12px;
  margin-inline-end: var(--wds-space-100, 6px);
}

.root:size(small) {
  padding: var(--wds-tag-padding-vertical-small, 3px) var(--wds-tag-padding-horizontal-small, 12px);
  border-radius: var(--wds-tag-border-radius-small, 12px);
  max-height: var(--wds-tag-size-small, 24px);
  height: var(--wds-tag-size-small, auto);
}

.root:size(small):withThumb {
  padding-inline-start: 3px;
}

.root:size(small):withRemoveButton {
  padding-inline-end: 3px;
}

.root:size(small) .thumb {
  width: 18px;
  height: 18px;
  margin-inline-end: var(--wds-space-100, 6px);
}

.root:size(small) .removeButton {
  margin-inline-start: var(--wds-space-100, 6px);
}

.root:size(medium) {
  padding: var(--wds-tag-padding-vertical-medium, 6px) var(--wds-tag-padding-horizontal-medium, 12px);
  border-radius: var(--wds-tag-border-radius-medium, 15px);
  max-height: var(--wds-tag-size-medium, 30px);
  height: var(--wds-tag-size-medium, auto);
}

.root:size(medium):withThumb {
  padding-inline-start: 6px;
}

.root:size(medium):withRemoveButton {
  padding-inline-end: 6px;
}

.root:size(medium) .thumb {
  height: 18px;
  width: 18px;
  margin-inline-end: var(--wds-space-200, 12px);
}

.root:size(medium) .removeButton {
  margin-inline-start: var(--wds-space-100, 6px);
}

.root:size(large) {
  padding: var(--wds-tag-padding-vertical-large, 6px) var(--wds-tag-padding-horizontal-large, 18px);
  border-radius: var(--wds-tag-border-radius-large, 18px);
  max-height: var(--wds-tag-size-large, 36px);
  height: var(--wds-tag-size-large, auto);
}

.root:size(large):withThumb {
  padding-inline-start: 6px;
}

.root:size(large):withRemoveButton {
  padding-inline-end: 6px;
}

.root:size(large) .thumb {
  height: 24px;
  width: 24px;
  margin-inline-end: var(--wds-space-200, 12px);
}

.root:size(large) .removeButton {
  margin-inline-start: var(--wds-space-200, 12px);
}

.root:clickable {
  cursor: pointer;
}

/* Themes */
.root:theme(standard) {
  background-color: var(--wds-color-fill-standard-secondary, value(THEME-COLOR-40));
}

.root:theme(standard):hoverable:hover {
  background-color: var(--wds-color-fill-standard-secondary-hover, value(THEME-COLOR-30));
}

.root:theme(warning) {
  background-color: var(--wds-color-fill-warning-secondary, value(Y40));
}

.root:theme(warning):hoverable:hover {
  background-color: var(--wds-color-fill-warning-secondary-hover, value(Y30));
}

.root:theme(error) {
  background-color: var(--wds-color-fill-destructive-secondary, value(R40));
}

.root:theme(error):hoverable:hover {
  background-color: var(--wds-color-fill-destructive-secondary-hover, value(R30));
}

.root:theme(dark) {
  background-color: var(--wds-color-fill-dark-primary, value(D20));
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:theme(dark):hoverable:hover {
  background-color: var(--wds-color-fill-dark-primary-hover, value(D10));
}

.root:theme(neutral) {
  background-color: var(--wds-color-fill-dark-secondary, value(D70));
}

.root:theme(neutral):hoverable:hover {
  background-color: var(--wds-color-fill-dark-secondary-hover, value(D60));
}

.root:theme(success) {
  background-color: var(--wds-color-fill-success-secondary, value(G40));
}

.root:theme(success):hoverable:hover {
  background-color: var(--wds-color-fill-success-secondary-hover, value(G30));
}

.root:theme(light) {
  background-color: var(--wds-color-fill-light-primary, value(D80));
}

.root:theme(light):hoverable:hover {
  background-color: var(--wds-color-fill-light-secondary-hover, value(B50));
}

.root:theme(lightOutlined) {
  outline: var(--wds-border-width-100, 1px) solid var(--wds-color-border-standard-tertiary, value(D60));
  outline-offset: -1px;
  background-color: var(--wds-color-fill-standard-tertiary, value(D80));
}

.root:theme(lightOutlined):hoverable:hover {
  background-color: var(--wds-color-fill-standard-tertiary-hover, value(B50));
  outline-color: var(--wds-color-border-standard-tertiary-hover, value(B30));
}

.root:disabled {
  background-color: var(--wds-color-fill-standard-secondary-disabled, value(D10-05));
  color: var(--wds-color-text-disabled, value(D10-30));
}

.root:disabled:theme(light) {
  background-color: var(--wds-color-fill-light-primary-disabled, value(D80-30));
}

.root:disabled:theme(lightOutlined) {
  background-color: var(--wds-color-fill-standard-tertiary-disabled, value(D80-30));
}

.root:disabled:theme(light) .text,
.root:disabled:theme(lightOutlined) .text {
  color: var(--wds-color-text-disabled-light, value(D80-70));
}

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