// 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;

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

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

.modal-body {
  @extend %px-2,
          %py-2,
          %px-md-3,
          %py-md-4,
          %d-block,
          %position-relative,
          %overflow-auto;
  // Add Flex Basis here in order to show Ag-grid
  -webkit-overflow-scrolling: touch;
}

.modal-content {
  @extend %border-0,
          %mx-3;
}

.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);
}