@use 'sass:map';
@use '../index' as *;

$form-group: (
  margin-icon: var(--s-3xs),
  margin-no-helper: calc(var(--s-3xs) + 2px),
  label: (
    color: var(--cm-on-surface-brand),
    font: 'body-s',
    font-weight: map.get($font-weight, 'semi-bold'),
  ),
  optional: (
    color: var(--cm-on-surface-grey),
    font: 'body-xs',
    font-weight: map.get($font-weight, 'regular'),
    margin-inline: var(--s-3xs) 0,
  ),
  required: (
    color: var(--cm-on-surface-status-error),
    font: 'body-xs',
    font-weight: map.get($font-weight, 'regular'),
    margin-inline: var(--s-3xs) 0,
  ),
  help: (
    color: var(--cm-on-surface-grey),
    font: 'microcopy-xs',
    margin-block: var(--s-3xs) calc(var(--s-xs) + 2px),
  ),
  invalid: (
    color: var(--cm-on-surface-status-error),
    font: 'microcopy-xs',
    margin-block: var(--s-xs) 0,
  ),
);