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

$x-overlay-panel-spacing: 5rem !default;
$x-overlay-panel-maximum: 3    !default;

// Style for Stacked Panels
// Start from second-to-last

/* ----------------
  x-overlay z-index from 1031 to 1039
 ------------------------*/

@for $i from 1 through $x-overlay-panel-maximum {
  .x-overlay:nth-of-type(#{$i}) {
    z-index: $zindex-fixed + ($x-overlay-panel-maximum - $i);

    &.x-overlay-loaded:not(.ng-animating) > {
      .x-panel-right {
        transform: translateX(-$x-overlay-panel-spacing * ($i - 1));
        .ng-animating:not(.x-overlay-center) ~ & {
          transform: translateX(-$x-overlay-panel-spacing * ($i - 2));
        }
      }

      .x-panel-left {
        transform: translateX($x-overlay-panel-spacing * ($i - 1));
        .ng-animating:not(.x-overlay-center) ~ & {
          transform: translateX($x-overlay-panel-spacing * ($i - 2));
        }
      }
    }
  }
  // For overlay-center panels, make sure they are on top of overlay-side panels
  .x-overlay-center:nth-of-type(#{$i}) {
    z-index: $zindex-fixed + ($x-overlay-panel-maximum*2 - $i);
  }
}