@opensig/opendesign/lib/date-picker/style/index.css

.o-date-picker {
  --date-range-picker-bg-color-focus: var(--o-color-control2-light);
}

.o-date-panel {
  --date-panel-bg: var(--o-color-fill2);
  --date-panel-shadow: var(--o-shadow-2);
  --date-panel-operation-padding-x: 28px;
  --date-panel-operation-height: 40px;
  --date-panel-operation-text-size: var(--o-font_size-tip1);
  --date-panel-operation-text-height: var(--o-line_height-tip1);
  --date-panel-text-size: var(--o-font_size-tip1);
  --date-panel-text-height: var(--o-line_height-text1);
  --date-panel-shortcut-text-size: var(--o-font_size-tip1);
  --date-panel-shortcut-text-height: var(--o-line_height-tip1);
  --date-panel-body-padding-date: 16px 16px 8px 16px;
  --date-panel-body-padding-month: 12px 28px;
  --date-panel-body-padding-year: 12px 32px;
  --date-panel-cell-gap-date-x: 0px;
  --date-panel-cell-gap-date-y: 8px;
  --date-panel-cell-gap-month-x: 32px;
  --date-panel-cell-gap-month-y: 12px;
  --date-panel-cell-gap-year-x: 40px;
  --date-panel-cell-gap-year-y: 12px;
  --date-panel-cell-width-date: 40px;
  --date-panel-cell-width-month: 64px;
  --date-panel-cell-width-year: 56px;
  --date-panel-cell-color: var(--o-color-info1);
  --date-panel-cell-color-active: var(--o-color-info1-inverse);
  --date-panel-cell-color-disabled: var(--o-color-info4);
  --date-panel-cell-bg-hover: var(--o-color-control2-light);
  --date-panel-cell-bg-active: var(--o-color-primary1);
  --date-panel-cell-bg-range: var(--o-color-control2-light);
  --date-panel-cell-today-bd-color: var(--o-color-primary1);
}

.o-date-panel-large {
  --date-panel-operation-padding-x: 24px;
  --date-panel-operation-height: 48px;
  --date-panel-operation-text-size: var(--o-font_size-text1);
  --date-panel-operation-text-height: var(--o-line_height-text1);
  --date-panel-text-size: var(--o-font_size-text1);
  --date-panel-body-padding-date: 16px 16px 8px 16px;
  --date-panel-body-padding-month: 16px 28px;
  --date-panel-body-padding-year: 16px 32px;
  --date-panel-cell-gap-date-x: 0px;
  --date-panel-cell-gap-date-y: 12px;
  --date-panel-cell-gap-month-x: 32px;
  --date-panel-cell-gap-month-y: 16px;
  --date-panel-cell-gap-year-x: 40px;
  --date-panel-cell-gap-year-y: 16px;
  --time-panel-col-show-item-count: 9;
}

.o-date-panel-touch {
  --date-panel-width: 100%;
  --time-panel-col-show-item-count: 5;
}

.o-date-picker .o_input-suffix-icon {
  font-size: var(--icon-size);
  color: var(--o-color-info2);
}
.o-date-picker .o_box-disabled .o_input-suffix-icon {
  color: var(--color-disabled);
}
@media (hover: hover) {
  .o-date-picker .o_box-focused .o_input-clearable .o_input-suffix-icon {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.5);
  }
  .o-date-picker .o_box-focused .o_input-clearable .o_input-clear {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
  }
}
@media (hover: hover) {
  .o-date-picker.o_input-clearable .o_box-focused .o_input-suffix-icon {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.5);
  }
  .o-date-picker.o_input-clearable .o_box-focused .o_input-clear {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
  }
}

.o-date-panel {
  user-select: none;
  background-color: var(--date-panel-bg);
  color: var(--date-panel-cell-color);
  border-radius: var(--o-radius-m);
  box-shadow: var(--date-panel-shadow);
  font-size: var(--date-panel-text-size);
  line-height: var(--date-panel-text-height);
}

.o-date-panel-divider {
  --o-divider-gap: 0;
}

.o-date-panel-divider-v {
  --o-divider-label-gap: 0px;
  height: unset;
}

.o-date-panel-content {
  padding: var(--date-panel-content-padding);
}

