mf-styling/src/form.css

css as used for mf apps

form {
  display: grid;
  grid-gap: 8px;
}

fieldset {
  border: 0;
}

fieldset:disabled {
  pointer-events: none;
}

label {
  font-size: 1.1rem;
}

input {
  height: calc(1.25em + 0.75rem);
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  color: var(--color-neutral-900);
  background-color: var(--color-neutral-200);
  background-clip: padding-box;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--border-radius);
  transition:
    border-color var(--transition-time) ease-in-out,
    box-shadow var(--transition-time) ease-in-out;
}

input:disabled {
  color: var(--color-neutral-50);
  border: 0 solid var(--color-neutral-50);
  pointer-events: none;
}

input:user-invalid {
  background-color: var(--color-warn-200-80);
}

@supports not selector(:user-invalid) {
  input:invalid {
    background-color: var(--color-warn-200-80);
  }
}

input:optional {
  background-color: var(--color-neutral-100);
}

input:required {
  background-color: var(--color-neutral-300);
}

input:focus:invalid {
  background-color: var(--color-warn-300-80);
}

.modal {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: var(--color-neutral-900-40);
}