@alifd/meet-react/es/calendar/styles/index.css

Fusion Mobile React UI System Component

@charset "UTF-8";
/*
  @component calendar
  @display Calendar
  @chinese 日历
  @family data-display
*/
:root {
  /*
    @desc border-color
    @semantic 头部分割线颜色(`card/fullscreen`模式)
    @namespace state/head/select
  */
  --calendar-header-select-border-color: var(--color-line1-3);
  /*
    @desc padding
    @semantic  头部选中内边距(`card/fullscreen`模式)
    @namespace size/head/select
  */
  --calendar-header-select-padding: var(--s-2);
  /*
    @desc month-date-picker-width
    @semantic   月、日弹出 picker 宽度(`card/fullscreen` `month`模式)
    @namespace size/head/title
  */
  --calendar-header-title-month-date-picker-width: var(--s-30);
  /*
    @desc year-date-picker-width
    @semantic 年、日弹出 picker 宽度(`card/fullscreen` `year`模式)
    @namespace size/head/title
  */
  --calendar-header-title-year-date-picker-width: var(--s-24);
  /*
    @desc bg-color
    @semantic 头部背景色(`panel/range`模式)
    @namespace state/normal/head
  */
  --calendar-header-normal-background-color: var(--color-white);
  /*
    @desc border-color
    @semantic 底部边框色
    @namespace state/normal/head
  */
  --calendar-header-normal-border-color: var(--color-line1-2);
  /*
    @desc title-color
    @semantic  头部标题颜色(`panel/range`模式)
    @namespace state/normal/head
  */
  --calendar-header-normal-title-color: var(--color-text1-4);
  /*
    @desc title-size
    @semantic  标题尺寸(`panel/range`模式)
    @namespace size/head
  */
  --calendar-header-normal-title-size: var(--p-body-2-font-size);
  /*
    @desc icon-color
    @semantic 头部图标颜色(`panel/range`模式)
    @namespace state/normal/head
  */
  --calendar-header-normal-icon-color: var(--color-text1-2);
  /*
    @desc disable-icon-color
    @semantic 头部图标禁用颜色
    @namespace state/normal/head
  */
  --calendar-header-normal-icon-disabled-color: var(--color-text1-1);
  /*
    @desc padding(t,b)
    @semantic 上下内边距
    @namespace size/content
  */
  --calendar-content-padding-vertical: var(--s-5);
  /*
    @desc padding(l,r)
    @semantic 左右内边距
    @namespace size/content
  */
  --calendar-content-padding-horizon: var(--s-3);
  /*
    @desc margin-bottom
    @semantic 内容下边距(`month`模式)
    @namespace size/content
  */
  --calendar-content-top-margin-bottom: var(--s-4);
  /*
    @desc top-line-height
    @semantic 内容顶部行高(`month`模式)
    @namespace size/content
  */
  --calendar-content-top-line-height: var(--s-5);
  /*
    @desc row-margin-bottom
    @semantic 内容单行底部外边距
    @namespace size/content
  */
  --calendar-content-row-margin-bottom: var(--s-1);
  /*
    @desc range-container-background-color
    @semantic 日期单元格背景色(`range`模式)
    @namespace state/cell
  */
  --calendar-cell-range-container-background-color: var(--color-brand-1);
  /*
    @desc font-color
    @semantic 禁用字体颜色(`month`模式)
    @namespace state/disabled/cell
  */
  --calendar-cell-disabled-text-color: var(--color-text1-1);
  /*
    @desc primary-color
    @semantic 高亮颜色
    @namespace state/selected/cell
  */
  --calendar-highlight-color: var(--color-brand-3);
  /*
    @desc year-padding-top
    @semantic 年顶部内边距(`year`模式)
    @namespace  size/cell
  */
  --calendar-cell-year-padding-top: var(--s-4);
  /*
    @desc year-padding-left
    @semantic 年左侧内边距(`year`模式)
    @namespace size/cell
  */
  --calendar-cell-year-padding-left: var(--s-2);
  /*
    @desc year-height
    @semantic 年高度(`year`模式)
    @namespace size/cell
  */
  --calendar-cell-year-height: var(--s-20);
  /*
    @desc year-margin(l,r)
    @semantic 年水平边距(`year`模式)
    @namespace  size/cell
  */
  --calendar-cell-year-margin-horizon: var(--s-1);
  /*
    @desc year-bg-color
    @semantic 背景色(`year`模式)
    @namespace  state/normal/cell
  */
  --calendar-cell-year-normal-background-color: var(--color-white);
  /*
    @desc year-bg-color
    @semantic 禁用时背景色(`year`模式)
    @namespace  state/disabled/cell
  */
  --calendar-cell-year-disabled-background-color: var(--color-white);
  /*
    @desc year-bg-color
    @semantic 选中时年背景色
    @namespace  state/selected/cell
  */
  --calendar-cell-year-selected-background-color: var(--color-brand-1);
  /*
    @desc year-font-color
    @semantic 年文字颜色(`year`模式)
    @namespace  state/normal/cell
  */
  --calendar-cell-year-normal-text-color: var(--color-black);
  /*
    @desc year-font-color
    @semantic 禁用时年文字色(`year`模式)
    @namespace state/disabled/cell
  */
  --calendar-cell-year-disabled-text-color: var(--color-text1-1);
  /*
    @desc year-line-color
    @semantic 年分割线颜色(`year`模式)
    @namespace state/normal/cell
  */
  --calendar-cell-year-normal-line-color: var(--color-line1-3);
  /*
    @desc year-line-color
    @semantic 禁用时年分割线颜色(`year`模式)
    @namespace state/disabled/cell
  */
  --calendar-cell-year-disabled-line-color: var(--color-line1-3);
  /*
     @desc year-font-size
     @semantic 年字体大小(`year`模式)
     @namespace state/normal/cell
   */
  --calendar-cell-year-font-size: var(--p-body-2-font-size);
  /*
    @desc cell-bg-color
    @semantic 日期背景色(`month`模式)
    @namespace state/normal/cell
  */
  --calendar-cell-normal-background-color: var(--color-white);
  /*
    @desc cell-bg-color
    @semantic 禁用日期背景色(`month`模式)
    @namespace state/disabled/cell
  */
  --calendar-cell-disabled-background-color: var(--color-white);
  /*
    @desc cell-font-color
    @semantic 日期文字颜色(`month`模式)
    @namespace state/normal/cell
  */
  --calendar-cell-normal-text-color: var(--color-black);
  /*
    @desc cell-font-color
    @semantic  选中日期文字颜色(`month`模式)
    @namespace state/selected/cell
  */
  --calendar-cell-selected-text-color: var(--color-white);
  /*
     @desc cell-bg-color
     @semantic 今天-背景色
     @namespace state/today/cell
   */
  --calencar-cell-today-background-color: var(--color-white);
  /*
    @desc cell-height
    @semantic 日期单元格高度(`month`模式)
    @namespace size/cell
  */
  --calendar-cell-height: var(--s-9);
  /*
     @desc header-height
     @semantic 头部高度(`panel/range`模式)
     @namespace size/header
   */
  --calendar-header-height: var(--s-12);
  /*
    @desc time-picker-height
    @semantic 时间选择高度
    @namespace size/time-picker
  */
  --calendar-time-picker-height: var(--s-12);
  /*
     @desc time-picker-bg-color
     @semantic 时间选择框背景色
     @namespace style/time-picker
   */
  --calendar-time-picker-bg-color: var(--color-fill1-2);
  /*
     @desc time-picker-font-color
     @semantic 时间选择框字体色
     @namespace style/time-picker
   */
  --calendar-time-picker-font-color: var(--color-text1-4);
  /*
     @desc time-picker-corner
     @semantic 时间选择框圆角尺寸
     @namespace size/time-picker
   */
  --calendar-time-picker-corner: var(--corner-1);
  /*
     @desc time-picker-active-color
     @semantic 时间选择框激活字体色
     @namespace style/time-picker
   */
  --calendar-time-picker-active-color: var(--color-white);
  /*
     @desc time-picker-icon-color
     @semantic 时间选择框图标色
     @namespace style/time-picker
   */
  --calendar-time-picker-icon-color: var(--color-text1-2);
}

