// 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-dropshadow-left {
  @include box-shadow($x-overlay-box-shadow-left);
}

%x-dropshadow-right {
  @include box-shadow($x-overlay-box-shadow-right);
}

%x-dropshadow-top {
  @include box-shadow($x-overlay-box-shadow-top);
}

%x-dropshadow-bottom {
  @include box-shadow($x-overlay-box-shadow-bottom);
}

%x-panel-floating,
.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,
.x-panel-center {
  @extend .x-panel-floating,
          .mh-100,
          .m-auto;

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

}
%x-panel-right,
.x-panel-right {
  @extend %ml-auto;
  @include box-shadow($x-overlay-box-shadow-right);
  transform: translateX(100%);
}
%x-panel-left,
.x-panel-left {
  @include box-shadow($x-overlay-box-shadow-left);
  transform: translateX(-100%);
}

%x-panel-bottom,
.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%);
  }
}

.x-feedback-modal-header {
  button:not(.x-feedback-close) {
    display: none;
  }
}

.x-feedback-modal-body {
  border-bottom-left-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

.x-panel-connected-left {
  @include box-shadow($x-overlay-box-shadow-left);
  position: absolute;
  top: 0;
  left: 0;
  // z-index: $zindex-popover;
  .x-panel-connected-offset & {
    left: 240px;
  }

  .x-panel-connected-mobile & {
    @include media-breakpoint-up(lg) {
      top: 55px;
    }
  }
}