div.modal-wrapper
  position: absolute

  display: flex
  justify-content: center
  align-items: center

  opacity: 0
  pointer-events: none

  top: 0
  left: 0
  width: 100%
  height: 100%

  z-index: 9999

  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1)

  &.visible
    opacity: 1
    pointer-events: all

  &.cover
    z-index: 9996

div.modal
  height: fit-content

  padding: 1.5em
  z-index: 9999

  color: black
  background-color: white

  border: rgba(112, 128, 144, 0.25) 1px solid
  border-radius: 10px

  box-shadow: 0 0 0 1px rgba(112, 128, 144, 0.25)

  transition: 0.2s all ease-in-out

  @media screen and (prefers-color-scheme: dark)
    color: white
    background-color: black

div.modal-wrapper.cover div.modal
  border: 0

div.modal-wrapper:not(.visible) div.modal
  transform: scale(0.95)

div.modal-cover
  position: fixed
  left: 0
  top: 0
  width: 100%
  height: 100%
  background-color: #000000bf

  opacity: 1

  transition: opacity 0.2s ease-in-out

  z-index: 9998