@use '../../../css/_config/_mixins';

.wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 886;
}

.blackout {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-blackout);
  backdrop-filter: blur(5px);
  animation: modalFadeIn 0.15s ease-in-out forwards;
  z-index: 887;
}

.center {
  display: flex;
  position: absolute;
  pointer-events: none !important;
  flex-direction: column;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 888;

  // Disabling pointer allows clicking outside the modal to close the window,
  // however when the content overflows it has a side effect of disabling
  // scrolling. This class enables scrolling if the content is overflowing.
  &.centerWithOverflow {
    pointer-events: all !important;
    background: rgba(255, 0, 0, 0.1);
  }
}

.overflow {
  overflow: auto;
  z-index: 3;
  @include mixins.touchscroll;
  // pointer-events: none; // breaks scrolling
}

@keyframes modalFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
