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

// Backdrop BG
$x-overlay-backdrop-bg:      $modal-backdrop-bg !default;
$x-overlay-backdrop-opacity: 0.3                !default;

.x-overlay {
  @extend .d-flex,
          .align-items-center,
          .fixed-top,
          .h-100;
}

.x-overlay-panel {
  @extend .w-100,
          .d-block,
          .bg-white,
          .h-100,
          .d-flex,
          .flex-column;

  z-index: 1;
  // For better transition performance
  // transform-style: preserve-3d;
  // backface-visibility: hidden;

  // Dark Panel
  &.x-panel-dark {
    @extend %bg-dark;

    .modal-header {
      .close {
        @extend %text-light;
      }
    }

    .modal-footer {
      @extend %bg-dark-secondary;
    }
  }

  &:not(.x-panel-light-header) {
    .close {
      &:not(:first-child) {
        @extend .border-left,
                .border-light-transparent;
      }

      .x-icon-container {
        @extend .x-icon-lg;
      }
    }

    &:not(.x-panel-dark) {
      .modal-header {
        @extend .border-info,
                %bg-info;

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

        .close {
          @extend %btn-info;
          opacity: 1;
        }
      }
    }
  }

  &:not(.x-panel-dark):not(.x-panel-light-footer) {
    .modal-footer {
      @extend %bg-light-secondary;
    }
  }
  &:not(.x-panel-floating) {
    .modal-content,
    .modal-header {
      @extend .rounded-0;
    }
  }
}

.x-overlay-backdrop {
  @extend .fixed-top,
          .fixed-bottom;

  @include transition(background-color 400ms ease);

  z-index: unset;
  bottom: 0;
  background-color: $x-overlay-backdrop-bg;
  opacity: $x-overlay-backdrop-opacity;
}

.x-overlay-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}

@media only screen and (min-width: 1440px) {
  .x-split-lg > * {
    width: 50% !important;
  }
  .x-split-lg {
    .x-overlay-panel {
      width: 50% !important;
      max-width: 100%;
    }
    .layout-column {
      flex: unset;
    }
  }
}


@media only screen and (max-width: 1230px) {
  .x-split-lg .x-overlay-panel {
      max-width: 60% !important;
    }
}

.x-cdk-overlay-container {
  z-index: 1051 !important;
}