@zohodesk/dot/lib/list/status/StatusListItem/StatusListItem.module.css

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

.varClass {
  --statuslistitem_multiline_lineheight: 1.5385;
  --statuslistitem_font_size: var(--zd_font_size13);
  --statuslistitem_min_height: var(--zd_size35);
}

.list {
  composes: varClass;
  color: var(--zdt_statuslistitem_list_text);
  font-size: var(--statuslistitem_font_size);
  position: relative;
  list-style: none;
  min-height: var(--statuslistitem_min_height);
  cursor: pointer;
}
[dir=ltr] .withBorder {
  border-left: 1px solid var(--zdt_statuslistitem_default_border);
}
[dir=rtl] .withBorder {
  border-right: 1px solid var(--zdt_statuslistitem_default_border);
}
.small {
  padding-block: var(--zd_size7) ;
  padding-inline:var(--zd_size3) var(--zd_size5) ;
}
.medium {
  padding-block: var(--zd_size7) ;
  padding-inline:var(--zd_size20) ;
}
.large {
  padding-block: var(--zd_size10) ;
  padding-inline:var(--zd_size25) var(--zd_size3) ;
  --statuslistitem_min_height: var(--zd_size48);
}
.value,.multiLineValue {
  line-height: 1.5385;
}
.value {
  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
}
.multiLineValue {
  composes: lineClamp from '~@zohodesk/components/es/common/common.module.css';
}
[dir=ltr] .withBorder.active {
  border-left-color: var(--zdt_statuslistitem_default_active_border);
}
[dir=rtl] .withBorder.active {
  border-right-color: var(--zdt_statuslistitem_default_active_border);
}

.default.hover, .default.effect:hover {
  background-color: var(--zdt_statuslistitem_default_effect_bg);
}
.primary.hover, .primary.effect:hover, .selected {
  background-color: var(--zdt_statuslistitem_primary_efffect_bg);
}
.secondary.hover, .secondary.effect:hover {
  background-color: var(--zdt_statuslistitem_secondary_effect_bg);
}
.list.active.default, .list.active.primary {
  background-color: var(--zdt_statuslistitem_primary_efffect_bg);
}
.list.active.secondary {
  background-color: var(--zdt_statuslistitem_secondary_effect_bg);
}
.secondary.hover,
.secondary.effect:hover,
.list.active.secondary {
  color: var(--zdt_statuslistitem_secondary_effect_text);
}
.tickIcon {
  color: var(--zdt_statuslistitem_tickicon);
  position: absolute;
  top:50% ;
  transform: translateY(-50%);
}
[dir=ltr] .tickIcon {
  right: var(--zd_size20) ;
}
[dir=rtl] .tickIcon {
  left: var(--zd_size20) ;
}
.tickIcon > i {
  display: block;
}
.active.withTick {
  padding-inline-end: var(--zd_size39) ;
}
.contentWrapper {
  composes: dflex flexrow alignVertical from '~@zohodesk/components/es/common/common.module.css';
  width: 100% ;
}
/* Status Type */
.statusType{
  position: relative;
  composes: dflex alignVertical alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
  min-height: calc(var(--statuslistitem_font_size) * var(--statuslistitem_multiline_lineheight));
  min-width: var(--zd_size20) ;
}
.statusType::after{
  /* css:validation:ignore */
  --status_listitem_bullet_size: var(--zd_font_size8);

  content: '';
  height: var(--status_listitem_bullet_size);
  width: var(--status_listitem_bullet_size);
  border-radius: 50%;
}
[dir=ltr] .statusType::after{
  margin-right: var(--zd_size12) ;
}
[dir=rtl] .statusType::after{
  margin-left: var(--zd_size12) ;
}

.black.statusType::after {
  background-color: var(--zdt_statuslistitem_black_bg);
}
.orange.statusType::after {
  background-color: var(--zdt_statuslistitem_orange_bg);
}
.green.statusType::after {
  background-color: var(--zdt_statuslistitem_green_bg);
}