.input,
.input-autogrow::after {
  display: block;
  width: 100%;
  max-width: var(--max-width, 100%);
  padding: 0.5em 0.8em;
  min-height: 40px;
  border-radius: var(--border-radius);
  border: solid 1px var(--color-line);
  color: var(--color-input-text);
  background: var(--color-input-bg);
  font: var(--font-ui);

  &:focus-visible {
    border-color: var(--color-primary);
  }

  &:user-invalid {
    border-color: var(--color-error);
  }

  &:read-only {
    color: var(--color-dim);
    background: none;
  }

  &.is-narrow {
    max-width: 300px;
  }
  &.is-xnarrow {
    max-width: 150px;
  }
}
.input[type="color"] {
  width: 80px;
  padding: 4px;
}
.input[type="datetime-local"] {
  max-width: 16em;
}
.input[type="date"] {
  max-width: 11em;
}
.input[type="time"] {
  max-width: 5em;
}
.input[type="number"] {
  max-width: 11em;
}

textarea.input {
  resize: vertical;
  height: auto;
  min-height: 70px;
}

.input-autogrow {
  display: grid;

  &::after {
    content: attr(data-replicated-value) " ";
    white-space: pre-wrap;
    visibility: hidden;
    grid-area: 1 / 1 / 2 / 2;
  }

  > textarea {
    resize: none;
    overflow: hidden;
    grid-area: 1 / 1 / 2 / 2;
  }
}

.input-file {
  font: var(--font-ui);
  letter-spacing: 0;
  display: flex;
  white-space: nowrap;
  align-items: center;
  color: var(--color-dim);
  padding-left: 0.8em;
  border-radius: var(--border-radius);
  flex: 1 1 auto;
  border: solid 1px var(--color-line-light);
  min-height: 40px;

  & input {
    border: none;
    padding-left: 0;
    flex: 1 1 200px;
    color: var(--color-dim);
    background: none;
    min-height: 38px;

    &:focus-visible {
      box-shadow: none;
    }
  }

  &:focus-within {
    background-color: var(--color-input-bg);
    border: solid 1px var(--color-line);
    box-shadow: 0 0 0 3px
      color-mix(in hsl, var(--color-primary), transparent 75%);
  }
  &:has(input[required]:placeholder-shown) {
    background-color: var(--color-input-bg);
    border: solid 1px var(--color-line);
  }

  &:has(input[type="hidden"]) {
    display: none;
  }
}