.book-ant-date-time-host .book-ant-date-time-picker {
  width: 100%;
}

.book-ant-date-time-host .book-ant-date-time-picker.ant-picker {
  width: 100%;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
  background: color-mix(in srgb, white 88%, var(--panel) 12%);
  box-shadow: none;
  display: flex;
  align-items: center;
  overflow: visible;
}

.book-ant-date-time-host .book-ant-date-time-picker .ant-picker-input {
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.book-ant-date-time-host .book-ant-date-time-picker.ant-picker:hover {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line) 56%);
}

.book-ant-date-time-host .book-ant-date-time-picker.ant-picker.ant-picker-focused,
.book-ant-date-time-host .book-ant-date-time-picker.ant-picker:focus-within {
  border-color: var(--accent);
  background: color-mix(in srgb, white 94%, var(--accent-soft) 6%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 72%, transparent 28%);
}

.book-ant-date-time-host .book-ant-date-time-picker .ant-picker-input > input {
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  line-height: 22px !important;
  font-size: 14px !important;
  color: var(--text);
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible;
}

.book-ant-date-time-host .book-ant-date-time-picker .ant-picker-input > input::selection {
  border-radius: 0;
}

.book-ant-date-time-host .book-ant-date-time-picker .ant-picker-input > input::placeholder {
  color: var(--text-muted);
}

.book-ant-date-time-host .book-ant-date-time-picker .ant-picker-suffix,
.book-ant-date-time-host .book-ant-date-time-picker .ant-picker-clear {
  color: var(--text-muted);
}

.book-ant-date-time-panel .ant-picker-panel-container,
.book-ant-date-time-panel .ant-picker-presets {
  background: color-mix(in srgb, var(--panel) 92%, white 8%);
}

.book-ant-date-time-panel .ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
  color: white !important;
  background: color-mix(in srgb, var(--text) 92%, black 8%) !important;
}

.book-ant-date-time-panel .ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected:hover .ant-picker-time-panel-cell-inner {
  color: white !important;
}