.o-date-panel-header,
.o-date-panel-footer {
  --date-panel-text-size: var(--date-panel-operation-text-size);
  --date-panel-text-height: var(--date-panel-operation-text-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding-left: var(--date-panel-operation-padding-x);
  padding-right: var(--date-panel-operation-padding-x);
  height: var(--date-panel-operation-height);
}

.o-date-panel-footer .o-link:not(:last-child) {
  margin-right: 16px;
}

.o-date-panel-shortcut {
  font-size: var(--date-panel-shortcut-text-size);
  line-height: var(--date-panel-shortcut-text-height);
}
.o-date-panel-shortcut:only-child {
  margin: 0 auto;
}
.o-date-panel-shortcut.hidden {
  visibility: hidden;
}

.o-date-panel-calendar,
.o-date-panel-months,
.o-date-panel-years {
  display: grid;
  text-align: center;
  font-size: var(--date-panel-text-size);
  line-height: var(--date-panel-text-height);
  align-items: center;
  grid-template-columns: calc(var(--item-width) + var(--item-padding-x) / 2) repeat(calc(var(--item-count-per-row) - 2), calc(var(--item-width) + var(--item-padding-x))) calc(var(--item-width) + var(--item-padding-x) / 2);
}
.o-date-panel-calendar .o-date-panel-cell,
.o-date-panel-months .o-date-panel-cell,
.o-date-panel-years .o-date-panel-cell {
  padding-left: calc(var(--item-padding-x) / 2);
  padding-right: calc(var(--item-padding-x) / 2);
}

.o-date-panel-calendar {
  --item-count-per-row: 7;
  --item-width: var(--date-panel-cell-width-date);
  --item-padding-x: var(--date-panel-cell-gap-date-x);
  padding: var(--date-panel-body-padding-date);
  row-gap: var(--date-panel-cell-gap-date-y);
}
.o-date-panel-calendar .o-date-panel-cell:nth-of-type(7n) {
  padding-right: unset;
}
.o-date-panel-calendar .o-date-panel-cell:nth-of-type(7n + 1) {
  padding-left: unset;
}

.o-date-panel-months {
  --item-count-per-row: 3;
  --item-width: var(--date-panel-cell-width-month);
  --item-padding-x: var(--date-panel-cell-gap-month-x);
  padding: var(--date-panel-body-padding-month);
  row-gap: var(--date-panel-cell-gap-month-y);
}
.o-date-panel-months .o-date-panel-cell:nth-of-type(3n) {
  padding-right: unset;
}
.o-date-panel-months .o-date-panel-cell:nth-of-type(3n + 1) {
  padding-left: unset;
}

.o-date-panel-years {
  --item-count-per-row: 3;
  --item-width: var(--date-panel-cell-width-year);
  --item-padding-x: var(--date-panel-cell-gap-year-x);
  padding: var(--date-panel-body-padding-year);
  row-gap: var(--date-panel-cell-gap-year-y);
}
.o-date-panel-years .o-date-panel-cell:nth-of-type(3n) {
  padding-right: unset;
}
.o-date-panel-years .o-date-panel-cell:nth-of-type(3n + 1) {
  padding-left: unset;
}

.o-date-panel .o-date-panel-header-direction {
  display: flex;
  align-items: center;
  gap: 4px;
}
.o-date-panel .o-date-panel-header-label-btn,
.o-date-panel .o-data-panel-header-time-label {
  --btn-min-width: none;
  padding-left: 8px;
  padding-right: 8px;
  font-weight: 600;
}
.o-date-panel .o-date-panel-btn {
  --btn-height: var(--date-panel-text-height);
  --btn-color-hover: var(--date-panel-cell-color);
  --btn-bg-color: transparent;
  --btn-bd-color: var(--btn-bg-color);
  --btn-bd-color-hover: var(--btn-bg-color-hover);
  --btn-color: var(--date-panel-cell-color);
  --btn-bg-color-disabled: transparent;
  border: 1px solid var(--btn-bd-color);
  font-size: var(--date-panel-text-size);
  line-height: calc(var(--date-panel-text-height) - 2px);
}
@media (hover: hover) {
  .o-date-panel .o-date-panel-btn:hover {
    border: 1px solid var(--btn-bd-color-hover);
  }
}
.o-date-panel .o-date-panel-btn.o-btn-disabled {
  --btn-bd-color-hover: var(--btn-bg-color-disabled);
}
.o-date-panel .o-date-panel-btn:not(.o-date-panel-header-btn) {
  --btn-min-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.o-date-panel .o-date-panel-header-btn.hidden {
  visibility: hidden;
}
.o-date-panel .is-other-period .o-date-panel-btn {
  --btn-color: var(--date-panel-cell-color-disabled);
}
.o-date-panel .is-current .o-date-panel-btn {
  --btn-bd-color: var(--date-panel-cell-today-bd-color);
}
.o-date-panel .is-selected .o-date-panel-btn {
  --btn-bg-color: var(--date-panel-cell-bg-active);
  --btn-bg-color-hover: var(--date-panel-cell-bg-active);
  --btn-color: var(--date-panel-cell-color-active);
  --btn-color-hover: var(--date-panel-cell-color-active);
}
.o-date-panel .is-in-range {
  background-color: var(--date-panel-cell-bg-range);
}
.o-date-panel .is-range-start .o-date-panel-btn,
.o-date-panel .is-range-end .o-date-panel-btn {
  --btn-bg-color: var(--date-panel-cell-bg-active);
  --btn-bg-color-hover: var(--date-panel-cell-bg-active);
  --btn-color: var(--date-panel-cell-color-active);
  --btn-color-hover: var(--date-panel-cell-color-active);
  font-weight: 500;
}
.o-date-panel .is-range-start {
  background: linear-gradient(to right, transparent 0% 50%, var(--date-panel-cell-bg-range) 50% 100%);
  border-radius: calc(var(--date-panel-cell-size) / 2) 0 0 calc(var(--date-panel-cell-size) / 2);
}
.o-date-panel .is-range-end {
  background: linear-gradient(to right, var(--date-panel-cell-bg-range) 0% 50%, transparent 50% 100%);
  border-radius: 0 calc(var(--date-panel-cell-size) / 2) calc(var(--date-panel-cell-size) / 2) 0;
}
.o-date-panel .is-range-start.is-range-end {
  border-radius: var(--o-radius-l);
  background: none;
}

.o-date-panel-touch .o-date-panel-column-scroller + .o-date-panel-column-scroller:before {
  display: none;
}
.o-date-panel-touch .o-tab-button {
  --tab-nav-justify: center;
}

.o-date-range-picker .o-input-wrap {
  flex: 1;
  min-width: 0;
}
.o-date-range-picker .o-input-wrap-focused {
  background-color: var(--date-range-picker-bg-color-focus);
}
.o-date-range-picker .o_input-suffix-icon {
  font-size: var(--icon-size);
  color: var(--o-color-info2);
}

.o-date-range-picker-divider {
  flex-shrink: 0;
  width: 16px;
  margin: 0 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--o-color-info4);
  pointer-events: none;
}

.o-date-range-panel {
  width: calc(var(--date-panel-width) * 2 + 1px);
}

.o-date-range-panel-body {
  display: flex;
  align-items: stretch;
}

.o-date-range-panel-side {
  flex: 1;
  min-width: 0;
}

.o-date-range-panel-separator {
  width: 1px;
  background-color: var(--o-color-control2);
  flex-shrink: 0;
  margin: var(--date-panel-content-padding) 0;
}

.o-date-panel-body {
  display: block;
}

.o-date-panel-body-datetime {
  display: flex;
  align-items: stretch;
}

.o-date-panel-date-side {
  flex: 1 0 auto;
  min-width: 0;
}

.o-date-panel-time-aside {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}
.o-date-panel-time-aside .o-date-panel-header {
  justify-content: center;
}

@media (min-width: 841px) and (max-width: 1680px) {
  .o-date-panel-large:not(.o-date-panel-touch) {
    --date-panel-operation-padding-x: 28px;
    --date-panel-operation-height: 40px;
    --date-panel-operation-text-size: var(--o-font_size-tip1);
    --date-panel-operation-text-height: var(--o-line_height-tip1);
    --date-panel-text-size: var(--o-font_size-tip1);
    --date-panel-body-padding-date: 12px 16px 8px 16px;
    --date-panel-body-padding-month: 12px 28px;
    --date-panel-body-padding-year: 12px 32px;
    --date-panel-cell-gap-date-x: 0px;
    --date-panel-cell-gap-date-y: 8px;
    --date-panel-cell-gap-month-x: 32px;
    --date-panel-cell-gap-month-y: 12px;
    --date-panel-cell-gap-year-x: 40px;
    --date-panel-cell-gap-year-y: 12px;
  }
}