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

// stylelint-disable length-zero-no-unit
$menu: (
  global: (
    border-radius: 0,
    shadow: none,
    color-outline: var(--c-p),
  ),
  mobile: (
    menu-background: transparent,
    color: var(--c-d),
    hamburger-color: var(--c-d),
    content-background: map.get($color, 'white'),
    content-shadow: var(--sh-6),
    overlay-background: var(--c-ov-l),
    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: var(--c-n-80),
    header-background: map.get($color, 'white'),
    header-background-hover: var(--c-n-60),
    header-font: var(--f-m),
    header-color: var(--c-p),
    header-color-hover: var(--c-d),
    header-border-hover: var(--c-d-80),
    header-outline-color: var(--c-p),
    header-shadow: none,
    header-height: 52px,
    item-color: var(--c-d),
    item-color-hover: var(--c-d),
    item-border: 2px solid map.get($color, 'white'),
    item-font: var(--f-m),
    item-padding: var(--s-xs) var(--s-m),
    item-active-background: var(--c-n-80),
    item-active-border: var(--c-p),
    caret-background: var(--c-n-40),
    caret-background-hover: var(--c-n-80),
    caret-active-background: var(--c-n-80),
    caret-active-background-hover: var(--c-n-160),
    caret-color: var(--c-d),
    subtitle-border: 1px solid var(--c-n),
    subtitle-font: var(--f-m),
    subtitle-font-weight: map.get($font-weight, 'bold'),
    subitem-padding: var(--s-xs) var(--s-m) var(--s-xs) var(--s-m),
  ),
  desktop: (
    menu-background: var(--c-br),
    menu-border: none,
    item-background-hover: map.get($color, 'white'),
    item-background-focus: map.get($color, 'white'),
    item-color: map.get($color, 'white'),
    item-color-hover: var(--c-d),
    item-color-focus: var(--c-p),
    item-shadow-hover: #{inset 1px 0 0 var(--c-d),
    inset #{-1px} 0 0 var(--c-d)},
    item-current-background: var(--c-n-80),
    item-current-background-focus: var(--c-n-80),
    item-current-color: var(--c-d),
    item-current-shadow: none,
    item-current-margin: 0px,
    separator-color: map.get($color, 'white'),
    link-padding: calc(var(--s-xs) + var(--s-xs)) var(--s-2xs)
      calc(var(--s-xs) + var(--s-xs)) var(--s-xs),
    link-expanded-padding: calc(var(--s-xs) + var(--s-xs)) var(--s-2xs)
      calc(var(--s-xs) + var(--s-xs) + 2px) var(--s-xs),
    link-line-height: map.get($line-height, 'xs'),
    caret-padding: 0 var(--s-xs),
    caret-focus-outline: var(--c-p),
    overflow-separator-width: 2px,
    overflow-separator-color: var(--c-br),
    overflow-separator-offset: 1px,
    overflow-border: 1px solid transparent,
    overflow-border-hover: 1px solid var(--c-d-80),
    overflow-background: map.get($color, 'white'),
    overflow-background-hover: var(--c-p-20),
    overflow-color: var(--c-d),
    overflow-color-hover: var(--c-d),
    overflow-current-background-hover: var(--c-n),
    overflow-current-color-hover: var(--c-d),
    mega-border: 1px solid var(--c-d),
    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(--c-n),
    sublink-padding: var(--s-xs) var(--s-m),
    sublink-current-background: var(--c-n-80),
    sublink-current-shadow: none,
  ),
);
// stylelint-enable length-zero-no-unit
