/**
 * @prop --group-form-field-control-font-size: TBD
 * @prop --group-form-field-control-font-family: TBD
 * @prop --group-form-field-control-color: TBD
 * @prop --group-form-field-control-placeholder-color: TBD
 * @prop --group-form-field-control-radius: TBD
 * @prop --group-form-field-control-background: TBD
 * @prop --group-form-field-control-background-hover: TBD
 * @prop --group-form-field-control-background-active: TBD
 * @prop --group-form-field-control-border-width: TBD
 * @prop --group-form-field-control-border-style: TBD
 * @prop --group-form-field-control-border-color: TBD
 * @prop --group-form-field-control-border-color-hover: TBD
 * @prop --group-form-field-control-border-color-active: TBD
 * @prop --group-form-field-control-success-background: TBD
 * @prop --group-form-field-control-success-background-hover: TBD
 * @prop --group-form-field-control-success-background-active: TBD
 * @prop --group-form-field-control-success-border-color: TBD
 * @prop --group-form-field-control-success-border-color-hover: TBD
 * @prop --group-form-field-control-success-border-color-active: TBD
 * @prop --group-form-field-control-error-background: TBD
 * @prop --group-form-field-control-error-background-hover: TBD
 * @prop --group-form-field-control-error-background-active: TBD
 * @prop --group-form-field-control-error-border-color: TBD
 * @prop --group-form-field-control-error-border-color-hover: TBD
 * @prop --group-form-field-control-error-border-color-active: TBD
 * @prop --group-form-field-control-disabled-color: TBD
 * @prop --group-form-field-control-disabled-background: TBD
 * @prop --group-form-field-control-disabled-border-color: TBD
 * @prop --group-form-field-label-font-size: TBD
 * @prop --group-form-field-label-line-height: TBD
 * @prop --group-form-field-label-font-weight: TBD
 * @prop --group-form-field-label-font-family: TBD
 * @prop --group-form-field-label-margin-bottom: TBD
 * @prop --group-form-field-label-color-hover: TBD
 * @prop --group-form-field-label-color-active: TBD
 * @prop --group-form-field-label-success-color: TBD
 * @prop --group-form-field-label-error-color: TBD
 * @prop --group-form-field-label-error-color-hover: TBD
 * @prop --group-form-field-label-error-color-active: TBD
 * @prop --group-form-field-label-disabled-color TBD
 * @prop --group-form-field-message-font-size: TBD
 * @prop --group-form-field-message-font-weight: TBD
 * @prop --group-form-field-message-color: TBD
 * @prop --group-form-field-message-color-hover: TBD
 * @prop --group-form-field-message-color-active: TBD
 * @prop --group-form-field-message-font-weight: TBD
 * @prop --group-form-field-message-success-color: TBD
 * @prop --group-form-field-message-error-color: TBD
 * @prop --group-form-field-message-disabled-color: TBD
 * @prop --group-form-field-icon-color: TBD
 * @prop --group-form-field-icon-color-hover: TBD
 * @prop --group-form-field-icon-color-active: TBD
 * @prop --group-form-field-icon-success-color: TBD
 * @prop --group-form-field-icon-error-color: TBD
 * @prop --group-form-field-icon-disabled-color: TBD
 * @prop --group-file-label-color: TBD
 * @prop --group-file-label-color-hover: TBD
 * @prop --group-file-label-color-active: TBD
 * @prop --group-file-border-style: TBD
 * @prop --group-file-label-disabled-color: TBD
 */

