.toast-notification {
  @include set-colors("background-secondary");
  position: fixed;
  display: flex;
  align-items: center;
  top: spacing(2);
  left: 0;
  right: 0;
  box-shadow: $shadow-style-front color("shadow");
  padding: spacing($toast-notification-padding-vertical) spacing($page-padding-side) spacing($toast-notification-padding-vertical) spacing($page-padding-side, $subtract: $width-border-utility);
  border-left: $width-border-utility solid transparent;
  z-index: $z-index-toast-notifcation;

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

  @include breakpoint("low-height") {
    top: spacing(0);
    padding-left: spacing($toast-notification-padding-horizontal, $subtract: $width-border-utility);
    padding-right: spacing($toast-notification-padding-horizontal);
  }

  @include breakpoint("medium") {
    left: spacing($page-padding-side);
    right: spacing($page-padding-side);
    padding-left: spacing($toast-notification-padding-horizontal, $subtract: $width-border-utility);
    padding-right: spacing($toast-notification-padding-horizontal);
  }

  @include breakpoint("wide") {
    width: spacing($toast-notification-padding-horizontal, $times: 2, $add: $line-width-max);
    left: spacing($toast-notification-padding-horizontal, $times: -1, $subtract: math.div($line-width-max, 2), $add: 50%);
    right: auto;
  }

  animation-name: animation-toast-in;
  animation-timing-function: $easing-in;
  animation-duration: 300ms;
  animation-iteration-count: 1;
  animation-direction: normal;

  @keyframes animation-toast-in {
    from {
      opacity: 0;
      transform: translateY(spacing(2, $times: -1));
    }

    80% {
      opacity: 1;
      transform: translateY(spacing(-1));
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes animation-toast-out {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    20% {
      opacity: 1;
      transform: translateY(spacing(-1));
    }

    to {
      opacity: 0;
      transform: translateY(spacing(2, $times: -1));
    }
  }

  &--move-out {
    animation-name: animation-toast-out;
    animation-timing-function: $easing-out;

    opacity: 0;
    transform: translateY(spacing(2));
  }

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

  &--attention {
    @include set-colors("utility-attention-background", $rewrite-css-vars: true);
    border-color: color("utility-attention");
    @include set-icon("info-circle", $include-pseudo: "before");
  }

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

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

  &__content {
    @include content-container;
    flex-grow: 1;

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

  .button {
    align-self: flex-start;
    margin-left: spacing(-3);
    padding: spacing($button-padding-vertical-small) spacing($button-padding-horizontal-small);
  }

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