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

@import "mixins/tools.mixins";

// Positioning and animation

.c-modal-dialog {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: $z-index-modal-dialog;
}

// when inner modal is present, outer lightbox should be click to close
.c-modal-dialog--click-close {
  cursor: pointer;
}

.c-modal-dialog--dark {
  background-color: #000;
}

.c-modal-dialog--light {
  background-color: rgba($color-grey-900, 0.9);
}

.c-modal-dialog[hidden] {
  opacity: 0;
}

.c-modal-dialog--hiding {
  @include animation(hide-dialog, 0.2s, ease-out, 0s, 1, normal, forwards, running);
}

.c-modal-dialog--revealing {
  @include animation(reveal-dialog, 0.2s, ease-out, 0s, 1, normal, forwards, running);
}

@keyframes hide-dialog {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes reveal-dialog {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// Controls and contents

.c-modal-dialog__inner {
  background-color: $color-white;
  outline: 1px solid $color-stone-200;
  z-index: $z-index-modal-dialog + 1;
  cursor: default;
}

.c-modal-dialog__toolbar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: $z-index-modal-dialog + 2;
}

.c-modal-dialog__contents {
  height: 100%;
}

// show the scrollbar when content is long
.c-modal-dialog--scrollable,
.c-modal-dialog__contents--scrollable {
  overflow: scroll; // has to be `scroll` for momentum, not `auto`
}

// hide the scrollbar when content is long
.c-modal-dialog--touch-scrollable,
.c-modal-dialog__contents--touch-scrollable {
  overflow: scroll; // has to be `scroll` for momentum, not `auto`
  @include touch-scrollable;
}

// wrapper to center spinner
.c-modal-dialog__spinner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
