.modalContainer {
  position: absolute;
  top: 0;
  z-index: $modalZIndex;
  width: 100%;
  height: 100%;
}

.modalBackdrop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--modalBackdropBackgroundColor);
  opacity: 1;
}

.modal {
  position: relative;
  display: flex;
  max-height: 90%;
  border-radius: 6px;
  opacity: 1;
}

.modalOpen {
  /* Prevent the body from scrolling when the modal is open */
  overflow: hidden !important;
}

.modalOpenIOS {
  position: fixed;
  right: 0;
  left: 0;
}

/*
 * Sizes
 */

.small {
  composes: modal;

  width: 480px;
}

.medium {
  composes: modal;

  width: 720px;
}

.large {
  composes: modal;

  width: 1080px;
}

.extraLarge {
  composes: modal;

  width: 1280px;
}


.extraExtraLarge {
  composes: modal;

  width: 1600px;
}

@media only screen and (max-width: $breakpointExtraLarge) {
  .modal.extraLarge {
    width: 90%;
  }
}

@media only screen and (max-width: $breakpointLarge) {
  .modal.large {
    width: 90%;
  }
}

@media only screen and (max-width: $breakpointMedium) {
  .modal.small,
  .modal.medium {
    width: 90%;
  }
}

@media only screen and (max-width: $breakpointSmall) {
  .modalContainer {
    position: fixed;
  }

  .modal.small,
  .modal.medium,
  .modal.large,
  .modal.extraLarge,
  .modal.extraExtraLarge {
    max-height: 100%;
    width: 100%;
    height: 100% !important;
  }
}