@import "~bootstrap/scss/modal";

// Set default customise component variables here,
// Override it in theme variables files

$x-modal-xl:                map-get($container-max-widths, 'xl')   !default;
$x-modal-header-min-height: 3.125rem                               !default;

.modal-dialog {
  @extend .modal-dialog-centered;
}

// Modal sizes
.modal-header {
  @extend .d-flex,
          .align-items-center;
  // min-height: $x-modal-header-min-height;

  .modal-title {
    @extend .text-info,
            .flex-auto,
            .mx-0;
    @if ($has-custom-theme) {
      .has-custom-theme & {
        @extend .x-text-primary;
      }
    }
  }

  .close {
    @extend .rounded-0,
            .x-icon-lg,
            .p-0,
            .m-0;
  }
}

.modal-body {
  @extend .d-block,
          .overflow-auto;
  // Add Flex Basis here in order to show Ag-grid
  -webkit-overflow-scrolling: touch;
  .x-modal-grid-height {
    height: 60vh;
  }
}

.modal-content {
  @extend .border-0;
}

.modal-body-columns {
  @extend .p-0;

  .row {
    @extend .m-0,
            .p-0,
            .no-gutters;
  }
}

.x-modal-content-end {
  @extend .d-flex,
          .align-items-end,
          .align-self-end;

  &[hidden] {
    @extend .d-none;
  }
}

// Apply Background to modal on top of modal
.modal.show ~ .modal.show {
  background: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
}