::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: 1px solid var(--accent-color);
  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);
}

.search__form {
  margin-top: 0;

  & .search__form--input {
    margin-bottom: 0;
  }
}

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

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