// core
.slidePanel {
  position: fixed;
  max-width: 100%;
  max-height: 100%;
  visibility: hidden;

  &-right, &-left {
    // height: 100%;
    width: 500px;

    @media (max-width: 768px) {
      width: 100%;
    }
  }
  &-top, &-bottom {
    width: 100%;
    height: 400px;

    @media (max-width: 768px) {
      // height: 100%;
      top: 0;
      bottom: 0;
      height: auto;
    }
  }
  &-left {
    top: 0;
    bottom: 0;
    left: 0;
  }
  &-right {
    top: 0;
    right: 0;
    bottom: 0;
  }
  &-top {
    top: 0;
    left: 0;
  }
  &-bottom {
    bottom: 0;
    left: 0;
  }

  &-html {
    // height: 100%;
    // overflow: hidden;

    // body {
    // 	height: 100%;
    // }
  }

  &-show {
    visibility: visible;
  }
}

.slidePanel-loading {
  visibility: hidden;

  &-show {
    visibility: visible;
  }
}
// spinner
.slidePanel-loading {
  .spinner {
    // make spinner center
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