:root {
  --calendar-cell-range-background-color: var(--calendar-cell-range-container-background-color);
  --calendar-cell-begin-background-color: var(--calendar-highlight-color);
  --calendar-cell-end-background-color: var(--calendar-highlight-color);
  --calendar-cell-today-background-color: var(--calencar-cell-today-background-color);
  --calendar-cell-range-text-color: var(--calendar-cell-normal-text-color);
  --calendar-cell-begin-text-color: var(--calendar-cell-selected-text-color);
  --calendar-cell-end-text-color: var(--calendar-cell-selected-text-color);
  --calendar-cell-today-text-color: var(--calendar-highlight-color);
  --calendar-cell-normal-left-color: var(--calendar-cell-normal-background-color);
  --calendar-cell-disabled-left-color: var(--calendar-cell-disabled-background-color);
  --calendar-cell-selected-left-color: var(--calendar-cell-normal-background-color);
  --calendar-cell-range-left-color: var(--calendar-cell-range-container-background-color);
  --calendar-cell-begin-left-color: var(--calendar-cell-normal-background-color);
  --calendar-cell-end-left-color: var(--calendar-cell-range-container-background-color);
  --calendar-cell-today-left-color: var(--calendar-cell-normal-background-color);
  --calendar-cell-normal-right-color: var(--calendar-cell-normal-background-color);
  --calendar-cell-disabled-right-color: var(--calendar-cell-disabled-background-color);
  --calendar-cell-selected-right-color: var(--calendar-cell-normal-background-color);
  --calendar-cell-range-right-color: var(--calendar-cell-range-container-background-color);
  --calendar-cell-begin-right-color: var(--calendar-cell-range-container-background-color);
  --calendar-cell-end-right-color: var(--calendar-cell-normal-background-color);
  --calendar-cell-today-right-color: var(--calendar-cell-normal-background-color);
  --calendar-cell-row-normal-background-color: var(--calendar-cell-normal-background-color);
  --calendar-cell-row-disabled-background-color: var(--calendar-cell-normal-background-color);
  --calendar-cell-row-range-background-color: var(--calendar-cell-range-container-background-color);
  --calendar-cell-row-selected-background-color: var(--calendar-highlight-color);
  --calendar-cell-row-begin-background-color: var(--calendar-highlight-color);
  --calendar-cell-row-end-background-color: var(--calendar-highlight-color);
  --calendar-cell-row-today-background-color: var(--calendar-cell-range-container-background-color);
  --calendar-cell-short-height: calc((var(--calendar-cell-height) * 5 - var(--calendar-content-row-margin-bottom)) / 6);
  --calendar-cell-selected-background-color: var(--calendar-highlight-color);
}

