@zohodesk/components/es/DropDown/DropDownItem.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 {
  /* dropdownitem default variables */
  --dropdownitem-padding: var(--zd_size9) var(--zd_size19);
  --dropdownitem-border-color: var(--zdt_dropdown_default_border);
  --dropdownitem-bg-color: var(--zdt_dropdown_mirror_bg);

  /* dropdownitem user default variables */
  --dropdownitem-user-width: var(--zd_size42);
  --dropdownitem-user-border-style: solid;
  --dropdownitem-user-border-color: var(--zdt_dropdown_user_default_border);
  --dropdownitem-user-cursor: pointer;
}[dir=ltr] .varClass {
  --dropdownitem-user-border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
}[dir=rtl] .varClass {
  --dropdownitem-user-border-width: 0 1px 0 0;
}
.list {
  composes: varClass;
  composes: dflex alignVertical from '../common/common.module.css';
  position: relative;
  color: var(--zdt_dropdown_default_text);
  font-size: var(--zd_font_size13) ;
  padding: var(--dropdownitem-padding);
  border-style: solid;
  border-color: var(--dropdownitem-border-color);
  cursor: pointer;
  background-color: var(--dropdownitem-bg-color);
}
[dir=ltr] .list {
  border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
}
[dir=rtl] .list {
  border-width: 0 1px 0 0;
}

.listActive {
  --dropdownitem-border-color: var(--zdt_dropdown_listactive_border);
  --dropdownitem-bg-color: var(--zdt_dropdown_listactive_bg);
}
.listHover {
  --dropdownitem-bg-color: var(--zdt_dropdown_listhover_bg);
}

[dir=ltr] .padding {
  --dropdownitem-padding: 0 var(--zd_size50) 0 0;
}

[dir=rtl] .padding {
  --dropdownitem-padding: 0 0 0 var(--zd_size50);
}

.children {
  display: inline-block;
  font-size: 0 ;
}

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

[dir=rtl] .children {
  margin-left: var(--zd_size10) ;
}

.value {
  composes: dotted flexgrow from '../common/common.module.css';
}

.user {
  composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
  position: absolute;
  top: 0 ;
  bottom: 0 ;
  opacity: 0;
  visibility: hidden;
  width: var(--dropdownitem-user-width);
  border-width: var(--dropdownitem-user-border-width);
  border-style: var(--dropdownitem-user-border-style);
  border-color: var(--dropdownitem-user-border-color);
  cursor: var(--dropdownitem-user-cursor);
}

[dir=ltr] .user {
  right: 0 ;
}

[dir=rtl] .user {
  left: 0 ;
}

.list:hover .user {
  opacity: 1;
  visibility: visible;
}