// @import "~bootstrap/scss/modal";
@import "../../../core/components/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-header {
  @extend .p-0,
          .d-flex,
          .align-items-center;

  min-height: $x-modal-header-min-height;

  .modal-title {
    @extend .text-grey,
            .flex-auto,
            .mx-3;
  }

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

.modal-body {
  @extend %d-block,
          .overflow-auto;

  &.d-flex {
    @extend %d-flex;
  }

  // Add Flex Basis here in order to show Ag-grid
  flex-basis: 0.000001px;
}


@if($is-sirius) {
  .modal-content {
    @extend .border-0;
    > * {
      @extend .bg-white;
    }
  }

  .modal-content,
  .modal-header {
    @extend .overflow-auto;
  }
  //Remove x-modal-full after all large modal moved to overlay panel
  .x-modal-full {
    @extend .h-100;

    max-width: $x-modal-xl;

    .modal-content {
      @extend .align-self-stretch;
    }

    .modal-header {
      @extend .border-info,
              .bg-info;


      .modal-title {
        @extend .text-white;
      }

      .close {
        @extend .border-left,
                %btn-info;

        opacity: 1;
        .x-icon-container {
          @extend .x-icon-lg;
        }
      }

      .close {
        @extend  .border-light-transparent;
      }

    }
    .modal-footer {
      @extend .bg-light-secondary;
    }
  }

  .x-modal-fullscreen {
    @extend .x-modal-full,
            .mw-100;
    .modal-content {
      > * {
        @extend %layout-column;
      }
    }
    .modal-body {
      @extend .p-0;
    }
  }

  .modal-footer {
    flex-wrap: nowrap;

    .btn-link {
      @extend .px-0;
    }

    .btn,
    .btn-link {
      white-space: nowrap;
    }
  }
}

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

.footer-toolbar-container {
  @extend .d-flex,
          .justify-content-between;
}

.footer-toolbar {
  @extend .d-flex;

  &:only-child {
    @extend .ml-auto;
  }

  .footer-btn {
    &:not(:first-child) {
      @extend .ml-1;

      .btn-link,
      .x-switch {
        @extend .ml-2;
      }
    }
    &:not(:last-child) {
      @extend .mr-1;

      .btn-link,
      .x-switch {
        @extend .mr-2;
      }
    }
  }
}