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

// zindex
$x-overlay-panel-zindex:    $zindex-fixed !default; // 1030
$x-overlay-backdrop-zindex: $x-overlay-panel-zindex - 1 !default; // 1029

%x-overlay,
.x-overlay {
  @extend %d-flex,
          %align-items-center,
          %fixed-top,
          %h-100;
          z-index: auto;

  &.x-overlay-connected {
    @extend %position-relative;
  }
}

%x-overlay-panel,
.x-overlay-panel {
  @include transition(all 400ms ease);
  @extend %layout-column,
          %w-100,
          %d-block;
  background-color: theme-color("light");
  z-index: $x-overlay-panel-zindex;

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

  // Dark Panel
  &.x-panel-dark {
    background-color: theme-color("dark");
    .modal-header {
      .close {
        color: theme-color("info");
      }
    }

    .modal-footer {
      background-color: theme-color("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 {
      background-color: theme-color("light-secondary");
    }
  }
}

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

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

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

  .x-overlay-connected & {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}