.pdc-alert {
  border-bottom-width: 5px;
  border-bottom-style: solid;
  color: var(--pdc-alert-fg-color);
}

/**
 * Reset the headings.
 *
 * We'll want to keep <hX> for structural and accessibility purposes, but not
 * apply the "fancy heading" styles that are unfortunately applied to all
 * heading elements globally by default.
 */
.pdc-alert h1,
.pdc-alert h2,
.pdc-alert h3,
.pdc-alert h4,
.pdc-alert h5,
.pdc-alert h6 {
  padding: var(--pdc-spacer-0);
  margin: var(--pdc-spacer-0);
  font-weight: var(--pdc-font-weight-semi-bold);
  line-height: var(--pdc-line-height-base);
  color: var(--pdc-alert-fg-color);
}

/**
 * Rescale headings for alerts.
 *
 * The contents of the alerts is formatted text (i.e. from a wysiwyg editor).
 * This means that the headings can contain h2-h6. However, the default sizing
 * is too large for the alerts. So we rescale the sizes to make sense for such
 * small space.
 */
.pdc-alert h1 { font-size: 2.7rem; }
.pdc-alert h2 { font-size: 2.5rem; }
.pdc-alert h3 { font-size: 2.3rem; }
.pdc-alert h4 { font-size: 2.1rem; }
.pdc-alert h5 { font-size: 1.9rem; }
.pdc-alert h6 { font-size: 1.7rem; }

/**
 * Remove the short underline present on headings.
 */
.pdc-alert h1::after,
.pdc-alert h2::after,
.pdc-alert h3::after,
.pdc-alert h4::after,
.pdc-alert h5::after,
.pdc-alert h6::after {
  content: revert;
}

.pdc-alert-content {
  max-width: var(--pdc-grid-max);
  margin: auto;
  padding: var(--pdc-alert-content-spacing) var(--pdc-alert-content-spacing) var(--pdc-alert-content-spacing) calc(var(--pdc-alert-icon-size) + (1.6rem * 2));
  min-height: calc(var(--pdc-alert-icon-size) + (1.6rem * 2));

  /* Needed for the positioned icon */
  position: relative;
}

/**
 * The alert/notification text is formatted text (i.e. from a wysiwyg editor).
 * The headings are arbitrary, you can't control the level and position the
 * editor wants it to be. So we attach the icon to the container instead.
 */
.pdc-alert-content::before {
  position: absolute;
  top: var(--pdc-alert-content-spacing);
  left: var(--pdc-alert-content-spacing);
  display: block;
  content: " ";
  font-family: var(--pdc-font-icons);
  font-weight: var(--pdc-font-icons-solid);
  font-size: var(--pdc-alert-icon-size);
  vertical-align: middle;
  line-height: var(--pdc-line-height-1);
}

.pdc-alert-warning {
  background: var(--pdc-alert-bg-warning);
  border-color: var(--pdc-color-warning);
}

.pdc-alert-warning .pdc-alert-content::before {
  content: var(--pdc-alert-icon-warning);
  color: var(--pdc-color-warning);
}

.pdc-alert-danger {
  background: var(--pdc-alert-bg-danger);
  border-color: var(--pdc-color-danger);
}

.pdc-alert-danger .pdc-alert-content::before {
  content: var(--pdc-alert-icon-danger);
  color: var(--pdc-color-danger);
}