$default-variables: (
  'Callout__Title-Container____padding': 0.5em 1em,
  'Callout__Detail-Container____padding': 1em,
);

$default-color-variables: (
  // Error variant
  'Callout--error____bg-color': #FFE9EE, // This color does not yet exist in particle
  'Callout--error____border-color': var(--color--red-100),
  'Callout--error____color': var(--color--red-700),
  'Callout--error____color-rgb': var(--color--red-700-rgb),
  'Callout--error____icon-color': var(--color--red-500),

  // Tip variant
  'Callout--tip____bg-color': var(--color--purple-100),
  'Callout--tip____border-color': var(--color--purple-300),
  'Callout--tip____color': var(--color--purple-700),
  'Callout--tip____color-rgb': var(--color--purple-700-rgb),
  'Callout--tip____icon-color': var(--color--purple-500),

  // Warning variant
  'Callout--warning____bg-color': var(--color--gold-100),
  'Callout--warning____border-color': rgba(137, 99, 0, 0.20), // This color does not yet exist in particle
  'Callout--warning____color': #896300, // This color does not yet exist in particle, it is technically a tag color
  'Callout--warning____color-rgb': '137, 99, 0', // RGB value of #896300
  'Callout--warning____icon-color': var(--Callout--warning____color),

  // Info variant
  'Callout--info____bg-color': var(--color--blue-50),
  'Callout--info____border-color': var(--color--blue-100),
  'Callout--info____color': var(--color--blue-600),
  'Callout--info____color-rgb': var(--color--blue-600-rgb),
  'Callout--info____icon-color': var(--color--blue-500),
);

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

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

@mixin generate-callout-color-variables($color-variables: ()) {
  $variables: map-merge($default-color-variables, $color-variables);

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