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

// stylelint-disable length-zero-no-unit
$menu: (
  global: (
    border-radius: 0,
    shadow: none,
    color-outline: var(--cm-border-primary),
    header-font: 'body-m',
    item-font: (
      mobile-xs: (
        size: var(--fs-s),
        line-height: var(--lh-s),
      ),
      desktop: (
        size: var(--fs-s),
        line-height: var(--lh-xs),
      ),
    ),
    item-font-weight: map.get($font-weight, 'regular'),
    item-current-font-weight: map.get($font-weight, 'regular'),
    subtitle-font: 'body-m',
    subtitle-font-weight: map.get($font-weight, 'semi-bold'),
    subitem-font: 'body-s',
  ),
  mobile: (
    menu-background: transparent,
    color: var(--cm-on-surface-brand),
    hamburger-color: var(--cm-on-surface-brand),
    content-background: var(--cm-surface-inverted),
    content-shadow: var(--sh-2),
    overlay-background: var(--cm-surface-lowest-variant),
    open-padding: var(--s-xs) 0,
    open-padding-hover: calc(var(--s-xs) + 1px) 0,
    open-outline-color: transparent,
    hide-header: true,
    open-background-active: transparent,
    open-background-hover: var(--cm-surface-neutral-lowest),
    header-background: var(--cm-surface-inverted),
    header-background-hover: var(--cm-surface-neutral-lowest),
    header-color: var(--cm-on-surface-primary),
    header-color-hover: var(--cm-on-surface-brand),
    header-border-hover: var(--cm-on-surface-brand),
    header-outline-color: var(--cm-border-primary),
    header-shadow: none,
    header-height: 52px,
    item-color: var(--cm-on-surface-brand),
    item-color-hover: var(--cm-on-surface-brand),
    item-border: 2px solid var(--cm-border-inverted),
    item-padding: var(--s-xs) var(--s-m),
    item-active-background: var(--cm-surface-neutral-low),
    item-active-border: var(--cm-border-primary),
    caret-background: var(--cm-surface-neutral-lowest),
    caret-background-hover: var(--cm-surface-neutral-low),
    caret-active-background: var(--cm-surface-neutral-low),
    caret-active-background-hover: var(--cm-surface-neutral-medium),
    caret-color: var(--cm-on-surface-brand),
    caret-size: 14px,
    see-all-spacing-top: var(--s-5xl),
    subtitle-border: 1px solid var(--cm-border-neutral),
    subitem-padding: var(--s-xs) var(--s-m) var(--s-xs) var(--s-m),
  ),
  desktop: (
    container-offset: var(--s-l),
    menu-background: var(--cm-surface-brand),
    menu-border: none,
    item-line-height: map.get($line-height, 'xs'),
    item-background-hover: var(--cm-surface-inverted),
    item-background-focus: var(--cm-surface-inverted),
    item-color: var(--cm-on-surface-inverted),
    item-color-hover: var(--cm-on-surface-brand),
    item-color-focus: var(--cm-on-surface-brand),
    item-shadow-hover: #{inset 1px 0 0 var(--cm-border-brand),
    inset #{-1px} 0 0 var(--cm-border-brand)},
    item-current-background: var(--cm-surface-neutral-medium),
    item-current-background-focus: var(--cm-surface-inverted),
    item-current-color: var(--cm-on-surface-brand),
    item-current-border: var(--cm-border-on-brand),
    item-current-shadow: none,
    item-current-margin: 0px,
    separator-color: var(--cm-border-on-brand),
    link-min-height: 56px,
    link-padding-block: var(--s-xs),
    link-padding-inline: var(--s-l) var(--s-m),
    link-children-padding-inline: var(--s-l) var(--s-3xs),
    link-expanded-padding-block: var(--s-xs) calc(var(--s-xs) + 2px),
    caret-padding-inline: var(--s-3xs) var(--s-m),
    caret-focus-outline: var(--cm-on-surface-primary),
    overflow-separator-width: 2px,
    overflow-separator-color: var(--cm-surface-brand),
    overflow-separator-offset: 1px,
    overflow-border: 1px solid transparent,
    overflow-border-hover: 1px solid var(--cm-border-brand),
    overflow-background: var(--cm-surface-neutral),
    overflow-background-hover: var(--cm-surface-neutral-low),
    overflow-color: var(--cm-on-surface-inverted),
    overflow-color-hover: var(--cm-on-surface-brand),
    overflow-current-background-hover: var(--cm-surface-neutral-low),
    overflow-current-color-hover: var(--cm-on-surface-brand),
    mega-border: 1px solid var(--cm-border-neutral),
    mega-shadow: none,
    mega-padding: calc(var(--s-xl) + 2px) var(--s-xl) var(--s-xl),
    mega-column-gap: var(--s-2xl),
    mega-column-border: 1px solid var(--cm-border-neutral),
    sublink-padding: var(--s-xs) var(--s-m),
    sublink-current-background: var(--cm-surface-neutral-low),
    sublink-current-shadow: none,
  ),
);
// stylelint-enable length-zero-no-unit