@import '../../stylesheets/defaults'

@keyframes fadeOverlayIn
  from
    opacity 0
  to
    opacity 0.8

@keyframes fadeOverlayOut
  from
    opacity 0.8
  to
    opacity 0

@keyframes fadeModalIn
  from
    opacity 0
    transform scale(1.1, 1.1)
  to
    opacity 1
    transform scale(1, 1)

@keyframes fadeModalOut
  from
    opacity 1
    transform scale(1, 1)
  to
    opacity 0
    transform scale(1.1, 1.1)

+host-styles(mp-modal)
  width 400px

+prefix-classes('mp-modal-')
  .stage, .stage *
    box-sizing border-box

  .size-constraints
    &.stage, .wrapper, .main
      width inherit

  .stage
    bottom 0
    left 0
    min-width 100%
    pointer-events none
    position fixed
    right 0
    top 0
    z-index 100

    &.closed
      display none

    &.absolute
      &, .backdrop, .wrapper
        position absolute

    .backdrop
      background $grey-900
      height 100%
      pointer-events auto
      position fixed
      width 100%
      z-index 200

      &.opening
        animation fadeOverlayIn 300ms forwards
        opacity 0

      &.open
        opacity 0.8

      &.closing
        animation fadeOverlayOut 300ms forwards

      &.closed
        opacity 0

    .backdrop + .wrapper
      .main
        box-shadow 0 17px 50px 0 alpha(black, 0.19)

    .wrapper
      align-items center
      display flex
      height 100%
      justify-content center
      min-width 100%
      pointer-events none
      position fixed
      z-index 300

      .main
        background white
        border 1px solid $grey-100
        border-radius 5px
        box-shadow 0 1px 30px 0 alpha(black, 0.19)
        pointer-events auto
        position relative

        &.opening
          animation fadeModalIn 300ms forwards 100ms
          opacity 0

        &.open
          opacity 1

        &.closing
          animation fadeModalOut 200ms forwards

        &.closed
          opacity 0

        .close-btn
          cursor pointer
          float right
          height 10px
          position absolute
          right 15px
          top 15px

          .close-icon svg
            width 10px

            path
              fill $grey-300

          &:hover
            .close-icon svg path
              fill $grey-200