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

$checkbox: (
  checkbox-fill: var(--cm-surface-inverted),
  border-color: var(--cm-border-brand),
  background: var(--cm-surface-inverted),
  box-size: 1.25rem,
  box-offset: 2px,
  border-width: 1px,
  border-radius: map.get($border-radius, 'xs'),
  item-spacing: var(--s-2xs),
  label: (
    font: 'body-s',
    color: var(--cm-on-surface-brand),
  ),
  checked: (
    background-color: var(--cm-surface-primary),
    border-color: var(--cm-border-primary),
    background-color-hover: color-mix(
        in srgb,
        var(--cm-surface-primary) 50%,
        var(--cm-on-surface-neutral-highest)
      ),
  ),
  help: (
    color: var(--cm-on-surface-grey-medium),
    font: 'microcopy-xs',
    margin-block: var(--s-xs) 0,
  ),
  invalid: (
    background-color: var(--cm-surface-status-error),
    border-color: var(--cm-border-status-error),
  ),
  required: (
    color: var(--cm-on-surface-status-error),
    font: 'body-xs',
    font-weight: map.get($font-weight, 'regular'),
    margin-inline: var(--s-3xs) 0,
  ),
);