.mgnl-form {
  display: grid;
  gap: 15px;
  font-family: var(--mgnl-typography-ui-default-md-font-family);
  font-size: var(--mgnl-typography-ui-default-md-font-size);
}
.mgnl-form.is-dirty .mgnl-form-group:has(:invalid) > .mgnl-form-field,
.mgnl-form.is-dirty .mgnl-form-group:has(.is-invalid) > .mgnl-form-field {
  border: var(--mgnl-input-neutral-border-error);
}
.mgnl-form.is-dirty .mgnl-form-group:has(:invalid) > .mgnl-form-field:focus,
.mgnl-form.is-dirty .mgnl-form-group:has(.is-invalid) > .mgnl-form-field:focus {
  border: var(--mgnl-input-neutral-border-default);
}
.mgnl-form.is-dirty .mgnl-form-group:has(:invalid) > .mgnl-input-group,
.mgnl-form.is-dirty .mgnl-form-group:has(.is-invalid) > .mgnl-input-group {
  border: var(--mgnl-input-neutral-border-error);
}
.mgnl-form.is-dirty .mgnl-form-group:has(:invalid) > .mgnl-input-group:focus,
.mgnl-form.is-dirty .mgnl-form-group:has(.is-invalid) > .mgnl-input-group:focus {
  border: var(--mgnl-input-neutral-border-default);
}
.mgnl-form.is-dirty .mgnl-form-group:has(:invalid) .error,
.mgnl-form.is-dirty .mgnl-form-group:has(.is-invalid) .error {
  opacity: 1;
  display: block;
  transform: translateY(0);
  height: auto;
  margin-top: -15px;
  padding: 25px 10px 10px;
  z-index: 0;
  border-radius: var(--mgnl-form-group-md-border-radius);
}
.mgnl-form .mgnl-form-group:has(:required:invalid) .mgnl-form-label::after {
  content: "*";
  color: red;
}

/*
-  title: Full Form Example
    description: this is a vulasdf
    code:
 <form class="mgnl-form">
  <div class="mgnl-form-group"> 
    <div class="mgnl-form-group__handle">x</div>
    <input class="mgnl-form-field" type="text" id="title" name="title">
    <label class="mgnl-form-label" for="title">Title (en)</label>
    <span class="error" id="titleError">Title is required</span>
  </div>
  <div class="mgnl-form-group"> 
    <input class="mgnl-form-field" type="text" id="blabla" name="subtitle" required>
    <label class="mgnl-form-label" for="blabla">SubTitle (en)</label>
    <span class="error" id="subtitleError">Subtitle is required</span>
  </div>
  <div class="mgnl-form-group"> 
    <select class="mgnl-form-field" id="listtest" name="languages">
      <option value="en">English</option>
      <option value="de">German</option>
      <option value="fr">French</option>
    </select>
    <label class="mgnl-form-label" for="listtest">Languages</label>
    <span class="error" id="listtestError">Language selection is required</span>
  </div>
  <div class="mgnl-form-group"> 
    <input class="mgnl-form-field is-invalid" type="url" id="url" name="url" required>
    <label class="mgnl-form-label" for="url">URL (en)</label>
    <span class="error" id="urlError">Has to be a valid URL and is required</span>
  </div>
  <div class="mgnl-form-group">
    <div class="mgnl-input-group">
      <input class="mgnl-form-field is-invalid" type="text" id="testme" name="testme" required>
      <div class="mgnl-input-group__addon">
        <span class="mgnl-input-group__addon__text">@example.com</span>
      </div>
    </div>
    <label class="mgnl-form-label" for="testme">Custom Test</label>
    <span class="error" id="testmeError">Input is required</span>
  </div>
  <div class="mgnl-form-group">
    <div class="mgnl-input-group">
      <div class="mgnl-input-group__addon">
        <span class="mgnl-input-group__addon__text">@</span>
      </div>
      <input class="mgnl-form-field is-invalid" type="text" id="usrname" name="usrname" required>
    </div>
    <label class="mgnl-form-label" for="usrname">Username</label>
    <span class="error" id="usrnameError">Username is required</span>
  </div>
  <div class="mgnl-form-group"> 
    <textarea class="mgnl-form-field" rows="10" id="banana" name="textareaInput" required></textarea>
    <label class="mgnl-form-label" for="banana">Description (en)</label>
    <span class="error" id="textareaError">Description is required</span>
  </div>
  <button class="mgnl-button mgnl-button--primary mgnl-button--md" type="submit">Submit</button>
</form>
*/