.modal-mask {
  @apply .fixed .pin .z-50 .overflow-auto .flex;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 250ms ease;

  & > .modal-container {
    @apply .relative .w-full .max-w-md .m-auto .flex-col .flex;

    &.top {
      margin-top: 15%;
    }

    & > .modal-close-icon {
      @apply .absolute .pin-r .p-2 .text-white .cursor-pointer .opacity-50;
      transition: opacity 150ms linear, transform 150ms ease-in;
      top: -2.5rem;

      &:hover {
        @apply .opacity-100;
        transform: rotate(90deg);
      }
    }

    & > .modal-content {
      @apply .bg-white .rounded .shadow-md;
      transition: all 250ms ease;
    }

    /**
     * On tiny phone screens make sure there is a margin on the sides and also
     * center the modal rather than putting it towards the top of the screen.
     */
    @screen smx {
      width: 90%;
      .top {
        margin-top: auto;
      }
    }
  }

  & > .modal-container.full-screen {
    @apply .w-3/4 .mt-32;
    height: calc(100vh - 16rem);
    max-width: none;
  }

  & > .modal-container.w-auto {
    @apply .w-auto;
  }
}