@zohodesk/components/lib/Tag/Tag.module.css

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

.varClass {
  /* tag default variables */
  --tag_text_color: var(--zdt_tag_default_text);
  --tag_font_size: var(--zd_font_size13);
  --tag_letter_spacing: normal;
  --tag_bg_color: var(--zdt_tag_default_bg);
  --tag_border_radius: 25px;
  --tag_height: auto;
  --tag_border_width: 0;
  --tag_border_style: dashed;
  --tag_border_color: var(--zdt_tag_default_border);
  --tag_padding: var(--zd_size2);
  --tag_inner_text_padding: 0 var(--zd_size6);
  --tag_cursor: default;

  /* tag close icon default variables */
  --tag_closeicon_color: var(--zdt_tag_secondary_text);
  --tag_closeicon_cursor: pointer;
  --tag_closeicon_bg_color: var(--zdt_tag_closedanger_bg);

  /* tag normal icon default variables */
  --tag_icon_bg_color: var(--zdt_tag_icon_bg);
}[dir=ltr] .varClass {
  --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
  --tag_closeicon_padding: 0 var(--zd_size7) 0 var(--zd_size6);
  --tag_icon_margin: 0 0 0 var(--zd_size5);
}[dir=rtl] .varClass {
  --tag_closeicon_border_radius: 12px 0 0 12px;
  --tag_closeicon_padding: 0 var(--zd_size6) 0 var(--zd_size7);
  --tag_icon_margin: 0 var(--zd_size5) 0 0;
}
.container {
  composes: varClass;
  composes: dInflex alignVertical flexrow from '../common/common.module.css';
  position: relative;
  vertical-align: middle;
  color: var(--tag_text_color);
  font-size: var(--tag_font_size);
  letter-spacing: var(--tag_letter_spacing);
  height: var(--tag_height);
  max-width: 100% ;
  background-color: var(--tag_bg_color);
  border-radius: var(--tag_border_radius);
  border-width: var(--tag_border_width);
  border-style: var(--tag_border_style);
  border-color: var(--tag_border_color);
  padding: var(--tag_padding);
  cursor: var(--tag_cursor);
}
.disabled {
  pointer-events: none;
  --tag_text_color: var(--zdt_tag_disabled_text);
}
.readonly,
.disabled {
  --tag_cursor: not-allowed;
}
.pointer {
  --tag_cursor: pointer;
}
.lgRadius {
  --tag_border_radius: 25px;
}
.smRadius {
  --tag_border_radius: 3px;
}
.text {
  composes: dotted flexgrow from '../common/common.module.css';
}
.smalltext,
.mediumtext {
  font-size: var(--tag_font_size);
}
.smalltext, .mediumtext {
  padding: var(--tag_inner_text_padding);
}
.small {
  --tag_height: var(--zd_size20);
  --tag_padding: var(--zd_size1);
  --tag_inner_text_padding: 0 var(--zd_size7);
}
.small .avatar {
  margin-inline-end: calc( var(--zd_size8) * -1 ) ;
}
[dir=ltr] .small .avatar {
  transform: scale(0.8) translateX(-2px);
}
[dir=rtl] .small .avatar {
  transform: scale(0.8) translateX(2px);
}
.smalltext {
  --tag_font_size: var(--zd_font_size12);
}
.activesmallEffect {
  --tag_inner_text_padding: 0 var(--zd_size25) 0 var(--zd_size7);
}

.medium {
  --tag_height: var(--zd_size26);
  --tag_padding: var(--zd_size2);
  --tag_inner_text_padding: 0 var(--zd_size6);
}
.mediumtext {
  --tag_font_size: var(--zd_font_size13);
}
.activemediumEffect {
  --tag_inner_text_padding: 0 var(--zd_size25) 0 var(--zd_size6);
}

.selected .close {
  display: block;
}
.activedanger,
.closedanger:hover {
  --tag_closeicon_bg_color: var(--zdt_tag_danger_bg);
}
.activeprimary,
.closeprimary:hover {
  --tag_closeicon_bg_color: var(--zdt_tag_primary_hover_bg);
}

