.maintenance-alert {
  box-sizing: border-box;
  width: 100vw;
  height: 40px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  align-items: stretch;
  background-color: rgb(var(--color-maintenance-bg));
}

.maintenance-alert__accent {
  flex: 0 0 16px;
  background-color: rgb(var(--color-maintenance-accent));
}

.maintenance-alert__content {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-inline: var(--space-2);
}

.maintenance-alert__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  /* icon-warning.svg is a white outline, meant for dark/colored button
     backgrounds (see paragraph--button.html.twig) - invisible on this
     component's light background. Forcing it to solid black here rather
     than editing the shared SVG file, which would also affect that
     other, unrelated usage. */
  filter: brightness(0);
}

.maintenance-alert__message {
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: var(--font-weight-body);
  color: rgb(var(--color-black));
  line-height: 150%;
}

.maintenance-alert__message strong,
.maintenance-alert__message b {
  font-weight: 700;
}

/* This is a single-line banner - hide any manual line break so a message
   authored with one (e.g. left over from before Slim mode was removed)
   still renders as one compact line rather than reintroducing a second
   line. */
.maintenance-alert__message br {
  display: none;
}

@media (max-width: 767px) {
  .maintenance-alert__content {
    padding-inline: var(--space-2);
  }
}