/**
 * @file
 * Callouts: a tinted panel with a tone icon, a title and a body.
 */

:where(.gdrfad-dds) .dds-callout,
.gdrfad-dds-embedded .dds-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-gap-md);
  padding: var(--padding-padding-lg);
  border: 1px solid var(--surface-outline-variant);
  border-radius: var(--radius-sm);
  background: var(--neutral-neutral-variant);
  color: var(--neutral-on-neutral-variant);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

:where(.gdrfad-dds) .dds-callout__icon,
.gdrfad-dds-embedded .dds-callout__icon {
  margin-block-start: 2px;
}

:where(.gdrfad-dds) .dds-callout__body,
.gdrfad-dds-embedded .dds-callout__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--gap-gap-xs);
  min-inline-size: 0;
}

:where(.gdrfad-dds) .dds-callout__title,
.gdrfad-dds-embedded .dds-callout__title {
  font-size: var(--font-size-body);
  font-weight: 700;
  line-height: var(--line-height-body);
}

:where(.gdrfad-dds) .dds-callout__list,
.gdrfad-dds-embedded .dds-callout__list {
  margin: 0;
  padding-inline-start: 20px;
}

:where(.gdrfad-dds) .dds-callout a,
.gdrfad-dds-embedded .dds-callout a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

:where(.gdrfad-dds) .dds-callout--info,
.gdrfad-dds-embedded .dds-callout--info {
  border-color: var(--info-info);
  background: var(--info-info-variant);
  color: var(--info-on-info-variant);
}

:where(.gdrfad-dds) .dds-callout--info .dds-callout__icon,
.gdrfad-dds-embedded .dds-callout--info .dds-callout__icon {
  color: var(--info-info);
}

:where(.gdrfad-dds) .dds-callout--success,
.gdrfad-dds-embedded .dds-callout--success {
  border-color: var(--success-success);
  background: var(--success-success-variant);
  color: var(--success-on-success-variant);
}

:where(.gdrfad-dds) .dds-callout--success .dds-callout__icon,
.gdrfad-dds-embedded .dds-callout--success .dds-callout__icon {
  color: var(--success-success);
}

:where(.gdrfad-dds) .dds-callout--warning,
.gdrfad-dds-embedded .dds-callout--warning {
  border-color: var(--warning-warning);
  background: var(--warning-warning-variant);
  color: var(--warning-on-warning-variant);
}

:where(.gdrfad-dds) .dds-callout--warning .dds-callout__icon,
.gdrfad-dds-embedded .dds-callout--warning .dds-callout__icon {
  color: var(--warning-warning);
}

:where(.gdrfad-dds) .dds-callout--error,
.gdrfad-dds-embedded .dds-callout--error {
  border-color: var(--error-error);
  background: var(--error-error-variant);
  color: var(--error-on-error-variant);
}

:where(.gdrfad-dds) .dds-callout--error .dds-callout__icon,
.gdrfad-dds-embedded .dds-callout--error .dds-callout__icon {
  color: var(--error-error);
}

:where(.gdrfad-dds) .dds-callout--neutral .dds-callout__icon,
.gdrfad-dds-embedded .dds-callout--neutral .dds-callout__icon {
  color: var(--surface-on-surface-variant);
}