.box {
  @include content-container;

  padding: spacing(-1);

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

  .grid & + & {
    margin-top: 0;
  }

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

  &--no-padding {
    padding: 0;
  }

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

  &--border {
    border: $width-border solid color("border");
  }

  &--theme {
    @include set-colors("theme", $rewrite-css-vars: true);
  }

  &--confirm {
    @include set-colors("utility-confirm-background", $rewrite-css-vars: true);
    border-left: $width-border-utility solid color("utility-confirm");
    padding-left: spacing(-1, $subtract: $width-border-utility);
  }

  &--attention {
    @include set-colors("utility-attention-background", $rewrite-css-vars: true);
    border-left: $width-border-utility solid color("utility-attention");
    padding-left: spacing(-1, $subtract: $width-border-utility);
  }

  &--warning {
    @include set-colors("utility-warning-background", $rewrite-css-vars: true);
    border-left: $width-border-utility solid color("utility-warning");
    padding-left: spacing(-1, $subtract: $width-border-utility);
  }

  &--stretchable {
    display: flex;
    flex-direction: column;

    & > *:not(:first-child) {
      margin-top: spacing(-1);
    }
  }

  &__stretchable-content {
    @include content-container;
    flex: 1 0 auto;
  }

  &__auto-height-content {
    @include content-container;
    flex: 0 0 auto;
  }

  &--highlight {
    border-width: $width-border-slim;
    border-style: solid;

    &--warning {
      border-color: color("utility-warning");
    }

    &--confirm {
      border-color: color("utility-confirm");
    }

    &--attention {
      border-color: color("utility-attention");
    }
  }

  &-message {
    @include set-font(0, "single", $max-width: "default");
    margin-top: spacing($forms-margin-label);
    padding: spacing(-5) spacing(-3) spacing(-5) 0;
    display: inline-flex;
    align-self: baseline;
    font-size: var(--font-size-0);
    margin-bottom: spacing(-5);

    @include icon-style {
      margin-right: spacing(-3);
      margin-top: spacing(-5, $times: -1);
      margin-bottom: spacing(-5, $times: -1);
      padding: spacing(-5);
      width: spacing(-5, $times: 2, $add: #{line-height("single", $include-calc: false)});
      text-align: center;
    }

    &::before {
      font-family: "font-awesome";
      font-weight: 300;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      text-rendering: auto;
      margin-right: var(--spacing-m3);
      margin-top: calc(var(--spacing-m5) * -1);
      margin-bottom: calc(var(--spacing-m5) * -1);
      padding: var(--spacing-m5);
      width: calc(var(--spacing-m5) * 2 + 1.1em + 0.3rem);
      text-align: center;
    }
    
    &--confirm {
      @include set-colors("utility-confirm-background");
      &::before {
        content: "\f058";
        background-color: var(--color-utility-confirm);
      }      
    }

    &--attention {
      @include set-colors("utility-attention-background");
      &::before {
        content: "\f05a";
        background-color: var(--color-utility-attention);
      }      
    }    

    &--warning {
      @include set-colors("utility-warning-background");
      &::before {
        content: "\f071";
        background-color: var(--color-utility-warning);
      }      
    }    
  }
}