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

// stylelint-disable length-zero-no-unit
$menu: (
  global: (
    border-radius: 4px,
    shadow: var(--sh-2),
    color-outline: map.get($color, 'white'),
  ),
  mobile: (
    menu-background: linear-gradient(90deg, var(--c-p-140), var(--c-p)),
    color: var(--c-d),
    hamburger-color: map.get($color, 'white'),
    content-background: map.get($color, 'white'),
    content-shadow: none,
    overlay-background: rgba(38, 43, 56, 0.7),
    open-padding: var(--s-xs) 0,
    open-outline-color: map.get($color, 'white'),
    open-background-active: var(--c-p-10),
    header-background: linear-gradient(90deg, var(--c-p-140), var(--c-p)),
    header-background-hover: transparent,
    header-font: var(--f-xl),
    header-color: map.get($color, 'white'),
    header-color-hover: map.get($color, 'white'),
    header-border-hover: transparent,
    header-outline-color: map.get($color, 'white'),
    header-shadow: var(--sh-1),
    header-height: 77px,
    item-color: var(--c-p),
    item-color-hover: var(--c-p-140),
    item-border: 1px solid var(--c-p-20),
    item-font: var(--f-l),
    item-padding: var(--s-m),
    item-active-background: var(--c-p-10),
    item-active-border: var(--c-p),
    caret-background: var(--c-p-10),
    caret-background-hover: var(--c-p-40),
    caret-active-background: var(--c-p-10),
    caret-active-background-hover: var(--c-p-10),
    caret-color: var(--c-p),
    subtitle-border: 3px solid var(--c-p-10),
    subtitle-font: var(--f-xl),
    subtitle-font-weight: map.get($font-weight, 'regular'),
    subitem-padding: var(--s-m),
  ),
  desktop: (
    menu-background: linear-gradient(90deg, var(--c-p-140), var(--c-p)),
    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-p-140),
    item-color-focus: var(--c-p-140),
    item-shadow-hover: none,
    item-current-background: var(--c-p-20),
    item-current-background-focus: map.get($color, 'white'),
    item-current-color: var(--c-p-140),
    item-current-shadow: #{inset 2px 0 0 var(--c-p),
    inset #{-2px} 0 0 var(--c-p)},
    item-current-margin: 0,
    separator-color: var(--c-p-60),
    link-padding: calc(var(--s-s) + var(--s-2xs)) var(--s-2xs)
      calc(var(--s-s) + var(--s-2xs)) var(--s-xs),
    link-expanded-padding: calc(var(--s-s) + var(--s-2xs)) var(--s-2xs)
      calc(var(--s-s) + var(--s-2xs) + 2px) var(--s-xs),
    link-line-height: map.get($line-height, 'm'),
    caret-padding: 0 var(--s-s),
    caret-focus-outline: var(--c-p),
    overflow-separator-width: 4px,
    overflow-separator-color: var(--c-p-60),
    overflow-separator-offset: 0px,
    overflow-border: none,
    overflow-border-hover: none,
    overflow-background: var(--c-p),
    overflow-background-hover: map.get($color, 'white'),
    overflow-color: map.get($color, 'white'),
    overflow-color-hover: var(--c-p-140),
    overflow-current-background-hover: map.get($color, 'white'),
    overflow-current-color-hover: var(--c-p),
    mega-border: none,
    mega-shadow: var(--sh-2),
    mega-padding: 2px 0 0,
    mega-column-gap: 0,
    mega-column-border: none,
    sublink-padding: var(--s-s) var(--s-xs),
    sublink-current-background: var(--c-p-10),
    sublink-current-shadow: inset 4px 0 0 0 var(--c-p),
  ),
);
// stylelint-enable length-zero-no-unit
