%x-modal-alert-default {
  @extend %text-center;

  .modal-header {
    .modal-title {
      @extend %h5,
      %mb-0;
    }
  }

  .modal-body {
    .x-icon {
      @extend %display-4,
      %mb-2;
    }

    .x-text {
      @extend %font-size-base;
    }
  }

  .modal-footer {
    @extend %justify-content-center;

    .btn {
      @extend %x-min-width-120;
    }
  }
}


.x-modal-alert {
  @extend %x-modal-alert-default;

  &.x-modal-alert-md {
    width: 28rem;
  }

  &.x-modal-alert-md {
    @extend .modal-sm
  }

  .modal-content {
    @extend %py-2;
  }

  .modal-header,
  .modal-footer {
    @extend %border-0;
  }

  .modal-title {
    @extend %mx-0;
  }

  .modal-footer {
    @extend %pt-0;
  }
}