// Kill the scroll on the body
.focus-opened {
   overflow: hidden;

   .focus {
      overflow-x: hidden;
      overflow-y: auto;
   }
}

// Container with backdrop
.focus {
   background: rgba(0, 0, 0, .6);
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: none;
   z-index: -1;

   &.active {
      display: block;
      z-index: 1000;
   }
}

// For vertical centering
.focus-dialog {
   display: flex;
   align-items: center;
   margin: 10px;
   min-height: calc(100% - (10px * 2));
   pointer-events: none;
   position: relative;
   width: auto;
}

// Z-index fix
[data-wpj-focuses] {
   position: fixed;
}

.focus-content {
   background-color: #fff;
   margin: auto;
   max-width: 100%;
   pointer-events: auto;
}