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

$radio: (
  binary-margin: var(--s-xl),
  border-color: var(--cm-border-brand),
  background: var(--cm-surface-inverted),
  box-size: 1.25rem,
  box-offset: 2px,
  border-width: 1px,
  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)
      ),
    inner-display: inline-block,
    border-width: 1px,
  ),
  help: (
    color: var(--cm-on-surface-grey-medium),
    font: 'microcopy-xs',
  ),
  invalid: (
    background-color: var(--cm-surface-status-error),
    border-color: var(--cm-border-status-error),
  ),
);