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

$fact-figures: (
  background: var(--cm-surface-low-2),
  border-radius: map.get($border-radius, 'xs'),
  padding-mobile: var(--s-5xl),
  padding-desktop: var(--s-5xl),
  margin-vertical: var(--s-5xl),
  margin-horizontal: var(--s-5xl),
  text-color: var(--cm-on-surface-brand),
  value-font-mobile-m: var(--f-2xl),
  value-font-mobile-l: var(--f-5xl),
  value-font-desktop-m: var(--f-3xl),
  value-font-desktop-l: var(--f-6xl),
  value-font-weight: map.get($font-weight, 'semi-bold'),
  title-font: (
    mobile-xs: (
      size: var(--fs-2xl),
      line-height: var(--lh-l),
    ),
  ),
  title-font-weight: map.get($font-weight, 'medium'),
  title-margin: 0,
  description-font: var(--f-m),
  description-margin: var(--s-xs),
  view-all-font: var(--f-s),
  view-all-color: var(--cm-on-surface-brand),
  view-all-border-color: var(--cm-border-brand),
  view-all-margin: var(--s-7xl),
  view-all-padding: var(--s-s),
  icon-color: var(--cm-on-surface),
  icon-margin: var(--s-xs),
  source-spacing: var(--s-5xl),
  source-color: var(--cm-on-surface-brand),
  source-font: 'body-xs',
  source-link-variant: 'brand',
  source-separator-color: var(--cm-on-surface-brand),
);
$fact-figures-print: (
  title-font: map.get($font-print, '4xl'),
  title-font-weight: map.get($font-weight, 'light'),
  value-font-m: map.get($font-print, '4xl'),
  value-font-l: map.get($font-print, '5xl'),
  value-font-weight: map.get($font-weight, 'light'),
);