.data-ant-date-picker-host .ant-date-filter {
  width: 100%;
}

.data-ant-date-picker-host .ant-date-filter.ant-picker {
  width: 100%;
  height: 44px !important;
  min-height: 44px !important;
  padding-inline: 12px !important;
  border-radius: 10px;
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-overlay) 70%, var(--bg-raised) 30%);
  box-shadow: none;
  display: flex;
  align-items: center;
}

.data-ant-date-picker-host .ant-date-filter .ant-picker-input {
  height: 100%;
  display: flex;
  align-items: center;
}

.data-ant-date-picker-host .ant-date-filter.ant-picker:hover {
  border-color: color-mix(in srgb, var(--blue-border) 42%, var(--border) 58%);
}

.data-ant-date-picker-host .ant-date-filter.ant-picker.ant-picker-focused,
.data-ant-date-picker-host .ant-date-filter.ant-picker:focus-within {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--bg) 82%, var(--bg-overlay) 18%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-bg) 72%, transparent 28%);
}

.data-ant-date-picker-host .ant-date-filter .ant-picker-input > input {
  height: 100%;
  line-height: 20px;
  font-size: 14px !important;
  color: var(--text);
}

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

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

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