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

$x-overlay-panel-spacing: 5rem !default;
$x-overlay-panel-maximum: 5    !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-panel-right,
    .x-panel-right {
      &:not(.x-panel-not-shift) {
        transform: translate3d(-$x-overlay-panel-spacing * ($i - 1), 0, 0);
        .ng-animating:not(.x-overlay-center) ~ & {
          transform: translate3d(-$x-overlay-panel-spacing * ($i - 2), 0, 0);
        }
      }
      &.x-panel-not-shift {
        transform: translate3d(0, 0, 0);
      }
    }

    %x-panel-left,
    .x-panel-left {
      transform: translate3d($x-overlay-panel-spacing * ($i - 1), 0, 0);
      .ng-animating:not(.x-overlay-center) ~ & {
        transform: translate3d($x-overlay-panel-spacing * ($i - 2), 0, 0);
      }
    }
  }
  // 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);
  }
}