input {
  font-size: 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--text-soft);
  color: var(--text-soft);
  transition: var(--transition);

  &:focus {
    outline: none;
    border-bottom: 1px solid var(--primary-color);
    color: var(--text-inverse);
  }

  @media screen and (max-width: 500px) {
    width: 100px;
  }
}
