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

$quiz: (
  quiz: (
    background: var(--cm-surface-grey-low-0),
    background-padding-top: var(--s-13xl),
    background-padding-bottom: var(--s-11xl),
    counter-font: 'body-xs',
    description-font: 'body-m',
    list-gap-mobile: var(--s-l),
    list-gap-tablet: var(--s-3xl),
    list-gap-desktop: var(--s-6xl),
    list-spacing-desktop: var(--s-6xl),
    list-spacing-tablet: var(--s-3xl),
    list-spacing-mobile: var(--s-xl),
    prev-next-color: var(--ecl-color-grey-600),
    prev-next-font: var(--f-xs),
    prev-next-font-weight: map.get($font-weight, 'semi-bold'),
    prev-next-spacing: var(--s-4xl),
    dot-background: var(--ecl-color-grey-600),
    dot-active-background: var(--c-p-600),
    dot-spacing: var(--s-3xs),
    outline-color: var(--cm-border-primary),
    title-font: 'heading2',
    title-font-weight: map.get($font-weight, 'semi-bold'),
  ),
  card: (
    category-font: 'body-xs',
    category-font-weight: map.get($font-weight, 'bold'),
    color: var(--cm-on-surface-inverted),
    question-answer-font: 'body-l',
    question-answer-font-weight: map.get($font-weight, 'semi-bold'),
    question-answer-spacing: var(--s-5xl),
    question-answer-poll-spacing: var(--s-xl),
    description-spacing-desktop: var(--s-xl),
    flip-link-font: 'body-xs',
    padding: var(--s-5xl) var(--s-3xl),
    poll-answer-font: 'body-s',
    icon-background: var(--c-w-300),
    first-background: var(--c-g-950),
    second-background: var(--c-p-400),
    second-color: var(--cm-on-surface-brand),
    third-background: var(--c-p-700),
    option-background: var(--c-w-200),
    second-option-background: var(--c-w-400),
    option-border: var(--c-w-500),
    second-option-border: var(--c-w-600),
    option-font: 'body-s',
  ),
  card-back: (
    background: var(--cm-on-surface-inverted),
    color: var(--cm-on-surface-brand),
    border: var(--cm-border-grey-low),
    flip-link-color: var(--cm-on-surface-brand),
    icon-color: var(--cm-on-surface-inverted),
    option-color: var(--cm-on-surface-brand),
    error-icon-color: var(--c-er-600),
    option-background: var(--c-a-50),
    option-border: var(--c-a-300),
    success-color: var(--c-su-200),
    success-icon-color: var(--c-su-700),
    error-color: var(--c-er-100),
  ),
);
$quiz-print: (
  question-font-weight: map.get($font-weight, 'semi-bold'),
);