// Alert Base
.c-alert {
  @include alert-base;

  &-top {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: $radius-square;
    padding: $alert-top-padding;

    .c-alert-icon {
      padding-right: $alert-top-padding;
      font-size: $alert-top-icon-size;
    }
  }

  // Alert Color Loop
  @each $name, $data in $alert-colors {
    $bg: map-get($data, bg);
    $color: map-get($data, color);

    &-#{$name} {
      @include alert-style($bg, $color);
    }
  }
}