<div class="field">
  <input class="input" type="text" value="text field">
</div>
<div class="field">
  <input disabled class="input" type="text" value="disabled text field">
</div>

<div class="field">
  <input class="input" type="text" placeholder="address@domain.com">
</div>
<div class="field">
  <input class="input" type="date">
</div>
<div class="field">
  <input class="input" type="password" placeholder="password field">
</div>
<div class="field">
  <input class="input" type="number" placeholder="number field">
</div>
<div class="field">
  <input class="input" type="file">
</div>

<div class="field">
  <textarea class="input" cols="30" rows="10"></textarea>
</div>

<div class="field">
  <input class="input error" type="text" value="invalid value">
</div>

<div class="field">
  <div class="input">Fake input</div>
</div>

<div class="field">
  <div class="input -disabled">Fake disabled input</div>
</div>

.input {
  background-color: var(--accent-gray-50);
  border-radius: var(--root-border-radius);
  border: 2px solid var(--accent-color);
  color: var(--color-gray-800);
  display: inline-block;
  padding: .5em 1em;
  width: 100%;

  @layer TemporaryLayerToRefactorAwayLater {
    --accent-color: var(--color-gray-500);
  }

  &:focus {
    --accent-color: inherit;
    outline: none;
  }

  &::placeholder {
    color: var(--color-gray-400);
  }

  &[aria-disabled="true"],
  &[disabled],
  &.-disabled {
    color: var(--root-color-inactive);
    cursor: initial;
    pointer-events: none;
    user-select: none;
  }

  &:is(textarea) {
    display: block;
    resize: vertical;
  }

  /* Normalize date input padding to match others. */
  &[type=date] {
    padding: calc(.5em - 1px) 1em;
  }


  /* Normalize file input padding to match others. */
  &[type=file] {
    padding: calc(.5em - 3px) 1em;
  }
}