// 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: $modal-content-box-shadow-xs  !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,
.x-panel-floating {
  @extend .x-panel-light-header,
          .x-panel-light-footer,
          .x-panel-h-auto;

  @include border-radius($border-radius-lg);

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

  // Set rounded corners for modal to enable applying background color when needed
  .modal-header {
    @include border-top-radius($border-radius-lg);
  }

  .modal-footer {
    @include border-bottom-radius($border-radius-lg);
  }
}

%x-panel-center,
.x-panel-center {
  @extend %x-panel-floating,
          %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: translate3d(100%, 0, 0);
}

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

  // transform: translate3d(-100%, 0, 0);
}

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

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