.receipt {
  $component-name: ".receipt";
  display: flex;
  flex-direction: column;
  align-items: center;

  &__icon {
    margin-bottom: spacing(-1);

    @include icon-style {
      font-size: 12em; //em so that things get a little larger on a wider display
      line-height: 1;
      color: color("utility-confirm");
    }

    &:not([class*=icon-]) {
      &::before {
        @include set-icon("confirm-circle");
      }
    }
  }

  &__header {
    @include set-font(2, "single", $weight: "bold");
    margin: 0;
    text-align: center;
  }

  &__text {
    @include set-font(1, "single", $weight: "light");
    margin: 0;
    margin-top: spacing(-5);
    text-align: center;

    &--large {
      @include set-font(2, "single", $weight: "light");
    }
  }

  &__post-action {
    @include content-container;
    margin-top: spacing(0);
  }

  &--attention {
    #{$component-name}__icon {
      &::before {
        color: color("utility-attention");
      }
    }
  }
}