:where(html) {
  /*** Form Element ***/
  --form-element-text-size-xs: var(--body-text-size-xs);
  --form-element-text-size-s:  var(--body-text-size-s);
  --form-element-text-size-m:  var(--body-text-size-m);
  --form-element-text-size-l:  var(--body-text-size-l);

  --form-element-text-color: inherit;
  --form-element-text-bg: var(--white);
  --form-element-weight: var(--weight-base);

  --form-element-line-height-xs: calc(var(--body-text-line-height-xs));
  --form-element-line-height-s: calc(var(--body-text-line-height-s));
  --form-element-line-height-m: calc(var(--body-text-line-height-m));
  --form-element-line-height-l: calc(var(--body-text-line-height-l));

  --form-element-border-radius-sharp: var(--border-radius-sharp);
  --form-element-border-radius-s: var(--border-radius-s);
  --form-element-border-radius-m: var(--border-radius-m);
  --form-element-border-radius-l: var(--border-radius-l);

  --form-element-padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-s);

  --form-element-border: var(--sl-input-border-width, var(--border-width-base)) solid var(--sl-input-border-color, var(--grey-3));
  
  /* Focus ring */
  --form-element-focus-border-width: var(--border-width-base);
  --form-element-focus-border-color: var(--accent);
  --form-element-focus-bg: var(--white);
  --form-element-focus-shadow: inset 0 0 0 var(--form-element-focus-border-width) var(--form-element-focus-border-color);

  /* Label */
  --form-element-label-text-size-xs: var(--label-text-size-xs);
  --form-element-label-text-size-s:  var(--label-text-size-s);
  --form-element-label-text-size-m:  var(--label-text-size-m);
  --form-element-label-text-size-l:  var(--label-text-size-l);

  --form-element-label-text-color: inherit;

  --form-element-label-weight: var(--weight-base);

  --form-element-label-line-height-xs: var(--label-text-line-height-xs);
  --form-element-label-line-height-s:  var(--label-text-line-height-s);
  --form-element-label-line-height-m:  var(--label-text-line-height-m);
  --form-element-label-line-height-l:  var(--label-text-line-height-l);

  --form-element-label-width: 15ch;
  --form-element-label-width-max: var(--ch-xs);
  
  /* Help text */
  --form-element-help-text-size-xs: var(--label-text-size-xs);
  --form-element-help-text-size-s:  var(--label-text-size-s);
  --form-element-help-text-size-m:  var(--label-text-size-m);
  --form-element-help-text-size-l:  var(--label-text-size-l);

  --form-element-help-text-color: var(--body-text-color);
  --form-element-help-text-bg: var(--transparent);

  /* Invalid text */
  --form-element-invalid-text-size-xs: var(--label-text-size-xs);
  --form-element-invalid-text-size-s:  var(--label-text-size-s);
  --form-element-invalid-text-size-m:  var(--label-text-size-m);
  --form-element-invalid-text-size-l:  var(--label-text-size-l);

  --form-element-invalid-text-color: var(--error);
  --form-element-invalid-border: 2px solid var(--error);
  --form-element-invalid-shadow: 0 0 0 var(--form-element-focus-border-width) var(--form-element-focus-border-color);


  /* Toggle (checkboxes, radios, switches) */
  --form-element-toggle-size: var(--body-text-size-base);

  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

:root {
  --sl-focus-ring-width: var(--border-width-base);
  --sl-input-focus-ring-width: var(--border-width-base);
  --sl-focus-ring-color: var(--accent);
  --sl-input-focus-ring-color: var(--accent);

  --sl-input-border-color-hover: var(--accent);
}

:where(form.grid) {
  display: grid;
  grid-template-columns: [labels] fit-content(var(--form-element-label-width-max)) [controls] auto;
  grid-auto-flow: row;
  grid-gap: var(--grid-gap);
  min-height: var(--space-m);
}

:where(form.grid .field) {
  grid-column: span 2;
  display: grid;
  grid: inherit;
  grid-gap: inherit;
  grid-template-columns: subgrid;
}

