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

$list-illustration: (
  background-color: var(--cm-surface-low-1),
  column-gap: var(--s-5xl),
  icon-color: var(--cm-on-surface),
  icon-spacing-desktop: var(--s-l),
  item-padding-mobile: 0 0 var(--s-6xl),
  item-padding-desktop: 0 0 var(--s-5xl),
  item-padding-desktop-variant: var(--s-xl),
  item-padding-zebra-mobile: var(--s-5xl) var(--s-xl),
  item-padding-zebra-desktop: var(--s-5xl),
  item-margin-mobile: var(--s-6xl),
  counter: (
    font-mobile: var(--f-xs),
    font-tablet: var(--f-m),
    font-desktop: var(--f-l),
  ),
  value: (
    color: var(--cm-on-surface-brand),
    font-mobile-m: var(--f-2xl),
    font-mobile-l: var(--f-5xl),
    font-desktop-m: var(--f-3xl),
    font-desktop-l: var(--f-6xl),
    font-weight: map.get($font-weight, 'regular'),
  ),
  title: (
    color: var(--cm-on-surface-brand),
    font: var(--f-2xl),
    font-weight: map.get($font-weight, 'light'),
    margin: 0,
    number-list-font: 'heading6',
    number-list-font-weight: map.get($font-weight, 'semi-bold'),
  ),
  description: (
    font: 'body-m',
    color: var(--cm-on-surface-brand),
    margin: var(--s-xs),
  ),
);
$list-illustration-print: (
  value: (
    font-desktop-m: map.get($font-print, '4xl'),
    font-desktop-l: map.get($font-print, '5xl'),
    font-weight: map.get($font-weight, 'light'),
  ),
  title: (
    font: map.get($font-print, '4xl'),
    font-weight: map.get($font-weight, 'light'),
    margin: map.get($spacing-print, 's'),
  ),
  description: (
    margin: map.get($spacing-print, 'xs'),
  ),
);