:global(.body-modal-opened) {
  overflow: hidden;

  .overlay {
    opacity: 1;
    visibility: visible;
  }

  &.no-overlay {
    .overlay {
      opacity: 0;
      visibility: hidden;
    }
  }
}

.modalContainer {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  > div {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
}

.overlay {
  top: 0;
  left: 0;
  position: fixed;
  z-index: 500;

  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;

  background: rgba(0,0,0,.5);
  transition: all .5s ease;
}


@media (max-width: 568px) {

  .overlay {
    opacity: 0 !important;
  }

  .overlay,
  .modalContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}