contact-component label,
contact-component input {
  display: block;
}

contact-component input,
contact-component textarea {
  margin-bottom: var(--margin);
  padding: var(--small-margin);
  width: 100%;
  border-radius: calc(var(--border-radius) / 2);
  border: 1px solid lightgray;
  font-family: var(--body-font);
  transition: outline var(--animation-time);
}

contact-component input:focus,
contact-component textarea:focus {
  outline: none;
  border-color: var(--light-orange);
}

contact-component label {
  margin: var(--small-margin);
}

contact-component textarea {
  /* stylelint-disable-next-line */
  resize: none;
  height: 10rem;
}

contact-component button {
  padding: var(--small-margin) var(--margin);
  border: none;
  outline: none;
  border-radius: var(--border-radius);
  background-color: var(--light-orange);
  color: white;
  cursor: pointer;
  transition: background-color var(--animation-time);
}

contact-component button:hover {
  background-color: var(--orange);
}

contact-component .response {
  padding: var(--small-margin);
}

contact-component .response.success {
  color: lightgreen;
}

contact-component .response.error {
  color: lightcoral;
}

/* Responsive design */
/* Desktop */
@media (min-width: 1101px) {
}

/* Tablet */
@media (min-width: 651px) and (max-width: 1100px) {
}

/* Phone */
@media (max-width: 650px) {
}