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

$modal: (
  overlay: var(--cm-surface-lowest-variant),
  border-radius: map.get($border-radius, 'xs'),
  shadow: var(--sh-4),
  font: 'body-s',
  padding-block: var(--s-l) var(--s-xl),
  padding-inline: var(--s-2xl),
  margin-inline-mobile: var(--s-m),
  margin-inline-desktop: var(--s-5xl),
  header: (
    font: 'heading6',
    font-weight: map.get($font-weight, 'semi-bold'),
    icon-size: 1.75rem,
    icon-spacing: var(--s-3xs),
    margin-block-end: var(--s-4xs),
  ),
  close: (
    margin-top: -0.5rem,
    margin-end: -1rem,
  ),
  body: (
    scroll-margin-block-end: var(--s-xl),
    fixed-separator: 1px solid var(--cm-border-neutral),
    fixed-margin-block-end: var(--s-2xs),
    fixed-padding-block-start: var(--s-2xs),
  ),
  footer: (
    separator: 1px solid var(--cm-border-neutral),
    padding-block-start: var(--s-xl),
    margin-block-start: var(--s-xl),
  ),
);