@zohodesk/dot/es/TagWithIcon/TagWithIcon.module.css

In this Library, we Provide Some Basic Components to Build Your Application

.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) ;
}

.small, .large {
  border: 1px solid var(--tag_border_color);
  border-radius: var(--zd_size4);
  padding: 0 var(--zd_size6) ;
}

.bold {
  composes: semibold from '~@zohodesk/components/lib/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/lib/common/common.module.css';
}

[dir=ltr] .iconSpace {
  margin-right: var(--zd_size4) ;
}

[dir=rtl] .iconSpace {
  margin-left: 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);
}