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

$banner: (
  background-color: var(--cm-surface-lowest),
  content-width: (
    'mobile': 50rem,
    'desktop': 42.5rem,
  ),
  content-background: var(--cm-surface-inverted),
  content-border-radius: 0,
  content-padding: var(--s-l) var(--s-xl) var(--s-xl),
  container-padding-block: (
    'media': (
      'mobile': var(--s-l) var(--s-xl),
      'tablet': var(--s-xl) var(--s-2xl),
      'desktop': var(--s-4xl),
    ),
    'no-media': (
      'mobile': var(--s-xl) var(--s-2xl),
      'tablet': var(--s-2xl),
      'desktop': var(--s-4xl),
    ),
  ),
  container-padding-inline: (
    'mobile': var(--s-m),
    'tablet': var(--s-xl),
    'desktop': var(--s-2xl),
  ),
  border-color: transparent,
  border-radius: (
    'banner': 0,
    'content': 0,
  ),
  box-shadow: none,
  border-width: (
    'left': 0,
    'bottom': 0,
  ),
  text-color: (
    'dark': var(--cm-on-surface-brand),
    'light': #fff,
    'inverted': #fff,
  ),
  title: (
    's': (
      'font': 'heading2',
      'font-weight-light': map.get($font-weight, 'regular'),
      'font-weight-bold': map.get($font-weight, 'semi-bold'),
    ),
    'm': (
      'font': 'heading1',
      'font-weight-light': map.get($font-weight, 'regular'),
      'font-weight-bold': map.get($font-weight, 'semi-bold'),
    ),
    'l': (
      'font': 'display',
      'font-weight-light': map.get($font-weight, 'regular'),
      'font-weight-bold': map.get($font-weight, 'semi-bold'),
    ),
  ),
  description: (
    's': (
      'font': 'body-2xl',
      'font-weight-light': map.get($font-weight, 'regular'),
      'font-weight-bold': map.get($font-weight, 'regular'),
    ),
    'm': (
      'font': 'heading2',
      'font-weight-light': map.get($font-weight, 'light'),
      'font-weight-bold': map.get($font-weight, 'regular'),
    ),
    'l': (
      'font': 'heading2',
      'font-weight-light': map.get($font-weight, 'light'),
      'font-weight-bold': map.get($font-weight, 'regular'),
    ),
  ),
  credit: (
    'mobile': var(--f-2xs),
    'desktop': var(--f-xs),
  ),
  description-margin: var(--s-s),
  overlay: var(--c-g-600),
);
$banner-print: (
  container-padding-bottom: map.get($spacing-print, '4xl'),
  container-padding-top: map.get($spacing-print, '4xl'),
  container-padding-horizontal: map.get($spacing-print, '2xl'),
  content-padding: map.get($spacing-print, 'm') map.get($spacing-print, 'l')
    map.get($spacing-print, 'l'),
);