.header-callout {
  $content-spacing: -4;

  @include set-colors("background-secondary", $rewrite-css-vars: true);
  display: flex;
  padding: spacing(-3) spacing($page-padding-side);
  border-bottom-style: solid;
  border-bottom-width: 0;

  @include breakpoint("max-width") {
    padding-left: calc(50vw -  #{math.div($page-max-width, 2)} + #{spacing($page-padding-side)});
    padding-right: calc(50vw -  #{math.div($page-max-width, 2)} + #{spacing($page-padding-side)});
  }

  & + & {
    margin-top: $width-border;
  }

  @include icon-style {
    content: none; //no icon in default style callout
    line-height: line-height("single");
    margin-right: spacing(-4);
  }

  &.theme--dark {
    border-color: color("border");
    border-bottom-width: $width-border;
  }

  &--confirm {
    @include set-colors("utility-confirm-background", $rewrite-css-vars: true);
    border-color: color("utility-confirm");
    border-bottom-width: $width-border;

    @include set-icon("confirm-circle", $include-pseudo: "before");
  }

  &--attention {
    @include set-colors("utility-attention-background", $rewrite-css-vars: true);
    border-color: color("utility-attention");
    border-bottom-width: $width-border;

    @include set-icon("info-circle", $include-pseudo: "before");
  }

  &--warning {
    @include set-colors("utility-warning-background", $rewrite-css-vars: true);
    border-color: color("utility-warning");
    border-bottom-width: $width-border;

    @include set-icon("warning-triangle", $include-pseudo: "before");
  }

  &__content {
    display: flex;
    flex-wrap: wrap;
    max-width: $line-width-max;

    margin: 0 spacing($content-spacing, $times: -0.5);

    & > * {
      padding: 0 spacing($content-spacing, $times: 0.5);
    }
  }

  &__title {
    @include set-font(0, "single", $weight: "bold");
    margin: 0;
  }

  &__message {
    @include content-container;
    display: flex;
    flex-wrap: wrap;

    & > * {
      margin: spacing(-5) 0 0 0;
    }


    & p {

      flex: 1 1 auto;

      &:only-child {
        line-height: line-height("single"); //if the only content of the messages is a single p-tag it is to the single line-height, in order to have the same line height as the title, such that the two can align vertically next to each other
      }

      & + p {
        flex: 1 1 $line-width-max; //when the message contains p-tags following each other, the default width is set to the maximum line width, which forces it onto a line of its own. Flex-shrink of 1 then allows the to line to become more narrow, when the viewport is not wide enough to contain a line of the maximum line width.
      }
    }

    ul,
    ol {
      flex: 1 1 $line-width-max; //when the message contains a list it is forced onto a new line

      & li {
        margin: 0;
      }
    }
  }

  &__actions {
    flex: 1 0 100%;
    margin-top: spacing(-3);

    .button:not(.button--text) {
      align-self: flex-start;
      padding: spacing($button-padding-vertical-small) spacing($button-padding-horizontal-small);
    }

    .button--text {
      padding: spacing($button-padding-vertical-small) spacing($button-padding-horizontal-text-small);
    }

    .button-container .button--text {
      margin-left: spacing($button-spacing-horizontal-between-buttons, $times: .5, $subtract: spacing($button-padding-horizontal-text-small));
      margin-right: spacing($button-spacing-horizontal-between-buttons, $times: .5, $subtract: spacing($button-padding-horizontal-text-small));
    }
  }  


  &--warning,
  &--attention,
  &--confirm {
    @include utility-button;
  }  
}