:root
  //
  // form control
  --group-form-field-control-font-size: var(--group-text-size-5)
  --group-form-field-control-font-family: var(--group-font-family-text)
  --group-form-field-control-color: var(--group-light-text-on-light)
  --group-form-field-control-placeholder-color: var(--group-light-text-on-light)
  --group-form-field-control-radius: var(--group-radius-normal)
  --group-form-field-control-background: var(--group-color-base-core-white)
  --group-form-field-control-background-hover: var(--group-color-base-neutral-1)
  --group-form-field-control-background-active: var(--group-color-base-neutral-1)
  --group-form-field-control-border-width: var(--group-scale-3-border-width-medium)
  --group-form-field-control-border-style: solid
  --group-form-field-control-border-color: var(--group-color-base-neutral-3)
  --group-form-field-control-border-color-hover: var(--group-form-field-control-border-color)
  --group-form-field-control-border-color-active: var(--group-color-base-core-primary)
  // success
  --group-form-field-control-success-background: var(--group-color-base-success-default-1)
  --group-form-field-control-success-background-hover: var(--group-color-base-success-default-1)
  --group-form-field-control-success-background-active: var(--group-color-base-success-default-1)
  --group-form-field-control-success-border-color: var(--group-color-base-success-default-1)
  --group-form-field-control-success-border-color-hover: var(--group-color-base-success-default-1)
  --group-form-field-control-success-border-color-active: var(--group-color-base-success-default-1)
  // error
  --group-form-field-control-error-background: var(--group-color-base-error-default-1)
  --group-form-field-control-error-background-hover: var(--group-color-base-error-default-1)
  --group-form-field-control-error-background-active: var(--group-color-base-error-default-1)
  --group-form-field-control-error-border-color: var(--group-color-base-error-default-1)
  --group-form-field-control-error-border-color-hover: var(--group-form-field-control-border-color)
  --group-form-field-control-error-border-color-active: var(--group-color-base-error-default-1)
  // disabled
  --group-form-field-control-disabled-color: var(--group-light-text-on-dark-disabled-1)
  --group-form-field-control-disabled-background: var(--group-light-text-on-dark-disabled-2)
  --group-form-field-control-disabled-border-color: var(--group-light-text-on-dark-disabled-1)
  //
  // field label
  --group-form-field-label-font-size: var(--group-text-size-5-desktop)
  --group-form-field-label-line-height: var(--group-line-height-size-5-desktop)
  --group-form-field-label-font-weight: var(--group-font-weight-regular)
  --group-form-field-label-font-family: var(--group-font-family-text)
  --group-form-field-label-margin-bottom: 0.25rem
  --group-form-field-label-color-hover: var(--group-link-color-hover)
  --group-form-field-label-color-active: var(--group-link-color-active)
  --group-form-field-label-success-color: var(--group-color-text-success)
  --group-form-field-label-error-color: var(--group-color-text-error)
  --group-form-field-label-error-color-hover: var(--group-color-text-error)
  --group-form-field-label-error-color-active: var(--group-color-text-error)
  --group-form-field-label-disabled-color: var(--group-light-non-interactive-surface-neutral-3)
  //
  // field message
  --group-form-field-message-font-size: var(--group-text-size-6-desktop)
  --group-form-field-message-font-weight: var(--group-font-weight-regular)
  --group-form-field-message-color: var(--group-link-color)
  --group-form-field-message-color-hover: var(--group-link-color-hover)
  --group-form-field-message-color-active: var(--group-link-color-active)
  --group-form-field-message-success-color: var(--group-color-text-success)
  --group-form-field-message-error-color: var(--group-color-text-error)
  --group-form-field-message-disabled-color: var(--group-link-color)
  //
  // field icon
  --group-form-field-icon-color: var(--group-link-color)
  --group-form-field-icon-color-hover: var(--group-link-color-hover)
  --group-form-field-icon-color-active: var(--group-link-color-active)
  --group-form-field-icon-success-color: var(--group-color-text-success)
  --group-form-field-icon-error-color: var(--group-color-text-error)
  --group-form-field-icon-disabled-color: var(--group-color-text-grey)
  //
  // file upload
  --group-file-label-color: var(--group-light-non-interactive-surface-neutral-3)
  --group-file-label-color-hover: var(--group-light-non-interactive-surface-neutral-3)
  --group-file-label-color-active: var(--group-light-non-interactive-surface-neutral-3)
  --group-file-border-style: dashed
  --group-file-label-disabled-color: var(--group-light-non-interactive-surface-neutral-5)