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

// stylelint-disable length-zero-no-unit
$mega-menu: (
  global: (
    border-radius: 0,
    greysh-background: var(--cm-surface-neutral-lowest),
    shadow: none,
    font: var(--f-s),
    featured-description-font: var(--f-xs),
    promotional-item-bg: var(--c-in-400),
    promotional-item-bg-hover: map.get($color-palette, 'purple-300'),
    promotional-item-bg-focus: var(--c-p-400),
    promotional-item-outline-color: var(--cm-border-inverted),
    promotional-item-text-color: var(--cm-on-surface-brand),
    promotional-item-hover-text-color: var(--cm-on-surface-brand),
    promotional-item-focus-text-color: var(--cm-on-surface-brand),
  ),
  mobile: (
    arrow-size: var(--s-l),
    banner-shadow: var(--sh-2),
    open-button-margin: var(--s-3xs),
    open-button-offset: 2px,
    menu-background: transparent,
    color: var(--cm-on-surface-brand),
    content-background: transparent,
    featured-background: var(--cm-surface-neutral-lowest),
    featured-link-border: var(--cm-border-neutral),
    overlay-background: #fff,
    open-padding: var(--s-xs) 0,
    hide-header: true,
    open-background-active: transparent,
    open-background-hover: var(--cm-surface-neutral-lowest),
    header-background: var(--cm-surface-neutral-lowest),
    header-background-hover: var(--cm-surface-neutral-low),
    header-font: var(--f-m),
    header-color: var(--cm-on-surface-primary),
    header-color-hover: var(--cm-on-surface-brand),
    header-border-hover: var(--cm-border-brand),
    header-shadow: none,
    item-color: var(--cm-on-surface-brand),
    item-color-hover: var(--cm-on-surface-brand),
    item-padding: var(--s-m) var(--s-m) var(--s-m) var(--s-l),
    item-active-background: var(--cm-surface-neutral-medium),
    parent-top: -63px,
    spacing-top-level-2: var(--s-5xl),
    subitem-padding: var(--s-m) var(--s-m) var(--s-m) var(--s-l),
  ),
  desktop: (
    container-padding-horizontal: var(--s-xl),
    container-large-padding-horizontal: var(--s-xl),
    container-extra-large-padding-horizontal: var(--s-3xl),
    item-background: var(--cm-surface-brand),
    menu-background: var(--cm-surface-brand),
    menu-border: none,
    item-background-focus: var(--cm-surface-brand),
    item-background-hover: var(--cm-surface-neutral-medium),
    item-color: var(--cm-on-surface-inverted),
    item-color-hover: var(--cm-on-surface-brand),
    item-color-focus: var(--cm-on-surface-inverted),
    item-current-background: var(--cm-surface-inverted),
    item-current-color: var(--cm-on-surface-brand),
    item-current-shadow: none,
    item-current-margin: 0px,
    link-padding: var(--s-s) var(--s-m),
    link-line-height: map.get($line-height, 's'),
    mega-border: none,
    mega-shadow: none,
    overlay-background: var(--cm-surface-neutral-lowest),
    outline-offset: -4px,
    outline-width: 2px,
    see-all-divider: var(--cm-border-neutral),
    sublink-padding: calc(var(--s-xs) + 2px) var(--s-l) calc(var(--s-xs) + 2px)
      var(--s-m),
    sublink-level2-padding: calc(var(--s-xs) + 2px) var(--s-2xl)
      calc(var(--s-xs) + 2px) var(--s-s),
    sublink-current-background: var(--cm-surface-neutral-lowest),
  ),
);
// stylelint-enable length-zero-no-unit