.dp-input {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: var(--text-primary);
  background-color: var(--surface-neutral);
  border: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  outline: none;
  padding: 0 var(--space-1);
  margin: 0;
  vertical-align: baseline;
  box-shadow: inset 0 -1.5px 0 var(--text-tertiary);
  transition: background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);

  min-width: 5ch;
  max-width: min(36ch, calc(100vw - var(--space-8)));
  field-sizing: content;

  scrollbar-width: none;
}
.dp-input::-webkit-scrollbar { display: none; width: 0; height: 0; }
.dp-input::placeholder { color: var(--text-tertiary); font-style: italic; }
.dp-input:hover { background-color: var(--accent-subtle); }
.dp-input:focus {
  background-color: var(--accent-subtle);
  box-shadow: inset 0 -2px 0 var(--accent-primary);
}

.dp-input--overflowing {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), rgba(0, 0, 0, 0.35) 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 14px), rgba(0, 0, 0, 0.35) 100%);
}

.dp-input--required {
  box-shadow: inset 0 -1.5px 0 var(--text-secondary);
}
.dp-input--required:focus {
  box-shadow: inset 0 -2px 0 var(--accent-primary);
}

.dp-input--invalid {
  background-color: var(--status-error-bg);
  box-shadow: inset 0 -1.5px 0 var(--status-error);
}

.dp-input[type="number"]::-webkit-outer-spin-button,
.dp-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dp-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.dp-input[type="date"]::-webkit-calendar-picker-indicator,
.dp-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0.4;
  cursor: pointer;
}

.dp-input--boolean-wrap {
  display: inline-flex;
  align-items: center;
  background-color: var(--surface-neutral);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 0 var(--space-1-5);
  vertical-align: baseline;
  box-shadow: inset 0 -1.5px 0 var(--text-tertiary);
  transition: background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.dp-input--boolean-wrap:hover { background-color: var(--accent-subtle); }
.dp-input--boolean-wrap:focus-within {
  background-color: var(--accent-subtle);
  box-shadow: inset 0 -2px 0 var(--accent-primary);
}
.dp-input--boolean-wrap input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent-primary);
  cursor: pointer;
}
.dp-input--boolean-wrap.dp-input--required {
  box-shadow: inset 0 -1.5px 0 var(--text-secondary);
}
.dp-input--boolean-wrap.dp-input--invalid {
  background-color: var(--status-error-bg);
  box-shadow: inset 0 -1.5px 0 var(--status-error);
}

.dp-input--image-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  vertical-align: baseline;
}
.dp-input--image-wrap.dp-input--invalid {
  box-shadow: inset 0 -1.5px 0 var(--status-error);
}