.alert {
  overflow: hidden;
}

.iconWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.content {
  width: 100%;
  max-width: var(--max-width-page);
  margin: 0 auto;
  display: flex;
  gap: var(--Space-x2);
}

.innerContent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--Space-x1);
  padding: var(--Space-x2) 0;
  flex-grow: 1;
}

.textWrapper {
  display: grid;
  gap: var(--Space-x05);
}

.alert .closeButton {
  padding: var(--Space-x15);
  display: flex;
  align-items: center;
}

/* Intent: inline */
.inline {
  border-radius: var(--Corner-radius-lg);
  border: 1px solid var(--Base-Border-Subtle);
  background-color: var(--Base-Surface-Primary-light-Normal);
}
.inline .innerContent {
  padding-right: var(--Space-x3);
}
.inline .iconWrapper {
  padding: var(--Space-x15);
}
.inline.alarm .iconWrapper {
  background-color: var(--Surface-Feedback-Error-Accent);
}
.inline.warning .iconWrapper {
  background-color: var(--Surface-Feedback-Warning-Accent);
}
.inline.info .iconWrapper {
  background-color: var(--Surface-Feedback-Information-Accent);
}
.inline.success .iconWrapper {
  background-color: var(--Surface-Feedback-Succes-Accent);
}
.inline .icon,
.inline .icon * {
  fill: var(--Base-Surface-Primary-light-Normal);
}

/* Intent: banner */
.banner {
  border-left-width: 6px;
  border-left-style: solid;
}
.banner.alarm {
  border-left-color: var(--Surface-Feedback-Error-Accent);
  background-color: var(--Scandic-Red-00);
}
.banner.warning {
  border-left-color: var(--Surface-Feedback-Warning-Accent);
  background-color: var(--Scandic-Yellow-00);
}
.banner.info {
  border-left-color: var(--Surface-Feedback-Information-Accent);
  background-color: var(--Scandic-Blue-00);
}
.banner.success {
  border-left-color: var(--Surface-Feedback-Succes-Accent);
  background-color: var(--Scandic-Green-00);
}
.banner.alarm .icon,
.banner.alarm .icon * {
  fill: var(--Surface-Feedback-Error-Accent);
}
.banner.warning .icon,
.banner.warning .icon * {
  fill: var(--Surface-Feedback-Warning-Accent);
}
.banner.info .icon,
.banner.info .icon * {
  fill: var(--Surface-Feedback-Information-Accent);
}

.banner.success .icon,
.banner.sucess .icon * {
  fill: var(--Surface-Feedback-Succes-Accent);
}

@media screen and (min-width: 768px) {
  .innerContent {
    flex-direction: row;
    align-items: center;
    gap: var(--Space-x2);
  }
}