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

$inpage-toggle-width: calc(var(--s-s) + var(--s-s) + var(--s-s));
$inpage-navigation: (
  align: left,
  border-radius: 0,
  shadow: none,
  title: (
    'background': transparent,
    'color': var(--cm-on-surface-brand),
    'font': 'microcopy-s',
    'font-weight': map.get($font-weight, 'semi-bold'),
    'letter-spacing': map.get($letter-spacing, 'm'),
    'text-transform': none,
    'padding': var(--s-s) 0 var(--s-xl),
  ),
  item: (
    'background': transparent,
    'background-active': var(--cm-surface-low-2),
    'background-hover': var(--cm-on-surface-inverted),
    'border': (
      'end': (
        'default': none,
        'hover': none,
        'active': none,
        'focus': none,
      ),
      'start': (
        'default': (
          'l': 4px solid var(--cm-border-grey-lowest),
          's': 4px solid transparent,
        ),
        'active': (
          'l': 4px solid var(--cm-border),
          's': 4px solid var(--cm-border),
        ),
        'focus': 4px solid var(--cm-border-primary),
        'hover': none,
      ),
    ),
    'font': 'body-m',
    'min-height': 2.5rem,
    'padding': (
      'default': (
        's': var(--s-xs) var(--s-m),
        'l': var(--s-xs) var(--s-m) var(--s-xs) calc(var(--s-m) - 4px),
      ),
    ),
    'separator': (
      's': none,
      'l': none,
    ),
    'font-weight': (
      's': map.get($font-weight, 'regular'),
      'l': map.get($font-weight, 'regular'),
    ),
    'color': (
      's': var(--cm-on-surface-brand),
      'l': var(--cm-on-surface-brand),
    ),
    'color-active': var(--cm-on-surface-brand),
    'text-decoration-hover': underline,
  ),
  trigger: (
    'background': var(--cm-on-surface-inverted),
    'border': 1px solid var(--cm-border-grey-medium),
    'border-radius': map.get($border-radius, 's'),
    'color': var(--cm-on-surface-brand),
    'font': 'body-m',
    'font-weight': map.get($font-weight, 'regular'),
    'height': 2.75rem,
    'margin': 0 auto,
    'outline': 2px solid var(--cm-border-primary),
    'outline-offset': -2px,
    'padding': calc(var(--s-xs) - 1px) calc(var(--s-m) - 1px),
    'background-wrapper': #fff,
    'margin-wrapper': 0 0 calc(-1 * var(--s-2xs)),
    'padding-wrapper': var(--s-s) var(--s-m),
    'shadow': var(--sh-2),
    'separator': 1px solid var(--cm-border-low),
    'width': calc(100% - #{map.get($grid, 'gutter-l')}),
  ),
  list: (
    'background': (
      's': #fff,
      'l': transparent,
    ),
    'shadow': (
      's': var(--sh-5),
      'l': none,
    ),
  ),
  outline: (
    'color': var(--cm-border-primary),
    'color-active': var(--cm-border-primary),
    'offset': -2px,
  ),
);