.cd-callout[data-type="critical"] {
  --alert-bgColor: var(--cd-color-critical-subtle);
  --alert-borderColor: var(--cd-color-critical-muted);
  --alert-iconColor: var(--cd-color-critical-fg);
}
.cd-callout[data-type="info"] {
  --alert-bgColor: var(--cd-color-info-subtle);
  --alert-borderColor: var(--cd-color-info-muted);
  --alert-iconColor: var(--cd-color-info-fg);
}
.cd-callout[data-type="success"] {
  --alert-bgColor: var(--cd-color-success-subtle);
  --alert-borderColor: var(--cd-color-success-muted);
  --alert-icon-fgColor: var(--cd-color-success-fg);
}
.cd-callout[data-type="option"] {
  --alert-bgColor: var(--cd-color-option-subtle);
  --alert-borderColor: var(--cd-color-option-muted);
  --alert-iconColor: var(--cd-color-option-fg);
}
.cd-callout[data-type="warning"] {
  --alert-bgColor: var(--cd-color-warning-subtle);
  --alert-borderColor: var(--cd-color-warning-muted);
  --alert-iconColor: var(--cd-color-warning-fg);
}

.cd-callout {
  position: relative;
  width: 100%;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 10px;
  background-color: var(--alert-bgColor, #fff);
  border: 1px solid var(--alert-borderColor, #444);
}

.cd-callout-icon {
  color: var(--alert-iconColor, #222) !important;
  line-height: 1;
  margin-top: 6px;
  font-size: 1.1em;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.cd-callout-content {
  font-size: var(--font-size-md);
  padding: 0 10px 0 8px;
  display: block;
  flex-grow: 1;
}

.cd-callout-title {
  font-size: inherit;
  font-weight: 600;
  padding: 2px 10px 0;
  margin: 0;
}

.cd-callout-description {
  padding: 0 10px;
  margin: 0;
  flex-grow: 1;
}