.modal-mask { @apply .fixed .pin .z-50 .overflow-auto .flex; background: rgba(0, 0, 0, 0.70); transition: opacity 250ms ease; & > .modal-container { @apply .relative .w-full .max-w-1/2 .m-auto .flex-col .flex; &.top { margin-top: 10%; } & > .modal-close-icon { @apply .absolute .right-0 .p-2 .text-white .cursor-pointer .opacity-50; transition: opacity 150ms linear, transform 150ms ease-in; top: -2rem; &:hover { @apply .opacity-100; transform: rotate(90deg); } } & > .modal-content { @apply .bg-neutral-800 .rounded .shadow-md .overflow-y-scroll; max-height: calc(100vh - 16rem); 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; height: calc(100vh - 16rem); max-width: none; } & > .modal-container.w-auto { @apply .w-auto; } }