:where(form.grid .field > label)  {
  grid-column: span 1;
  font-weight: var(--weight-bold);
  padding-block: var(--space-s);
  font-size: var(--form-element-label-text-size-s);
  line-height: var(--form-element-label-line-height-s);
}
:where(
  form.grid .field > input,
  form.grid .field > textarea,
  form.grid .field > select
) {
  grid-column: span 1;
  padding: var(--gap-xs); 
  align-self: center;
  resize: block;
  font-family: inherit;
}

/* vertical form */
:where(form.grid.vertical) {
  grid-gap: var(--gap-none);

  .field:not(:first-child) > label {
    margin-top: var(--grid-gap);
  }

  :where(.field > *) {
    grid-column: span 2;
  }

}
@container style(--vertical: true) {
  :where(form.grid) {
   grid-gap: var(--gap-none);

    .field:not(:first-child) > label {
      margin-top: var(--grid-gap);
    }

    :where(.field > *) {
      grid-column: span 2;
    }
  }
}
@container (width < 600px) {
  :where(form.grid) {
   grid-gap: var(--gap-none);

    .field:not(:first-child) > label {
      margin-top: var(--grid-gap);
    }

    :where(.field > *) {
      grid-column: span 2 !important;
    }
  }
}

:where(form.grid .field > input[type="checkbox"]) {
  justify-self: start;
  width: var(--form-element-text-size-l);
  height: var(--form-element-text-size-l);
}


:where(
  form .hint,
  form .label ) {
  display: flex;
  color: var(--form-element-label-text-color);
  font-family: inherit;
  font-size: var(--form-element-label-text-size-m);
  font-weight: var(--form-element-label-weight);
  line-height: var(--form-element-label-line-height-m);
  margin-block-end: var(--size-2);
  margin: 0
}
:where(label) {
  margin-block-end: var(--sl-spacing-3x-small, 2px);
}
:where(form .hint) {
  color: var(--weaker);
  font-weight: var(--weight-medium);
  font-size: var(--form-element-label-text-size-s);
  line-height: var(--form-element-label-line-height-s);
}
:where(form .error) {
  color: var(--form-element-invalid-text-color);
  font-weight: var(--weight-bold);
  font-size: var(--form-element-invalid-text-size-m);
  line-height: var(--form-element-label-line-height-m)
}
:where(input) {
  display: block;
  background: var(--form-element-text-bg);
  color: var(--form-element-text-color);
  padding: var(--form-element-padding);
  border-radius: var(--form-element-border-radius-s);
  border: var(--form-element-border);
  font-family: inherit;
  font-weight: var(--form-element-weight);
  font-size: var(--form-element-text-size-m);
  line-height: var(--form-element-line-height-m);
  transition: 
    border var(--transition-slowly),
    box-shadow var(--transition-slowly),
    background var(--transition-slowly)
}
:where(input:hover) {
  border-width: var(--form-element-focus-border-width);
  border-color: var(--form-element-focus-border-color);
}
:where(input:focus-within) {
  border-color: var(--form-element-focus-border-color);
  background: var(--form-element-focus-bg);
  outline-width: var(--outline-width);
  outline-color: var(--outline-color);
  box-shadow: var(--form-element-focus-shadow);
}
input::placeholder {
  color: var(--muted);
}
:where(input:disabled) {
  border-color: var(--disabled);
  color: var(--disabled);
}
:where(
  .input-invalid,
  input[aria-invalid=true]) {
  border: var(--form-element-invalid-border);
}
:where(
  .input-invalid:focus-within,
  input[aria-invalid=true]:focus) {
  box-shadow: var(--form-element-invalid-shadow);
}

:where(sl-input.label-on-left) {
  --label-width: 3.75rem;
  --gap-width: 1rem;
}

:where(sl-input.label-on-left + sl-input.label-on-left) {
  margin-top: var(--sl-spacing-medium);
}

:where(sl-input.label-on-left)::part(form-control) {
  display: grid;
  grid: auto / var(--label-width) 1fr;
  gap: var(--sl-spacing-3x-small) var(--gap-width);
  align-items: center;
}

:where(sl-input.label-on-left)::part(form-control-label) {
  text-align: right;
}

:where(sl-input.label-on-left)::part(form-control-help-text) {
  grid-column-start: 2;
}