/*
  Font family is Nunito Sans. Its fallback is Helvetica
*/
/*
  Font sizes have been converted to rem considering a base size of 16px.
*/
/*
*  Z-Index
*  
*  The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. 
*  Overlapping elements with a larger z-index cover those with a smaller one.
*  
*  REF: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
*  REF: https://www.smashingmagazine.com/2019/04/z-index-component-based-web-application/  
*/
/**
 * Define media query values
 */
.alert__header {
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}
.alert__header bds-icon {
  min-width: 32px;
}
.alert__header bds-typo {
  margin-left: 8px;
  color: var(--color-content-din, black);
}
.alert__header--system {
  background: var(--color-system, #b2dffd);
}
.alert__header--system bds-typo {
  color: var(--color-content-default, #282828);
}
.alert__header--system .color-icon {
  color: var(--color-content-default, #282828);
}
.alert__header--error {
  background: var(--color-error, #fabebe);
}
.alert__header--error bds-typo {
  color: var(--color-content-default, #282828);
}
.alert__header--error .color-icon {
  color: var(--color-content-default, #282828);
}
.alert__header--warning {
  background: var(--color-warning, #fde99b);
}
.alert__header--warning bds-typo {
  color: var(--color-content-default, #282828);
}
.alert__header--warning .color-icon {
  color: var(--color-content-default, #282828);
}
.alert__header--delete {
  background: var(--color-delete, #e60f0f);
}
.alert__header--delete bds-typo {
  color: var(--color-content-bright, white);
}
.alert__header--delete .color-icon {
  color: var(--color-content-bright, white);
}