@import '../settings/_Colors.styl'
@import '../settings/_Margins.styl'
@import '../settings/_Shadows.styl'
@import '../settings/_MediaSizes.styl'

@keyframes presentDialogue {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@keyframes dismissDialogue {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

@keyframes dismissModalBox {
  0% {
    opacity: 1
    margin-bottom: 0
  }
  100% {
    opacity: 0
    margin-bottom: 50px
  }
}

.modal-dialogue-wrapper
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 100%
  &.presented
    opacity: 1
    z-index: 99
    .modal-dialogue-presenter
      animation-name: presentDialogue
      opacity: 0
      animation-duration: 450ms
      animation-fill-mode: forwards
      animation-timing-function: ease
      .modal-box
        animation-delay: 520ms !important
  &.dismissed
    opacity: 0
    z-index: -1
    transition-delay: 450ms
    .modal-dialogue-presenter
      animation-name: dismissDialogue
      opacity: 1
      animation-duration: 450ms
      animation-delay: 200ms
      animation-fill-mode: forwards
      animation-timing-function: ease
      .modal-box
        animation-name: dismissModalBox
        opacity: 1
        animation-duration: 200ms
        animation-delay: 0
        animation-fill-mode: forwards
        animation-timing-function: ease

.modal-dialogue-presenter
  position: fixed
  width: 100vw
  height: 100vh
  background-color: color-black-alpha
  z-index: 98
  display: flex
  overflow: hidden
  justify-content: center
  align-items: center

.modal-dialogue
  opacity: 0.0
  align-self: center
  box-shadow: shadow-box
  padding: margin-A1
  position: relative
  &.small
    @media size-M
      width: 4 * (100%/12)
    @media size-L
      width: 4 * column-L + 3 * gutter-L
    @media size-XL
      width: 4 * column-XL + 3 * gutter-XL
  &.large
    @media size-M
      width: 6 * (100%/12)
    @media size-L
      width: 6 * column-L + 3 * gutter-L
    @media size-XL
      width: 6 * column-XL + 3 * gutter-XL
  .title
    margin: 0
    margin-bottom: margin-A2
    margin-right: margin-A1 + 26px + 20px
  .action-close
    cursor: pointer
    img
      max-width: 26px
      max-height: 26px
      position: absolute
      right: margin-A1
      top: margin-A1
  .button
    flex-grow: 1
    width: 100%