.callout {
  --callout-border-color: var(--primary-400);
  --callout-bg-color: var(--primary-50);

  border-left-width: var(--border-width-thick);
  border-left-style: var(--border-style-solid);
  border-left-color: var(--callout-border-color);
  background-color: var(--callout-bg-color);
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}

.callout--gray     { --callout-border-color: var(--gray-400); --callout-bg-color: var(--gray-50); }
.callout--primary  { --callout-border-color: var(--primary-400); --callout-bg-color: var(--primary-50); }
.callout--error    { --callout-border-color: var(--error-400); --callout-bg-color: var(--error-50); }
.callout--warning  { --callout-border-color: var(--warning-400); --callout-bg-color: var(--warning-50); }
.callout--success  { --callout-border-color: var(--success-400); --callout-bg-color: var(--success-50); }
.callout--info     { --callout-border-color: var(--info-400); --callout-bg-color: var(--info-50); }
.callout--blue     { --callout-border-color: var(--blue-400); --callout-bg-color: var(--blue-50); }
.callout--indigo   { --callout-border-color: var(--indigo-400); --callout-bg-color: var(--indigo-50); }
.callout--purple   { --callout-border-color: var(--purple-400); --callout-bg-color: var(--purple-50); }
.callout--pink     { --callout-border-color: var(--pink-400); --callout-bg-color: var(--pink-50); }
.callout--rose     { --callout-border-color: var(--rose-400); --callout-bg-color: var(--rose-50); }
.callout--orange   { --callout-border-color: var(--orange-400); --callout-bg-color: var(--orange-50); }


.callout.callout--no-bg {
  --callout-bg-color: transparent;
}