.ui-c-message-bar {
  display: flex;
  font-size: 14px;
  font-weight: 700;
  border-radius: 2px;

  > div {
    width: 100%;
    padding: 16px;
  }

  li {
    white-space: pre-wrap;

    &:not(:last-child) {
      margin-bottom: var(--spacing-s);
    }
  }

  &:not(:has(*)) {
    display: none;
  }
}

.ui-c-message-bar--danger {
  color: var(--notify-danger-darkest);
  background-color: var(--notify-danger-lightest);
}

.ui-c-message-bar--danger-icon {
  &::before {
    padding: 17px 13px 16px 14px;
    content: url("/images/ui/error_icon.svg");
    background-color: var(--notify-danger-normal);
    border-radius: 2px 0 0 2px;
  }
}