@import "~bootstrap/scss/alert";

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

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

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

.x-alert-main {
  @extend .alert,
          .d-flex,
          .px-3,
          .w-100,
          .align-items-center,
          .justify-content-center;

  .x-close {
    @extend .close,
            .ml-3;
  }
}

.x-alert-content {
  @extend .d-flex,
          .align-items-center;

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

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