.x-alert {
  @extend %alert,
          %d-block,
          %position-relative;

  .x-icon {
    @extend %mr-1;
  }

  .x-alert-title {
    @extend %mr-2;
  }
}

.x-alert-main {
  @extend %x-flex-center,
          %alert,
          %w-100;

  .x-close {
    @extend %close;
  }
}

.x-alert-content {
  @extend %x-flex-a-center;

  @include media-breakpoint-down(md) {
    font-size: $font-size-sm;
  }

  .x-icon {
    @extend %mr-3;
  }
}