@use "../utility/globals";

.dialogBackground {
  bottom: 0;
  display: flex;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;

  &.center {
    align-items: center;
    justify-content: center;
  }

  &.left {
    justify-content: flex-start;
  }

  &.right {
    justify-content: flex-end;
  }

  &.bottom {
    align-items: flex-end;
    justify-content: center;
  }
}

.enter {
  opacity: 0;
}

.enterActive {
  opacity: 1;
  transition: all 250ms ease-in-out;
}

.exit {
  opacity: 1;
}

.exitActive {
  opacity: 0;
  transition: all 250ms ease-in-out;
}