$modal-large-width: 780px !default;
$modal-x-large-width: 900px !default;
$modal-small-width: 400px !default;

.ReactModal__Content {
  transform: translate(0, -25%);

  @apply opacity-0 p-0 transition-all ease-out duration-300;
}

.ReactModal__Content--after-open {
  @apply opacity-100;

  opacity: 1;
  transform: none;
}

.ReactModal__Content--before-close {
  @apply opacity-0;

  transform: translate(0, -25%);
}

.gui-Modal {
  @apply absolute bg-white shadow-xlarge rounded;

  &.large {
    width: $modal-large-width;
  }

  &.small {
    width: $modal-small-width;
  }

  &.x-large {
    width: $modal-x-large-width;
  }

  &:focus {
    outline: none;
  }
}

.ReactModal__Overlay {
  background: rgb(
    41 51 61 / 0%
  ) !important; // Should be theme("colors.neutral.20") but it doesn't work for some reason and have spent too long on this!

  @apply flex justify-center items-center transition ease-out duration-300;

  z-index: 1001;
}

.ReactModal__Overlay--after-open {
  background: rgb(
    41 51 61 / 20%
  ) !important; // Should be theme("colors.neutral.20") but it doesn't work for some reason and have spent too long on this!
}

.ReactModal__Overlay--before-close {
  background: rgb(
    41 51 61 / 0%
  ) !important; // Should be theme("colors.neutral.20") but it doesn't work for some reason and have spent too long on this!
}

.gui-react-modal-inner {
  @apply flex flex-col max-h-screen;
}

.gui-react-modal-footer__confirm {
  @apply flex flex-row w-full p-6 items-center;

  .gui-react-modal-footer__confirm-actions {
    @apply ml-auto;
  }

  .gui-react-modal-footer__confirm-text {
    @apply text-neutral-primary;
  }
}

.gui-react-modal-header {
  @apply flex flex-row w-full items-center relative;

  .gui-react-modal-header__text {
    font-size: 1.125em;

    @apply font-semi-bold pl-6 mr-auto;
  }
}