// 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,
          .layout-column;

  @include transition(all 400ms ease);

  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-info;
      }
    }

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

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