::placeholder {
  color: var(--text-color);
  opacity: .5;
}

input[type="text"],
input[type="email"],
input[type="search"],
textarea {
  font-family: var(--font-mono);
  color: var(--text-color);
  background-color: var(--background-color);
  border: var(--border-default);
  padding: var(--sizing-sm);
  font-size: var(--font-size-base);
  width: 100%;
  border-radius: 0;
  margin-bottom: var(--sizing-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
}

input:focus,
input:focus-within,
textarea:focus,
textarea:focus-within {
  border: 0;
  outline: 2px dashed var(--accent-color);
  padding: calc(var(--sizing-sm) + 1px);
}

select {
  color: var(--text-color);
  border: 1px solid var(--text-color);
  border-radius: 0;
  background-color: var(--background-color);
  padding: var(--sizing-xs) var(--sizing-sm);

  &:focus,
  &:focus-within {
    border: 0;
    outline: var(--outline)
  }
}

.search__form {
  margin-top: 0;
}

.search__results {
  margin: 0 0 var(--sizing-base);
  padding: 0;
  list-style: none;

  & li {
    margin: var(--sizing-sm) 0;
  }
}