.container:hover .close {
  display: block;
}
.close {
  color: var(--tag_closeicon_color);
  display: none;
  position: absolute;
  top: 0 ;
  bottom: 0 ;
  padding: var(--tag_closeicon_padding);
  cursor: var(--tag_closeicon_cursor);
  border-radius: var(--tag_closeicon_border_radius);
  background: var(--tag_closeicon_bg_color);
}
[dir=ltr] .close {
  right: 0 ;
}
[dir=rtl] .close {
  left: 0 ;
}
[dir=ltr] .lgRadiusClose {
  --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
}
[dir=rtl] .lgRadiusClose {
  --tag_closeicon_border_radius: 12px 0 0 12px;
}
[dir=ltr] .smRadiusClose {
  --tag_closeicon_border_radius: 0 3px 3px 0 /*rtl: 3px 0 0 3px*/;
}
[dir=rtl] .smRadiusClose {
  --tag_closeicon_border_radius: 3px 0 0 3px;
}
.closedanger {
  --tag_closeicon_bg_color: var(--zdt_tag_closedanger_bg);
}
.closeprimary {
  --tag_closeicon_bg_color: var(--zdt_tag_closeprimary_bg);
}
.default,
.danger,.defaultLink {
  --tag_bg_color: var(--zdt_tag_default_danger_bg);
}
.effect.default:hover {
  --tag_bg_color: var(--zdt_tag_default_hover_bg);
}
.activedefault,
.effect.activedefault:hover {
  --tag_bg_color: var(--zdt_tag_active_default_bg);
}
.activeprimaryClose,
.activeprimaryClose:hover {
  --tag_closeicon_bg_color: var(--zdt_tag_primary_bg);
}

.effect.danger:hover {
  --tag_bg_color: var(--zdt_tag_danger_hover_bg);
}
.activedanger,
.effect.activedanger:hover {
  --tag_bg_color: var(--zdt_tag_danger_hover_bg);
}
.activedangerClose,
.activedangerClose:hover {
  --tag_closeicon_bg_color: var(--zdt_tag_danger_bg);
}
.secondary {
  --tag_bg_color: var(--zdt_tag_secondary_bg);
  --tag_text_color: var(--zdt_tag_secondary_text);
}
.activesecondary,
.effect.secondary:hover {
  --tag_bg_color: var(--zdt_tag_secondary_hover_bg);
}
.activedefaultLink,
.effect.defaultLink:hover{
--tag_bg_color: var(--zdt_tag_defaultLink_hover_bg);
--tag_text_color: var(--zdt_tag_defaultLink_hover_text);
};

.pureDotted {
  --tag_bg_color: var(--zdt_tag_pure_bg);
  --tag_border_width: 1px;
  --tag_border_color: var(--zdt_tag_pure_border);
}
.effect.pureDotted:hover {
  --tag_bg_color: var(--zdt_tag_pure_hover_bg);
  --tag_border_color: var(--zdt_tag_pure_hover_border);
}
.activepureDotted,
.effect.activepureDotted:hover {
  --tag_bg_color: var(--zdt_tag_pure_bg);
}

.primaryDotted {
  --tag_bg_color: var(--zdt_tag_active_default_bg);
  --tag_border_width: 1px;
  --tag_border_color: var(--zdt_tag_primary_border);
}
.effect.primaryDotted:hover,
.activeprimaryDotted,
.primary,
.effect.primary:hover {
  --tag_bg_color: var(--zdt_tag_active_default_bg);
}

.icon {
  margin: var(--tag_icon_margin);
  background-color: var(--tag_icon_bg_color);
}
.icon > i {
  display: block;
}
.dark {
  --tag_bg_color: var(--zdt_tag_dark_bg);
  --tag_text_color: var(--zdt_tag_dark_text);
}
.effect.dark:hover {
  --tag_bg_color: var(--zdt_tag_dark_hover_bg);
  --tag_text_color: var(--zdt_tag_dark_hover_text);
}
.darkTagClose {
  --tag_closeicon_bg_color: var(--zdt_tag_dark_close_bg);
  --tag_closeicon_color: var(--zdt_tag_dark_close_text);
}
.darkTagClose:hover {
  --tag_closeicon_bg_color: var(--zdt_tag_dark_close_hover_bg);
  --tag_closeicon_color: var(--zdt_tag_secondary_text);
}
.pureDarkDotted {
  composes: dark pureDotted;
}
.darkPrimaryDotted {
  composes: dark primaryDotted;
}