@import "./modal.vars";

// Modals
// --------------------------------------------------

ion-modal {
  @include position(0, 0, 0, 0);

  display: flex;
  position: absolute;

  align-items: center;
  justify-content: center;

  contain: strict;
}

ion-modal-controller {
  display: none;
}


@media not all and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
  ion-modal ion-backdrop {
    display: none;
  }
}

.modal-wrapper {
  @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
    width: $modal-inset-width;
    height: $modal-inset-height-small;
  }

  @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-large) {
    width: $modal-inset-width;
    height: $modal-inset-height-large;
  }

  width: 100%;
  height: 100%;

  contain: strict;
  z-index: 10;
}