/*
 * single-line text inputs
 */

input[type='text'],
input[type='number'],
input[type='email'],
input[type='password'],
input[type='url'],
textarea,
select {
  position: relative;
  font-size: 1rem;
  line-height: 1.7rem;
  padding: 0.4rem;
  color: var(--primary-text-color);
  background-color: var(--input-bg-color);
  box-shadow: 0 4px 13px 6px rgba(0, 0, 0, 0.2);
  border: none;
}

.icon-wrapper>select {
  box-shadow: none;
}

textarea {
  resize: none;
}

select {
  appearance: none;
}

input[type='text']:placeholder-shown,
input[type='number']:placeholder-shown,
input[type='email']:placeholder-shown,
input[type='password']:placeholder-shown,
input[type='url']:placeholder-shown,
textarea:placeholder-shown {
  font-style: italic;
}

/*
 * button-type inputs
 */

.button,
button,
input[type='submit'] {
  display: inline-flex;
  margin: 0;
  padding: 0.8rem 1.2rem;
  font-family: 'Inter', 'sans-serif';
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid var(--primary-color);
  color: var(--title-button-text-color);
  background-color: var(--primary-color);
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s, border 0.3s;
}

select {
  color: var(--form-icon-color);
  background-color: var(--input-bg-color);
}

select>option {
  color: var(--primary-text-color);
  background-color: var(--primary-bg-color);
}

.button:hover,
button:hover,
input[type='submit']:hover {
  background-color: var(--input-bg-color);
  border: 2px solid var(--primary-color);
  color: var(--highlight-color);
}

.button.inverted:hover,
button.inverted:hover,
input.inverted[type='submit']:hover {
  border: 2px solid var(--input-bg-color);
  color: var(--title-button-text-color);
  background-color: var(--input-bg-color);
}

.button:active,
button:active,
input[type='submit']:active {
  background-color: #805814;
}

.button:active,
button:active,
input[type='submit']:active {
  color: var(--title-button-text-color);
  background-color: #805814;
}