::placeholder
{
  color: var(--color-fg-light);
}

input[type="text"], input[type="color"], input[type="date"], input[type="datetime"], input[type="email"], input[type="file"], input[type="month"], input[type="number"],
input[type="password"], input[type="range"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"],
textarea
{
  @extend %font;
  background: var(--color-bg-light);
  border: 1px solid var(--color-line);
  font-size: $font-size;
  display: inline-block;
  height: 40px;
  padding: 6px 12px;
  line-height: 1.5;
  color: var(--color-fg);
  border-radius: 3px;
  vertical-align: middle;
  box-sizing: border-box;
  width: 100%;

  &:focus
  {
    border-color: var(--color-line-mid);
  }
}