input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  cursor: pointer;
  position: relative;
}

input[type="date"]:not(.ew-input--icon),
input[type="datetime-local"]:not(.ew-input--icon),
input[type="month"]:not(.ew-input--icon),
input[type="week"]:not(.ew-input--icon) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.8'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18M8 2v4M16 2v4'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  padding-right: 2.25rem;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  background: transparent;
  color: transparent;
  cursor: pointer;
  height: 100%;
  inset: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  width: 100%;
}

input[type="date"]:disabled,
input[type="datetime-local"]:disabled,
input[type="month"]:disabled,
input[type="week"]:disabled,
input[type="date"][readonly],
input[type="datetime-local"][readonly],
input[type="month"][readonly],
input[type="week"][readonly] {
  cursor: not-allowed;
}

html[data-theme="dark"] input[type="date"]:not(.ew-input--icon),
html[data-theme="dark"] input[type="datetime-local"]:not(.ew-input--icon),
html[data-theme="dark"] input[type="month"]:not(.ew-input--icon),
html[data-theme="dark"] input[type="week"]:not(.ew-input--icon),
body.is-dark-mode input[type="date"]:not(.ew-input--icon),
body.is-dark-mode input[type="datetime-local"]:not(.ew-input--icon),
body.is-dark-mode input[type="month"]:not(.ew-input--icon),
body.is-dark-mode input[type="week"]:not(.ew-input--icon),
body[data-background-color="dark"] input[type="date"]:not(.ew-input--icon),
body[data-background-color="dark"] input[type="datetime-local"]:not(.ew-input--icon),
body[data-background-color="dark"] input[type="month"]:not(.ew-input--icon),
body[data-background-color="dark"] input[type="week"]:not(.ew-input--icon),
body[data-background-color="dark2"] input[type="date"]:not(.ew-input--icon),
body[data-background-color="dark2"] input[type="datetime-local"]:not(.ew-input--icon),
body[data-background-color="dark2"] input[type="month"]:not(.ew-input--icon),
body[data-background-color="dark2"] input[type="week"]:not(.ew-input--icon) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='1.8'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18M8 2v4M16 2v4'/%3E%3C/svg%3E");
}