.notification {
  $notification-padding-horizontal: -1;
  $notification-padding-vertical: -2;
  $notification-spacing-icon: -2;
  $notification-spacing-icon-small: -4;

  @include set-colors("background-secondary", $rewrite-css-vars: true);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: spacing($notification-padding-vertical) spacing($notification-padding-horizontal) spacing($notification-padding-vertical) spacing($notification-padding-horizontal, $subtract: $width-border-utility);
  border-left: $width-border-utility solid transparent;

  @include icon-style {
    @include set-icon("info-circle");
    font-size: font-size(1);
    width: font-size(1);
    line-height: line-height("single");
    margin-right: spacing($notification-spacing-icon);
    align-self: flex-start;
  }

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

    .text--secondary,
    .button--text {
      color: color("utility-attention-foreground-secondary");
    }

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

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

    .text--secondary,
    .button--text {
      color: color("utility-warning-foreground-secondary");
    }

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

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

    .text--secondary,
    .button--text {
      color: color("utility-confirm-foreground-secondary");
    }

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

  &--constrain-width {
    max-width: $line-width-max;
  }

  &--vertical-margin {
    margin-top: spacing(-1);
    margin-bottom: spacing(-1);
  }

  &--small {
    padding: spacing(-5) spacing(-3);

    &::before {
      font-size: font-size(0);
      width: font-size(0);
      margin-right: spacing($notification-spacing-icon-small);
    }
  }

  &__content {
    @include content-container;
    flex: 1 1 0;
    max-width: $line-width-max;

    & * {
      line-height: line-height("single");
    }

    & p {
      margin: spacing(-4) 0;
    }
  }

  &__header {
    @include set-font(1, "single", $weight: "bold", $transform: "none");
    margin-bottom: 0;
  }

  &__actions {
    flex: 1 0 100%;
    margin-top: spacing(-3);
    padding-left: spacing($notification-spacing-icon, $add: font-size(1));

    .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;
  }
}