/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
.Announcement {
  /* 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;
  align-items: center;
  box-sizing: border-box;
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  padding: 0 16px;
  width: 100%;
  overflow: hidden;
}

.Announcement--info {
  background-color: var(--colorsStatusInfo, #0265dc);
  color: var(--colorsTextOnPrimary, white);
}

.Announcement--critical {
  background-color: var(--colorsStatusCriticalStrong, #e13212);
  color: var(--colorsTextOnCritical, white);
}

.Announcement--warning {
  background-color: var(--colorsStatusWarning, #ffbe00);
  color: var(--colorsTextOnWarning, #141414);
}

.Announcement__action.Button {
  margin: 0 0 0 16px;
  white-space: nowrap;
}

.Announcement__body {
  align-items: center;
  display: flex;
  line-height: 1.25;
  margin: auto;
  overflow: hidden;
  padding-left: 4px;
  padding-right: 4px;
}

.Announcement__title {
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  font-weight: 600;
  padding: 16px 0;
}

.Announcement__close.Button.Button, .Announcement__close.Button.Button:hover {
  background-color: transparent;
}

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