@zohodesk/components/es/MultiSelect/MultiSelect.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

.wrapper {
  position: relative;
}
.disabled, .readOnly {
  cursor: not-allowed;
}
.container {
  max-height: var(--zd_size120) ;
  composes: oflowy from '../common/common.module.css';
}
.hasBorder {
  transition: border var(--zd_transition2) linear 0s;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.borderColor_transparent {
  border-bottom-color: var(--zdt_multiselect_transparent_border);
}
.effect .borderColor_transparent:hover {
  border-bottom-color: var(--zdt_multiselect_transparent_hover_border);
}
.effect .borderColor_transparent.active {
  border-bottom-color: var(--zdt_multiselect_transparent_active_border);
}
.borderColor_default {
  border-bottom-color: var(--zdt_multiselect_default_border);
}
.effect .borderColor_default:hover {
  border-bottom-color: var(--zdt_multiselect_default_hover_border);
}
.effect .borderColor_default.active {
  border-bottom-color: var(--zdt_multiselect_default_active_border);
}
.borderColor_dark {
  border-bottom-color: var(--zdt_multiselect_dark_border);
}
.effect .borderColor_dark:hover {
  border-bottom-color: var(--zdt_multiselect_dark_hover_border);
}
.effect .borderColor_dark.active {
  border-bottom-color: var(--zdt_multiselect_dark_active_border);
}

.container.medium {
  padding-block-end: var(--zd_size8) ;
}

.container.xmedium {
  padding-block-end: var(--zd_size3) ;
  min-height: var(--zd_size30) ;
}

.delete {
  padding-block: var(--zd_size2) ;
  padding-inline:var(--zd_size6) ;
  font: inherit;
  cursor: pointer;
  border: 0;
  background-color: var(--zdt_multiselect_delete_bg);
}
.delete,
.defaultDelete {
  color: var(--zdt_multiselect_delete_text);
}
.darkDelete {
  color: var(--zdt_multiselect_darkdelete_text);
}

.delete:hover,
.defaultDelete:hover {
  color: var(--zdt_multiselect_delete_hover_text);
}
.darkDelete:hover {
  color: var(--zdt_multiselect_darkdelete_hover_text);
}
.transparentContainer .delete {
  opacity: 0;
  visibility: hidden;
}
.transparentContainer:hover .delete {
  opacity: 1;
  visibility: visible;
}

.tag {
  max-width: 100% ;
}

.container.xmedium .tag {
  margin-block: var(--zd_size2) 0 ;
  margin-inline:0 var(--zd_size10) ;
}

.container.medium .tag {
  margin-block: var(--zd_size5) 0 ;
  margin-inline:0 var(--zd_size10) ;
}
.responsiveParent{
  width: 100% ;
}
.box {
  background: var(--zdt_multiselect_box_bg);
}

.selectAll:hover {
  color: var(--zdt_multiselect_selectall_text);
}

.small {
  max-height: var(--zd_size200) ;
}

.medium {
  max-height: var(--zd_size350) ;
}

.large {
  max-height: var(--zd_size400) ;
}

.commonMessage {
  font-size: var(--zd_font_size14) ;
  composes: semibold from '../common/common.module.css';
  padding-block: var(--zd_size12) ;
  padding-inline:var(--zd_size15) ;
}
.default,
.dark {
  composes: commonMessage;
}
.default,
.defaultBox {
  color: var(--zdt_multiselect_message_text);
}
.dark,
.darkBox {
  color: var(--zdt_multiselect_darkmsg_text);
}
.dark, .darkBox {
  background: var(--zdt_multiselect_darkmsg_bg);
}

.hide {
  composes: vishidden from '../common/common.module.css';
}
.custmSpan {
  display: inline-block;
  vertical-align: middle;
  opacity: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100% ;
  visibility: hidden;
}
.custmSpanMedium {
  height: var(--zd_size35) ;
}
.custmSpanXmedium {
  height: var(--zd_size28) ;
}
.custmInputWrapper {
  position: absolute;
  top: 0 ;
  width: 100% ;
}
[dir=ltr] .custmInputWrapper {
  left: 0 ;
}
[dir=rtl] .custmInputWrapper {
  right: 0 ;
}
.title {
  margin-block-end: var(--zd_size6) ;
}
.groupTitle {
  margin-block: var(--zd_size6) ;
  margin-inline:0 ;
}
.loader {
  padding: var(--zd_size10) ;
}
.iconContainer {
  padding-block-start: var(--zd_size3) 
}
.clearIconSpace {
  padding-inline-end: var(--zd_size37) 
}

.more {
  font-size: var(--zd_font_size14) ;
  color: var(--zdt_multiselect_more_text);
  margin-block-start: var(--zd_size5) ;
  font-weight: var(--zd-fw-normal);
  margin-inline-end:var(--zd_size3) ;
  cursor: pointer;
  background-color: var(--zdt_multiselect_delete_bg);
  border: 0
}

.rightPlaceholder{
  height: 100% ;
}