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

.month {
  width: 30.333%;
  margin-block:0 var(--zd_size1) ;
  margin-inline:0 ;
  font-size: var(--zd_font_size12) ;
  line-height: 2.1667;
  height: var(--zd_size26) ;
  color: var(--zdt_yearview_month_text);
  text-align: center;
  cursor: pointer;
  background-color: var(--zdt_yearview_month_bg);
  border-radius: 20px;
}

.month:hover {
  background-color: var(--zdt_yearview_month_hover_bg);
}

.currentMonth,
.currentMonth:hover {
  color: var(--zdt_yearview_currentmonth_text);
}

.currentMonth, .currentMonth:hover {
  background-color: var(--zdt_yearview_currentmonth_bg);
}

.yearBox {
  border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
}

.year {
  padding-block: var(--zd_size7) ;
  padding-inline:0 ;
  cursor: pointer;
}

.year:hover .yearText,
.year:hover .arrow {
  color: var(--zdt_yearview_year_hover_text);
}

.yearText {
  color: var(--zdt_yearview_yeartext_text);
  font-size: var(--zd_font_size11) ;
}

.arrow {
  color: var(--zdt_yearview_yeartext_text);
  transition: transform var(--zd_transition1);
}

.isActive {
  cursor: default;
}

.isActive .yearText {
  font-weight: var(--zd-fw-semibold);
  color: var(--zdt_yearview_year_hover_text);
  font-size: var(--zd_font_size11) ;
}

.arrowActive {
  color: var(--zdt_yearview_year_hover_text);
}

[dir=ltr] .arrowActive {
  transform: rotate(180deg);
}

[dir=rtl] .arrowActive {
  transform: rotate(-180deg);
}

.container {
  height: 100% ;
  overflow-y: auto;
  overflow-x: hidden;
  composes: boxPadding;
  background-color: var(--zdt_yearview_default_bg);
}

.yearContainer {
  height: var(--zd_size135) ;
  overflow: hidden;
  transition: height var(--zd_transition1);
  padding-block-end: var(--zd_size5) ;
}

.toggleYear {
  height: 0 ;
  padding: 0 ;
}