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

$media-container: (
  border-radius: 0,
  shadow: none,
  caption-background-color: transparent,
  caption-color: var(--cm-on-surface-grey),
  caption-font: var(--f-xs),
  caption-line-height: map.get($line-height, 'xs'),
  caption-padding: var(--s-xs),
  caption-over: (
    background: color-mix(in srgb, var(--c-g-950) 60%, transparent),
    color: var(--cm-on-surface-inverted),
    padding: var(--s-xs) var(--s-m),
    line-height: map.get($line-height, '2xs'),
  ),
  expandable-spacing-top: var(--s-xl),
  scrollbar-width: 16px,
);
$media-container-print: (
  caption-font: map.get($font-print, 'xs'),
  caption-padding: map.get($spacing-print, 'xs'),
);