.alert {
  padding: 0;
  display: flex;
}

.alert-outline {
  color: $body-color;
  background: $white;

  hr {
    border-top-color: $gray-400;
  }

  .alert-message {
    @include border-end-radius($alert-border-radius);
    @include border-start-radius($alert-border-radius);
    border: 1px solid $gray-400;
  }

  .alert-message:not(:nth-child(2)) {
    @include border-start-radius(0);
    border-left: 0;
  }

  .alert-icon {
    @include border-start-radius($alert-border-radius);
    color: $white;
  }

  @each $color, $value in $theme-colors {
    &.alert-#{$color} .alert-icon {
      background-color: $value;
    }
  }
}

.alert-message {
  padding: $alert-padding-y $alert-padding-x;
  width: 100%;
  box-sizing: border-box;
}
