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

$site-header: (
  background-color: var(--cm-surface-inverted),
  banner-text-font: (
    mobile-xs: (
      'size': var(--fs-s),
      'line-height': var(--lh-xs),
    ),
    tablet: (
      'size': var(--fs-m),
      'line-height': var(--lh-s),
    ),
    desktop: (
      'size': var(--fs-l),
      'line-height': var(--lh-m),
    ),
  ),
  banner-background-desktop: var(--cm-surface-grey-low-1),
  banner-text-color: var(--cm-on-surface-inverted),
  banner-text-color-desktop: var(--cm-on-surface-brand),
  class-name-font: 'body-s',
  logo-height-xs: 3rem,
  logo-height-lg-s: 3rem,
  logo-height-lg-m: 3.75rem,
  logo-height-lg-l: 5rem,
  search-width-l: 336px,
  search-width-xl: 412px,
  toggle-color: var(--cm-on-surface-brand),
  language-switcher: (
    shadow: var(--sh-3),
    shadow-size: 12px,
    arrow-size: 1rem,
    arrow-top: 1px,
    arrow-border: 1px solid var(--cm-border-neutral-lowest),
    arrow-shadow: none,
    close-right: var(--s-m),
    close-top: var(--s-m),
  ),
);