.mt-calendar {
  position: relative;
}
.mt-calendar-header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.mt-calendar-header-select {
  justify-content: flex-end;
  border-top: var(--line-1) solid var(--calendar-header-select-border-color);
  border-bottom: var(--line-1) solid var(--calendar-header-select-border-color);
  padding-top: var(--calendar-header-select-padding);
  padding-bottom: var(--calendar-header-select-padding);
  padding-right: var(--calendar-header-select-padding);
  box-sizing: border-box;
}
.mt-calendar-header-select-title-container {
  text-align: right;
  margin-right: var(--box-medium-spacing);
  font-size: var(--calendar-header-normal-title-size);
  font-weight: bold;
}
.mt-calendar-header-select-title-container-month {
  width: var(--calendar-header-title-month-date-picker-width);
}
.mt-calendar-header-select-title-container-year {
  width: var(--calendar-header-title-year-date-picker-width);
}
.mt-calendar-header-select-title {
  display: inline;
}
.mt-calendar-header-select-title--highlight {
  color: var(--calendar-highlight-color);
}
.mt-calendar-header-select-button-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}
.mt-calendar-header-normal {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  background-color: var(--calendar-header-normal-background-color);
  line-height: var(--calendar-header-height);
  border-bottom: var(--line-1) solid var(--calendar-header-normal-border-color);
}
.mt-calendar-header-normal--highlighted {
  border-bottom-color: transparent;
}
.mt-calendar-header-normal-left-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.mt-calendar-header-normal-right-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.mt-calendar-header-normal-title-text-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.mt-calendar-header-normal-title-text {
  color: var(--calendar-header-normal-title-color);
  font-size: var(--calendar-header-normal-title-size);
  font-weight: bold;
}
.mt-calendar-header-normal-title-text--highlighted {
  color: var(--calendar-highlight-color);
}
.mt-calendar-header-normal-icon {
  color: var(--calendar-header-normal-icon-color);
  line-height: var(--calendar-header-height);
}
.mt-calendar-header-normal-icon.double {
  margin-left: var(--s-5);
  margin-right: var(--s-5);
}
.mt-calendar-header-normal-icon-disabled {
  visibility: hidden;
  color: var(--calendar-header-normal-icon-disabled-color);
}
.mt-calendar-header-normal-icon--only {
  padding: 0 var(--s-5);
}
.mt-calendar-header-arrow {
  transform: rotate(0deg);
  transition: all var(--motion-time-2);
  color: var(--calendar-header-normal-icon-color);
}
.mt-calendar-header-arrow-up {
  transform: rotate(180deg);
  transition: all var(--motion-time-2);
  color: var(--calendar-highlight-color);
}
.mt-calendar-header-picker {
  height: calc(var(--calendar-cell-height) * 5 + var(--calendar-content-row-margin-bottom) * 4 + var(--calendar-content-top-line-height) + var(--calendar-content-top-margin-bottom) + var(--calendar-content-padding-vertical) * 2);
}
.mt-calendar-header-picker--with-time {
  height: calc(var(--calendar-cell-height) * 5 + var(--calendar-content-row-margin-bottom) * 4 + var(--calendar-content-top-line-height) + var(--calendar-content-top-margin-bottom) + var(--calendar-content-padding-vertical) * 2 + var(--calendar-time-picker-height));
}
.mt-calendar-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: var(--calendar-content-padding-vertical) var(--calendar-content-padding-horizon);
  box-sizing: border-box;
}
.mt-calendar-content--no-bottom {
  padding-bottom: 0;
}
.mt-calendar-content-top {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  margin-bottom: var(--calendar-content-top-margin-bottom);
  line-height: var(--calendar-content-top-line-height);
  justify-content: space-between;
}
.mt-calendar-content-top-item {
  font-size: var(--p-body-2-font-size);
  color: var(--color-text1-2);
  text-align: center;
  width: 14.2%;
  width: 14.2857142857%;
}
.mt-calendar-content-real {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.mt-calendar-content-year {
  padding: var(--s-zero) var(--calendar-content-padding-horizon);
  box-sizing: border-box;
}
.mt-calendar-content-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  line-height: var(--calendar-cell-height);
  margin-bottom: var(--calendar-content-row-margin-bottom);
}
.mt-calendar-content-row:last-child {
  margin-bottom: var(--s-zero);
}
.mt-calendar-content-row-year {
  margin: var(--s-zero);
}
.mt-calendar-content-row--short {
  line-height: var(--calendar-cell-short-height);
}
.mt-calendar-cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  text-align: center;
  background-color: var(--color-white);
}
.mt-calendar-cell-year {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  width: calc((100% - var(--calendar-cell-year-margin-horizon) * 6) / 3);
  padding-top: var(--calendar-cell-year-padding-top);
  padding-right: var(--calendar-cell-year-padding-left);
  height: var(--calendar-cell-year-height);
  margin-left: var(--calendar-cell-year-margin-horizon);
  margin-right: var(--calendar-cell-year-margin-horizon);
  box-sizing: border-box;
  transition: all var(--motion-time-2);
}
.mt-calendar-cell-year-normal {
  background-color: var(--calendar-cell-year-normal-background-color);
  border-top: var(--line-solid) var(--line-3) var(--calendar-cell-year-normal-line-color);
}
.mt-calendar-cell-year-disabled {
  background-color: var(--calendar-cell-year-disabled-background-color);
  border-top: var(--line-solid) var(--line-3) var(--calendar-cell-year-disabled-line-color);
}
.mt-calendar-cell-year-selected {
  background-color: var(--calendar-cell-year-selected-background-color);
  border-top: var(--line-solid) var(--line-3) var(--calendar-cell-year-selected-line-color);
}
.mt-calendar-cell-year-current {
  background-color: var(--calendar-cell-year-current-background-color);
  border-top: var(--line-solid) var(--line-3) var(--calendar-cell-year-current-line-color);
}
.mt-calendar-cell-year-range {
  background-color: var(--calendar-cell-year-range-background-color);
  border-top: var(--line-solid) var(--line-3) var(--calendar-cell-year-range-line-color);
}
.mt-calendar-cell-year-begin {
  background-color: var(--calendar-cell-year-begin-background-color);
  border-top: var(--line-solid) var(--line-3) var(--calendar-cell-year-begin-line-color);
}
.mt-calendar-cell-year-end {
  background-color: var(--calendar-cell-year-end-background-color);
  border-top: var(--line-solid) var(--line-3) var(--calendar-cell-year-end-line-color);
}
.mt-calendar-cell-year-today {
  background-color: var(--calendar-cell-year-today-background-color);
  border-top: var(--line-solid) var(--line-3) var(--calendar-cell-year-today-line-color);
}
.mt-calendar-cell-year-firstline-normal {
  border-top: none;
  background-color: var(--calendar-cell-year-normal-background-color);
}
.mt-calendar-cell-year-firstline-disabled {
  border-top: none;
  background-color: var(--calendar-cell-year-disabled-background-color);
}
.mt-calendar-cell-year-firstline-selected {
  border-top: none;
  background-color: var(--calendar-cell-year-selected-background-color);
}
.mt-calendar-cell-year-firstline-current {
  border-top: none;
  background-color: var(--calendar-cell-year-current-background-color);
}
.mt-calendar-cell-year-firstline-range {
  border-top: none;
  background-color: var(--calendar-cell-year-range-background-color);
}
.mt-calendar-cell-year-firstline-begin {
  border-top: none;
  background-color: var(--calendar-cell-year-begin-background-color);
}
.mt-calendar-cell-year-firstline-end {
  border-top: none;
  background-color: var(--calendar-cell-year-end-background-color);
}
.mt-calendar-cell-year-firstline-today {
  border-top: none;
  background-color: var(--calendar-cell-year-today-background-color);
}
.mt-calendar-cell-year-text-normal {
  color: var(--calendar-cell-year-normal-text-color);
  font-size: var(--calendar-cell-year-font-size);
  line-height: 1;
  text-align: end;
}
.mt-calendar-cell-year-text-disabled {
  color: var(--calendar-cell-year-disabled-text-color);
  font-size: var(--calendar-cell-year-font-size);
  line-height: 1;
  text-align: end;
}
.mt-calendar-cell-year-text-selected {
  color: var(--calendar-cell-year-selected-text-color);
  font-size: var(--calendar-cell-year-font-size);
  line-height: 1;
  text-align: end;
}
.mt-calendar-cell-year-text-current {
  color: var(--calendar-cell-year-current-text-color);
  font-size: var(--calendar-cell-year-font-size);
  line-height: 1;
  text-align: end;
}
.mt-calendar-cell-year-text-range {
  color: var(--calendar-cell-year-range-text-color);
  font-size: var(--calendar-cell-year-font-size);
  line-height: 1;
  text-align: end;
}
.mt-calendar-cell-year-text-begin {
  color: var(--calendar-cell-year-begin-text-color);
  font-size: var(--calendar-cell-year-font-size);
  line-height: 1;
  text-align: end;
}
.mt-calendar-cell-year-text-end {
  color: var(--calendar-cell-year-end-text-color);
  font-size: var(--calendar-cell-year-font-size);
  line-height: 1;
  text-align: end;
}
.mt-calendar-cell-year-text-today {
  color: var(--calendar-cell-year-today-text-color);
  font-size: var(--calendar-cell-year-font-size);
  line-height: 1;
  text-align: end;
}
.mt-calendar-cell-month, .mt-calendar-cell-week {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;
  position: relative;
}
.mt-calendar-cell-month--short {
  height: var(--calendar-cell-short-height);
}
.mt-calendar-cell-left-normal {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  background-color: var(--calendar-cell-normal-left-color);
}
.mt-calendar-cell-left-disabled {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  background-color: var(--calendar-cell-disabled-left-color);
}
.mt-calendar-cell-left-selected {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  background-color: var(--calendar-cell-selected-left-color);
}
.mt-calendar-cell-left-current {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  background-color: var(--calendar-cell-current-left-color);
}
.mt-calendar-cell-left-range {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  background-color: var(--calendar-cell-range-left-color);
}
.mt-calendar-cell-left-begin {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  background-color: var(--calendar-cell-begin-left-color);
}
.mt-calendar-cell-left-end {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  background-color: var(--calendar-cell-end-left-color);
}
.mt-calendar-cell-left-today {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  background-color: var(--calendar-cell-today-left-color);
}
.mt-calendar-cell-right-normal {
  position: absolute;
  width: 50%;
  height: 100%;
  right: var(--s-zero);
  background-color: var(--calendar-cell-normal-right-color);
}
.mt-calendar-cell-right-disabled {
  position: absolute;
  width: 50%;
  height: 100%;
  right: var(--s-zero);
  background-color: var(--calendar-cell-disabled-right-color);
}
.mt-calendar-cell-right-selected {
  position: absolute;
  width: 50%;
  height: 100%;
  right: var(--s-zero);
  background-color: var(--calendar-cell-selected-right-color);
}
.mt-calendar-cell-right-current {
  position: absolute;
  width: 50%;
  height: 100%;
  right: var(--s-zero);
  background-color: var(--calendar-cell-current-right-color);
}
.mt-calendar-cell-right-range {
  position: absolute;
  width: 50%;
  height: 100%;
  right: var(--s-zero);
  background-color: var(--calendar-cell-range-right-color);
}
.mt-calendar-cell-right-begin {
  position: absolute;
  width: 50%;
  height: 100%;
  right: var(--s-zero);
  background-color: var(--calendar-cell-begin-right-color);
}
.mt-calendar-cell-right-end {
  position: absolute;
  width: 50%;
  height: 100%;
  right: var(--s-zero);
  background-color: var(--calendar-cell-end-right-color);
}
.mt-calendar-cell-right-today {
  position: absolute;
  width: 50%;
  height: 100%;
  right: var(--s-zero);
  background-color: var(--calendar-cell-today-right-color);
}
.mt-calendar-cell-text {
  height: var(--calendar-cell-height);
  width: var(--calendar-cell-height);
  z-index: var(--elevation-1);
  border-radius: var(--corner-semicircle);
  margin: auto;
  text-align: center;
}
.mt-calendar-cell-text--short {
  width: var(--calendar-cell-short-height);
  height: var(--calendar-cell-short-height);
}
.mt-calendar-cell-text-normal {
  background-color: var(--calendar-cell-normal-background-color);
  color: var(--calendar-cell-normal-text-color);
}
.mt-calendar-cell-text-disabled {
  background-color: var(--calendar-cell-disabled-background-color);
  color: var(--calendar-cell-disabled-text-color);
}
.mt-calendar-cell-text-selected {
  background-color: var(--calendar-cell-selected-background-color);
  color: var(--calendar-cell-selected-text-color);
}
.mt-calendar-cell-text-current {
  background-color: var(--calendar-cell-current-background-color);
  color: var(--calendar-cell-current-text-color);
}
.mt-calendar-cell-text-range {
  background-color: var(--calendar-cell-range-background-color);
  color: var(--calendar-cell-range-text-color);
}
.mt-calendar-cell-text-begin {
  background-color: var(--calendar-cell-begin-background-color);
  color: var(--calendar-cell-begin-text-color);
}
.mt-calendar-cell-text-end {
  background-color: var(--calendar-cell-end-background-color);
  color: var(--calendar-cell-end-text-color);
}
.mt-calendar-cell-text-today {
  background-color: var(--calendar-cell-today-background-color);
  color: var(--calendar-cell-today-text-color);
}
.mt-calendar-cell-text-selected, .mt-calendar-cell-text-today, .mt-calendar-cell-text-disabled, .mt-calendar-cell-text-begin, .mt-calendar-cell-text-end {
  transition: all var(--motion-time-2);
}
.mt-calendar-cell-row-end-right-normal {
  background-color: var(--calendar-cell-normal-background-color);
}
.mt-calendar-cell-row-end-right-disabled {
  background-color: var(--calendar-cell-normal-background-color);
}
.mt-calendar-cell-row-end-right-selected {
  background-color: var(--calendar-cell-normal-background-color);
}
.mt-calendar-cell-row-end-right-current {
  background-color: var(--calendar-cell-normal-background-color);
}
.mt-calendar-cell-row-end-right-range {
  background-color: var(--calendar-cell-normal-background-color);
}
.mt-calendar-cell-row-end-right-begin {
  background-color: var(--calendar-cell-normal-background-color);
}
.mt-calendar-cell-row-end-right-end {
  background-color: var(--calendar-cell-normal-background-color);
}
.mt-calendar-cell-row-end-right-today {
  background-color: var(--calendar-cell-normal-background-color);
}
.mt-calendar-cell-row-end-text-normal {
  background-color: var(--calendar-cell-row-normal-background-color);
}
.mt-calendar-cell-row-end-text-disabled {
  background-color: var(--calendar-cell-row-disabled-background-color);
}
.mt-calendar-cell-row-end-text-selected {
  background-color: var(--calendar-cell-row-selected-background-color);
}
.mt-calendar-cell-row-end-text-current {
  background-color: var(--calendar-cell-row-current-background-color);
}
.mt-calendar-cell-row-end-text-range {
  background-color: var(--calendar-cell-row-range-background-color);
}
.mt-calendar-cell-row-end-text-begin {
  background-color: var(--calendar-cell-row-begin-background-color);
}
.mt-calendar-cell-row-end-text-end {
  background-color: var(--calendar-cell-row-end-background-color);
}
.mt-calendar-cell-row-end-text-today {
  background-color: var(--calendar-cell-row-today-background-color);
}
.mt-calendar-cell-row-begin-left-normal {
  background-color: var(--calendar-cell-normal-background-color);
}
.mt-calendar-cell-row-begin-left-disabled {
  background-color: var(--calendar-cell-normal-background-color);
}
.mt-calendar-cell-row-begin-left-selected {
  background-color: var(--calendar-cell-normal-background-color);
}
.mt-calendar-cell-row-begin-left-current {
  background-color: var(--calendar-cell-normal-background-color);
}
.mt-calendar-cell-row-begin-left-range {
  background-color: var(--calendar-cell-normal-background-color);
}
.mt-calendar-cell-row-begin-left-begin {
  background-color: var(--calendar-cell-normal-background-color);
}
.mt-calendar-cell-row-begin-left-end {
  background-color: var(--calendar-cell-normal-background-color);
}
.mt-calendar-cell-row-begin-left-today {
  background-color: var(--calendar-cell-normal-background-color);
}
.mt-calendar-cell-row-begin-text-normal {
  background-color: var(--calendar-cell-row-normal-background-color);
}
.mt-calendar-cell-row-begin-text-disabled {
  background-color: var(--calendar-cell-row-disabled-background-color);
}
.mt-calendar-cell-row-begin-text-selected {
  background-color: var(--calendar-cell-row-selected-background-color);
}
.mt-calendar-cell-row-begin-text-current {
  background-color: var(--calendar-cell-row-current-background-color);
}
.mt-calendar-cell-row-begin-text-range {
  background-color: var(--calendar-cell-row-range-background-color);
}
.mt-calendar-cell-row-begin-text-begin {
  background-color: var(--calendar-cell-row-begin-background-color);
}
.mt-calendar-cell-row-begin-text-end {
  background-color: var(--calendar-cell-row-end-background-color);
}
.mt-calendar-cell-row-begin-text-today {
  background-color: var(--calendar-cell-row-today-background-color);
}
.mt-calendar-cell-contain-bottom-normal {
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: var(--s-zero);
  z-index: 100;
}
.mt-calendar-cell-contain-bottom-disabled {
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: var(--s-zero);
  z-index: 100;
}
.mt-calendar-cell-contain-bottom-selected {
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: var(--s-zero);
  z-index: 100;
}
.mt-calendar-cell-contain-bottom-current {
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: var(--s-zero);
  z-index: 100;
}
.mt-calendar-cell-contain-bottom-range {
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: var(--s-zero);
  z-index: 100;
}
.mt-calendar-cell-contain-bottom-begin {
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: var(--s-zero);
  z-index: 100;
}
.mt-calendar-cell-contain-bottom-end {
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: var(--s-zero);
  z-index: 100;
}
.mt-calendar-cell-contain-bottom-today {
  position: absolute;
  width: 100%;
  height: 50%;
  bottom: var(--s-zero);
  z-index: 100;
}
.mt-calendar-cell-contain-right-normal {
  position: absolute;
  width: 50%;
  height: 100%;
  right: var(--s-zero);
  z-index: 100;
}
.mt-calendar-cell-contain-right-disabled {
  position: absolute;
  width: 50%;
  height: 100%;
  right: var(--s-zero);
  z-index: 100;
}
.mt-calendar-cell-contain-right-selected {
  position: absolute;
  width: 50%;
  height: 100%;
  right: var(--s-zero);
  z-index: 100;
}
.mt-calendar-cell-contain-right-current {
  position: absolute;
  width: 50%;
  height: 100%;
  right: var(--s-zero);
  z-index: 100;
}
.mt-calendar-cell-contain-right-range {
  position: absolute;
  width: 50%;
  height: 100%;
  right: var(--s-zero);
  z-index: 100;
}
.mt-calendar-cell-contain-right-begin {
  position: absolute;
  width: 50%;
  height: 100%;
  right: var(--s-zero);
  z-index: 100;
}
.mt-calendar-cell-contain-right-end {
  position: absolute;
  width: 50%;
  height: 100%;
  right: var(--s-zero);
  z-index: 100;
}
.mt-calendar-cell-contain-right-today {
  position: absolute;
  width: 50%;
  height: 100%;
  right: var(--s-zero);
  z-index: 100;
}
.mt-calendar-tp-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: var(--calendar-time-picker-height);
  box-sizing: content-box;
  padding: 0vw var(--s-7) var(--calendar-content-padding-vertical);
}
.mt-calendar-tp-label {
  color: var(--calendar-time-picker-font-color);
  font-size: var(--p-body-2-font-size);
}
.mt-calendar-tp-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border-radius: var(--calendar-time-picker-corner);
  padding: var(--box-medium-spacing);
  background-color: var(--calendar-time-picker-bg-color);
  color: var(--calendar-time-picker-font-color);
}
.mt-calendar-tp-wrapper--active {
  background: var(--calendar-highlight-color);
  color: var(--calendar-time-picker-active-color);
}
.mt-calendar-tp-time {
  font-size: var(--p-body-2-font-size);
}
.mt-calendar-tp-picker {
  height: calc(var(--calendar-cell-height) * 5 + var(--calendar-content-row-margin-bottom) * 4 + var(--calendar-content-top-line-height) + var(--calendar-content-top-margin-bottom) + var(--calendar-content-padding-vertical) + var(--calendar-header-height) + var(--line-1));
}
.mt-calendar-tp-arrow {
  color: var(--calendar-time-picker-icon-color);
  font-size: var(--p-body-2-font-size);
  transition: all var(--motion-time-2);
}
.mt-calendar-tp-arrow--active {
  transform: rotate(180deg);
  transition: all var(--motion-time-2);
  color: var(--calendar-time-picker-active-color);
}