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

.semibold {
  font-weight: var(--zd-fw-semibold);
}

.boxPadding {
  padding-inline: var(--zd_size19) ;
}

.container {
  font-size: var(--zd_font_size16) ;
  composes: offSelection from '../common/common.module.css';
  border-radius: 3px;
  background-color: var(--zdt_datetime_default_bg);
}

.header {
  min-height: var(--zd_size36) ;
  composes: boxPadding;
  text-align: center;
  background-color: var(--zdt_datetime_header_bg);
  border-radius: 0 0 2px 2px;
  border-bottom: 1px solid var(--zdt_datetime_header_border);
}

.datesStr {
  font-weight: var(--zd-fw-normal);
}

.grid {
  width: var(--zd_size28) ;
  height: var(--zd_size28) ;
  line-height: 1.3846;
  text-align: center;
  padding: var(--zd_size4) 0 ;
  border-radius: 50%;
  border: 1px solid transparent;
}

.thArrow,
.datesStr {
  font-size: var(--zd_font_size13) ;
  color: var(--zdt_datetime_datestr_text);
}

.thArrow, .datesStr {
  cursor: pointer;
}

.thArrow:hover,
.datesStr:hover {
  color: var(--zdt_datetime_datestr_text);
}

.thArrow:hover, .datesStr:hover {
  background: var(--zdt_datetime_datestr_hover_bg);
}

.navigation {
  margin-inline-start: var(--zd_size2) ;
}

.thMonYear {
  font-size: var(--zd_font_size13) ;
  line-height: 1.8462;
  color: var(--zdt_datetime_datestr_text);
  composes: semibold;
  display: initial
}

.dateContainer {
  margin-block:0 ;
  margin-inline: var(--zd_size19) ;
  padding-block: var(--zd_size6) var(--zd_size10) ;
  padding-inline:0 ;
}

.separator {
  border-bottom: 1px dotted var(--zdt_datetime_separator_border);
}

.days {
  min-height: var(--zd_size36) ;
  padding-block-start: var(--zd_size7) ;
  composes: boxPadding;
  composes: alignBetween from '../common/common.module.css';
}

.daysStr {
  composes: dotted from '../common/common.module.css';
  font-size: var(--zd_font_size10) ;
  color: var(--zdt_datetime_daystr_text);
  text-transform: uppercase;
  composes: semibold;
  width: var(--zd_size31) ;
}

.dateRow {
  height: var(--zd_size28) ;
  margin-block: var(--zd_size1) var(--zd_size5) ;
  margin-inline:0 ;
  composes: alignBetween from '../common/common.module.css';
}

.dateRow:last-child {
  margin-block-end: 0 ;
}

.holiday,
.holiday:hover,
.invalidDate.holiday:hover {
  color: var(--zdt_datetime_invalid_hover_text);
}

.invalidDate {
  color: var(--zdt_datetime_invalid_text);
}

.invalidDate.holiday,
.inActiveDate.holiday:hover {
  color: var(--zdt_datetime_invaliddate_text);
}

.today {
  border: 1px solid var(--zdt_datetime_today_border);
  border-radius: 50%;
}

.today:hover {
  border: 1px solid var(--zdt_datetime_today_border);
  background-color: var(--zdt_datetime_datestr_hover_bg);
}

.active,
.active:hover,
.active.today,
.active:hover.today:hover {
  color: var(--zdt_datetime_today_text);
}

.active, .active:hover, .active.today, .active:hover.today:hover {
  background-color: var(--zdt_datetime_selected_bg);
  border-radius: 50%;
}

.inActiveDate {
  color: var(--zdt_datetime_invalid_text);
  cursor: no-drop;
}

.inActiveDate:hover {
  color: var(--zdt_datetime_invalid_text);
}

.inActiveDate:hover, .inActiveDate.holiday:hover {
  background-color: var(--zdt_datetime_inactivedate_hover_bg);

}


.timesection {
  padding-block: var(--zd_size5) var(--zd_size10) ;
}

.dropDownContainer {
  padding-inline: var(--zd_size5) ;
  padding-block:0 ;
}

.dropDown {
  width: var(--zd_size60) ;
  display: inline-block;
  margin-inline: var(--zd_size4) ;
  margin-block:0 ;
  position: relative;
}

.footer {
  margin-block-start: var(--zd_size10) ;
  padding-block-end: var(--zd_size12) ;
}

.timesection,
.footer {
  composes: boxPadding;
}

.space {
  display: inline-block;
  width: var(--zd_size15) ;
}

.downArrow {
  margin-inline-start: var(--zd_size2) ;
  color: var(--zdt_datetime_daystr_text);
}

.dateText {
  cursor: pointer;
}

.dateText:hover .downArrow {
  color: var(--zdt_datetime_datestr_text);
}

.text {
  composes: boxPadding;
  font-size: var(--zd_font_size11) ;
  text-transform: uppercase;
  color: var(--zdt_datetime_text);
  margin-block-start: var(--zd_size14) ;
  composes: semibold;
  display: block;
}

.yearContainer {
  position: absolute;
  top: 0 ;
  width: 100% ;
  height: 100% ;
}

[dir=ltr] .yearContainer {
  left: 0 ;
}

[dir=rtl] .yearContainer {
  right: 0 ;
}

.subContainer {
  position: relative;
}

.dropBox {
  width: 100% ;
  border-radius: 3px;
  box-shadow: var(--zd_bs_dropbox_bottom);
  background-color: var(--zdt_dropbox_default_bg);
}