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

// Box Shadow
$x-overlay-box-shadow-offset: 1rem                           !default;
$x-overlay-box-shadow-blur:   2rem                           !default;
$x-overlay-box-shadow-spread: -0.5rem                        !default;
$x-overlay-box-shadow-color:  rgba(theme-color('dark'), .24) !default;

$x-overlay-box-shadow-center: $box-shadow  !default; // Same Box Shadow with Modal
$x-overlay-box-shadow-top:    0 $x-overlay-box-shadow-offset  $x-overlay-box-shadow-blur $x-overlay-box-shadow-spread $x-overlay-box-shadow-color   !default;
$x-overlay-box-shadow-right:  -$x-overlay-box-shadow-offset 0 $x-overlay-box-shadow-blur $x-overlay-box-shadow-spread $x-overlay-box-shadow-color   !default;
$x-overlay-box-shadow-bottom: 0 (-$x-overlay-box-shadow-offset) $x-overlay-box-shadow-blur $x-overlay-box-shadow-spread $x-overlay-box-shadow-color !default;
$x-overlay-box-shadow-left:   $x-overlay-box-shadow-offset 0  $x-overlay-box-shadow-blur $x-overlay-box-shadow-spread $x-overlay-box-shadow-color   !default;

.x-panel-floating {
  @extend .x-panel-light-header,
          .x-panel-light-footer,
          .x-panel-h-auto;

  @include border-radius(map_get($spacers, 2));

  &.border-0-sm {
    @include media-breakpoint-down(sm) {
      @include border-radius(map_get($spacers, 0));
    }
  }

  .modal-body {
    @extend .flex-auto;
  }

}

.x-panel-center {
  @extend .x-panel-floating,
          .mh-100,
          .m-auto;

  @include box-shadow($x-overlay-box-shadow-center);

}

.x-panel-right {
  @extend .ml-auto;
  @include box-shadow($x-overlay-box-shadow-right);

  transform: translateX(100%);
}

.x-panel-left {
  @include box-shadow($x-overlay-box-shadow-left);

  transform: translateX(-100%);
}


.x-panel-bottom {
  @extend .fixed-bottom;
  @include box-shadow($x-overlay-box-shadow-bottom);

  &.x-panel-right {
    transform: translateX(0);
  }
}

:not(.x-overlay-loaded) >,
.x-overlay-loaded.ng-animating > {
  .x-panel-center {
    opacity: 0;
    transform: translateY(-25%);
  }

  .x-panel-top {
    opacity: 0;
    transform: translateY(-100%);
  }
}