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

$table: (
  row-border: 1px solid var(--cm-border-low),
  zebra-background: var(--cm-surface-low-1),
  table: (
    color: var(--cm-on-surface-brand),
    font: 'body-m',
  ),
  head: (
    background: var(--cm-surface-low-2),
    border: 1px solid var(--cm-border-low),
  ),
  header: (
    border: none,
    separator-mobile: 2px solid var(--cm-border),
    separator-desktop: 1px solid var(--cm-border),
    group-separator: 1px solid var(--cm-border),
    padding: var(--s-m),
    font-weight: map.get($font-weight, 'semi-bold'),
  ),
  cell: (
    separator: 1px solid var(--cm-border-low),
    padding-mobile: var(--s-m),
    padding-desktop: var(--s-m),
    margin-mobile: (
      top: calc(-1 * var(--s-m)),
      end: var(--s-m),
      bottom: calc(-1 * var(--s-m) - 1px),
      start: calc(-1 * var(--s-m)),
    ),
  ),
  multi-head: (
    background: var(--cm-surface-low-2),
    background-empty: var(--cm-surface-low-2),
    position: var(--s-m),
  ),
  sort: (
    icon-color: var(--cm-on-surface-brand),
    icon-color-active: var(--cm-on-surface-grey-medium),
    icon-spacing: -8px,
    arrow-top: calc(var(--s-m) + 3px),
    arrow-left: var(--s-m),
  ),
  caption: (
    font: 'microcopy-xs',
    color: var(--cm-on-surface-grey),
  ),
);