input {
  accent-color: var(--accent-color);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  border-radius: 0;
  border: none;
  background-color: var(--input-bg);
  background-image: linear-gradient(var(--accent-color), var(--accent-color));
  background-size: 0% 2px;
  background-position: right bottom;
  background-repeat: no-repeat;
  position: relative;
  transition: background-size var(--transition-time-common);
  color: inherit;
  padding: 0.2em;
}

input:focus {
  outline: none;
  background-size: 100% 2px;
  background-position-x: left;
}

input[type=file]::-webkit-file-upload-button {
  font-family: inherit;
  border: none;
  color: inherit;
  background: var(--button-bg);
  transition: var(--transition-time-common);
}

input[type=file]:is(:hover, :focus)::-webkit-file-upload-button {
  background: var(--button-bg-focus);
}

input[type=color] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 2em;
  height: 1.6em;
  background-color: var(--button-bg);
  border: none;
  cursor: pointer;
  transition-property: background-size, background-color;
  transition-duration: var(--transition-time-common);
}

input[type=color]:is(:hover, :focus) {
  background-color: var(--button-bg-focus);
}

input[type=color]::-webkit-color-swatch {
  border: none;
}

input[type=color]::-moz-color-swatch {
  border: none;
}

select {
  background-color: var(--input-bg);
  font-family: inherit;
  border: none;
  color: inherit;
  padding: 0.2em;
}
select option {
  background-color: var(--input-bg);
}
select option:hover, select option:focus {
  background-color: var(--accent-color);
}

textarea {
  background-color: var(--input-bg);
  border: none;
}

/*# sourceMappingURL=input.css.map */