.input {
  composes: reset from '../../reset.module.css';

  border: 2px solid var(--color-border-dark);
  border-radius: 2px;
  background-color: var(--color-background);
  color: var(--color-text);
  padding: 6px 16px;
  line-height: 20px;
  transition: border-color .3s ease;
  flex: 1;
}

.input:focus {
  border-color: var(--color-focus);
  outline: none;
}

.input[type="search"] {
  border-radius: 18px;
}

.input[readonly] {
  background: var(--color-background-light);
}

.input[type="number"] {
  width: 128px;
}