@zohodesk/components/es/DropDown/DropDownHeading.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 {
  /* dropdownheading default variables */
  --dropdownheading_text_color: var(--zdt_dropdown_default_text);
  --dropdownheading_text_transform: uppercase;
  --dropdownheading_padding: var(--zd_size10) var(--zd_size20);
  --dropdownheading_bg_color: none;

  /* dropdownheading underline default variables */
  --dropdownheading_underline_width: var(--zd_size20);
  --dropdownheading_underline_height: var(--zd_size1);
  --dropdownheading_underline_bg_color: var(--zdt_dropdown_default_bg);
  --dropdownheading_underline_left: var(--zd_size20);
}
.default {
  composes: dotted semibold from '../common/common.module.css';
  composes: varClass;
  position: relative;
  font-size: var(--zd_font_size11) ;
  letter-spacing: 0.6px;
  text-transform: var(--dropdownheading_text_transform);
  color: var(--dropdownheading_text_color);
  padding: var(--dropdownheading_padding);
  background-color: var(--dropdownheading_bg_color);
}
.default::after {
  position: absolute;
  content: '';
  bottom: var(--zd_size2) ;
  width: var(--dropdownheading_underline_width);
  height: var(--dropdownheading_underline_height);
}

.light {
  composes: default;
}
.light::after, .dark::after {
  background-color: var(--dropdownheading_underline_bg_color);
}
[dir=ltr] .light::after, [dir=ltr] .dark::after {
  left: var(--dropdownheading_underline_left);
}
[dir=rtl] .light::after, [dir=rtl] .dark::after {
  right: var(--dropdownheading_underline_left);
}

.dark {
  composes: default;
  --dropdownheading_text_color: var(--zdt_dropdown_darkheading_text);
  --dropdownheading_bg_color: var(--zdt_dropdown_darkheading_bg);
}
.dark::after {
  --dropdownheading_underline_bg_color: var(--zdt_dropdown_darkheading_underline_bg);
}