.varClass {
  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
  --tag_text_color: var(--zdt_tagWithIconGrey_text);
  --tag_border_color: var(--zdt_tagWithIconGrey_border);
  --tag_small_fontSize: var(--zd_font_size10);
  --tag_large_fontSize: var(--zd_font_size12);
}

.wrapper {
  composes: varClass;
  color: var(--tag_text_color);
  background-color: var(--tag_bg_color);
}

.small,
.large {
  max-width: 100% ;
  height: var(--zd_size18) ;
  padding-inline: var(--zd_size6) ;
  padding-block:0 ;
}

.small, .large {
  border: 1px solid var(--tag_border_color);
  border-radius: 4px;
}

.bold {
  composes: semibold from '~@zohodesk/components/es/common/common.module.css';
}

.small_text {
  font-size: var(--tag_small_fontSize);
}

.large_text {
  font-size: var(--tag_large_fontSize);
}

.text {
  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
}

.iconSpace {
  margin-inline-end: var(--zd_size4) ;
}

.yellow {
  --tag_bg_color: var(--zdt_tagWithIconYellow_bg);
  --tag_text_color: var(--zdt_tagWithIconYellow_text);
  --tag_border_color: var(--zdt_tagWithIconYellow_border);
}

.grey {
  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
  --tag_text_color: var(--zdt_tagWithIconGrey_text);
  --tag_border_color: var(--zdt_tagWithIconGrey_border);
}

.blue {
  --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
  --tag_text_color: var(--zdt_tagWithIconBlue_text);
  --tag_border_color: var(--zdt_tagWithIconBlue_border);
}