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

$timeline: (
  border-color: var(--cm-border-brand),
  border-width: 0.125rem,
  left-spacing-tablet: 9.75rem,
  left-spacing-desktop: 11.875rem,
  timeline-margin-left: 0px,
  first-item-offset: 0px,
  first-item-height: 100%,
  last-item-height: 3.25rem,
  last-item-height-headline: 3rem,
  set-spacing-mobile: var(--s-2xl),
  set-spacing-tablet: var(--s-4xl),
  item: (
    mobile: (
      padding-top-small: var(--s-s),
      padding-top-large: var(--s-m),
      padding-bottom: var(--s-s),
      padding-left: var(--s-xl),
    ),
    tablet: (
      padding-top-small: var(--s-xs),
      padding-top-large: var(--s-m),
      padding-left: var(--s-2xl),
    ),
  ),
  bullet: (
    shadow: 0 0 0 2px #fff,
    small: (
      border-color: var(--cm-on-surface-1),
      border-width: 0rem,
      fill-color: var(--cm-on-surface-1),
      size: 0.875rem,
      top-position: 14px,
    ),
    large: (
      border-color: var(--cm-on-surface-1),
      border-width: 0.25rem,
      fill-color: var(--cm-on-surface-inverted),
      size: 0.75rem,
      top-position: 18px,
    ),
    toggle: (
      border-color: var(--cm-on-surface-2),
      border-width: 0.25rem,
      fill-color: var(--cm-on-surface-inverted),
      size: 0.75rem,
      top-position: 18px,
    ),
  ),
  label: (
    alignment: end,
    color: var(--cm-on-surface-brand),
    font: 'body-s',
    font-weight: map.get($font-weight, 'medium'),
    layout: absolute,
    margin: var(--s-xs),
  ),
  title: (
    color: var(--cm-on-surface-brand),
    font: 'heading5',
    font-weight: map.get($font-weight, 'medium'),
    margin: var(--s-3xs),
  ),
  content: (
    font: 'body-s',
    color: var(--cm-on-surface-brand),
  ),
  headline: (
    padding-top-mobile: var(--s-xs),
    padding-top-tablet: var(--s-m),
    spacing-adjustment: var(--s-xs),
    label: (
      font: 'heading2',
      font-weight: map.get($font-weight, 'light'),
    ),
    bullet-top-position-mobile: 12px,
    bullet-top-position-tablet: 14px,
  ),
);
$timeline-print: (
  title-font: map.get($font-print, 'xl'),
  title-margin: map.get($spacing-print, '2xs'),
  label-font: map.get($font-print, 'm'),
  label-margin: 0,
  content-font: map.get($font-print, 'm'),
  headline-font: map.get($font-print, '4xl'),
  timeline-margin-left: calc(
      #{map.get($spacing-print, 'xs')} + 4.5cm + #{map.get($spacing-print, 'm')}
    ),
  item-padding-left: map.get($spacing-print, 'l'),
  bullet-small-top-position: 8px,
  bullet-large-top-position: 6px,
  headline-bullet-top-position: 22px,
);