$default-variables: (
  'Card____background': var(--color--invert),
  'Card____border-radius': var(--radius--med),
  'Card____box-shadow': var(--shadow--s),
  'Card____margin': 1em,
  'Card____transition-duration': var(--timing--hover),
  'Card--hover____box-shadow': var(--shadow--l),
  'Card____border-width': var(--radius--med),
  'CardBody____padding': 0.75em,
  'CardFooter____border-top': 1px solid var(--color--gray-5),
  'CardFooter____margin': auto 0.75em 0 0.75em,
  'CardFooter____padding': 0.75em 0
);

@mixin generate-card-theme-variables($theme-variables: ()) {
  $variables: map-merge($default-variables, $theme-variables);

  @each $name, $value in $variables {
    --#{$name}: #{$value};
  }
}