/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
.Banner {
  /* Set color on root of component. It can be overridden after the @include */
  color: var(--colorsTextDefault, #141414);
  /* Make sure font-family goes across entire component */
  font-family: "Nunito Sans", sans-serif;
  background: #ffffff;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.1);
  color: var(--colorsTextDefault, #141414);
  font-size: 16px;
  display: flex;
  line-height: 1.5;
  /** Modifying top spacing to compensate for height variation in text vs buttons.
  		Space is 'paid back' in .Banner__text */
  padding: 12px 16px 0;
  /** Spacing instructions for common elements within a banner. */
}
.Banner p {
  margin: 0;
}
.Banner p + p,
.Banner p + ul,
.Banner p + ol {
  margin-top: 16px;
}
.Banner ul,
.Banner ol {
  margin: 0;
  padding: 0 24px;
}
.Banner ul + p,
.Banner ol + p {
  margin-top: 16px;
}

.Banner__icon {
  font-size: 20px;
  margin-right: 16px;
  margin-top: 5px;
}
.Banner--info .Banner__icon {
  color: var(--colorsStatusInfoStrong, #0265dc);
}
.Banner--critical .Banner__icon {
  color: var(--colorsStatusCritical, #e13212);
}
.Banner--warning .Banner__icon {
  color: var(--colorsStatusWarning, #ffbe00);
}
.Banner--success .Banner__icon {
  color: var(--colorsStatusSuccessStrong, #007a4d);
}

.Banner--info {
  background-color: var(--colorsSurfacePrimarySubdued, #e0f2ff);
  border: 1px solid var(--colorsBorderPrimarySubdued, #b5deff);
}

.Banner--warning {
  background-color: var(--colorsSurfaceWarningSubdued, #fff9e2);
  border: 1px solid var(--colorsBorderWarningSubdued, #fff0b1);
}

.Banner--critical {
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
  border: 1px solid var(--colorsBorderCriticalSubdued, #ffb2a0);
}

.Banner--success {
  background-color: var(--colorsSurfaceSuccessSubdued, #cef8e0);
  border: 1px solid var(--colorsBorderSuccessSubdued, #89ecbc);
}

.Banner--compact .Banner__action > .Button:first-child {
  order: 2;
}

.Banner__body {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-between;
}

.Banner__text {
  align-self: center;
  flex: 1;
  margin-right: 24px;
  padding: 4px 0 16px;
}

.Banner__action {
  padding-bottom: 16px;
  width: 100%;
}
.Banner--compact .Banner__action {
  align-items: flex-start;
  display: flex;
  margin-bottom: 0;
  /** Modifying top spacing to compensate for height variation in text vs buttons.
  		Space is 'paid back' in .Banner__text */
  padding-bottom: 12px;
  width: auto;
}
.Banner__action .Button:not(:first-child):last-child {
  margin: 0 8px;
}

.Banner__title {
  color: var(--colorsTextDefault, #141414);
  font-weight: 600;
}

.Banner__close.a-Icon {
  align-self: baseline;
  color: var(--colorsTextDefault, #141414);
  font-size: 1.2em;
  margin-left: 24px;
  margin-top: 6px;
}

/*# sourceMappingURL=index.css.map */