@import "settings.colors";
@import "settings.z-index";

@import "mixins/tools.mixins";
@import "mixins/components.controls";

///////////////////////////////////////////////////
// modal container
///////////////////////////////////////////////////
.o-modal-outer-container {
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: $z-index-login-modal;
  height: auto;

  iframe {
    background-color: #fff;
  }
}

.o-modal-outer-container--top-padding {
  padding-top: rem(44);
}

.c-control--close-modal {
  @include c-control--modal;

  top: 1px;
  right: 1px;
  position: absolute;
  padding: 0;
  height: rem(44);
}

///////////////////////////////////////////////////
// lightbox
///////////////////////////////////////////////////
.c-lightbox {
  background-color: rgba($color-grey-900, 0.75);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: $z-index-lightbox;
  cursor: pointer;
}

.c-lightbox--white {
  background-color: #fff;
}

.c-lightbox--panel {
  z-index: $z-index-panel-lightbox;
}

///////////////////////////////////////////////////
// modal breakpoints (vertical)
///////////////////////////////////////////////////
@media (max-height: rem(700)) {
  .o-modal-outer-container--login-modal,
  .o-modal-outer-container--regiser-modal {
    top: 0;
    transform: translate(-50%, 0);
  }
}

@media (max-height: rem(900)) {
  .o-modal-outer-container--regwall-data-centre {
    top: 0;
    transform: translate(-50%, 0);
  }
}
