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

$inpage-toggle-width: calc(var(--s-s) + var(--s-s) + var(--s-s));
$inpage-navigation: (
  align: right,
  border-radius: 0,
  shadow: none,
  title: (
    'background': transparent,
    'color': var(--c-d),
    'font': var(--f-s),
    'text-transform': uppercase,
    'padding': var(--s-s) var(--s-m),
  ),
  item: (
    'background': transparent,
    'background-active': var(--c-n-80),
    'background-hover': map.get($color, 'white'),
    'border': (
      'end': (
        'default': 4px solid var(--c-n),
        'hover': 4px solid var(--c-n),
        'active': 4px solid var(--c-p),
      ),
      'start': (
        'default': (
          'l': none,
          's': 4px solid transparent,
        ),
        'active': (
          'l': none,
          's': 4px solid var(--c-p),
        ),
        'hover': none,
      ),
    ),
    'min-height': 2.5rem,
    'padding': (
      'default': (
        's': var(--s-xs) var(--s-s),
        'l': var(--s-xs) calc(var(--s-m) - 4px) var(--s-xs) var(--s-m),
      ),
    ),
    'separator': (
      's': none,
      'l': none,
    ),
    'font-weight': (
      's': map.get($font-weight, 'regular'),
      'l': map.get($font-weight, 'regular'),
    ),
    'color': (
      's': var(--c-d),
      'l': var(--c-d),
    ),
    'color-active': var(--c-d),
    'text-decoration-hover': underline,
  ),
  trigger: (
    'background': map.get($color, 'white'),
    'border': 1px solid var(--c-d-80),
    'border-radius': 2px,
    'color': var(--c-d),
    'font': var(--f-m),
    'font-weight': map.get($font-weight, 'regular'),
    'height': 2.5rem,
    'margin': 0 auto,
    'outline': 2px solid var(--c-p),
    'outline-offset': -2px,
    'padding': calc(var(--s-xs) - 1px) calc(var(--s-m) - 1px),
    'background-wrapper': map.get($color, 'white'),
    'margin-wrapper': 0 0 calc(-1 * var(--s-xs)),
    'padding-wrapper': var(--s-s) var(--s-m),
    'shadow': var(--sh-6),
    'separator': none,
    'width': calc(100% - #{map.get($grid, 'gutter')}),
  ),
  list: (
    'background': (
      's': map.get($color, 'white'),
      'l': transparent,
    ),
    'scrollbar': left,
    'shadow': (
      's': var(--sh-6),
      'l': none,
    ),
  ),
  outline: (
    'color': var(--c-p),
    'color-active': var(--c-p),
    'offset': -2px,
  ),
);
