.modal-opened {
   overflow: hidden;
}

.wpj-modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 0;
   height: 0;
   display: flex;
   visibility: hidden;
   justify-content: center;
   align-items: center;
   z-index: -1;
   background: $modal-overlay-bg;
   backdrop-filter: $modal-backdrop-filter;

   &.active {
      z-index: 1000;
      visibility: visible;
      width: 100%;
      height: 100%;

      .#{component("Modal:Side", "class")} {
         right: 0;
      }
   }

   .wpj-modal-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: $modal-loader-padding;
      background: $modal-bg;
      border-radius: $modal-border-radius;

      &::before {
         content: "";
         display: block;
         border: $modal-loader-thick solid $modal-loader-color;
         border-radius: 50%;
         border-right-color: transparent;
         width: $modal-loader-size;
         height: $modal-loader-size;
         animation: loader 1.25s infinite linear;
      }
   }

   .wpj-modal-loading-side {
      position: absolute;
      top: 0;
      right: 0;
      height: 100vh;
   }
}

@keyframes loader {
   0% {
      transform: rotate(0);
   }

   100% {
      transform: rotate(360deg);
   }
}