@use '@material/elevation';

.form {
  padding: 16px;
}

.formCard {
  margin: 16px 0;
  transition: 200ms box-shadow;
  // TODO: Add transition ease to `box-shadow`.
  @include elevation.elevation(2);
}

.formCard:hover {
  @include elevation.elevation(8);
}

.formField {
  margin: 8px 0;
  width: 100% !important;
  display: inline-flex;
}

.formField :global(.mdc-select__anchor) {
  width: 100%;
}

.formField textarea {
  resize: vertical;
}

.form .formField:first-child {
  margin-top: 0;
}

.formSubmitButton {
  margin-top: 8px;
  width: 100%;
}