.modalWrapper {
  background: rgba(0, 0, 0, 0.25);

  > div {
    padding: 25px;
    background: #fff;
    position: relative;

    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    max-height: 90%;
    min-width: 380px;
    max-width: 760px;
    transition: all .5s ease;
    transform: translateY(-50%);
  }

  > div > div {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
  }
}

.fullWidth {

  > div {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    min-height: 100%;
    min-width: 320px;
    padding: 25px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;

    opacity: 0;
    transition: all .15s ease;
    transform: none;
  }

  > div > div {
    transform: scale(.75, .75);
    transition: all .25s ease;
    transition-delay: .05s;
  }

  .closeBtn {
    top: 15px;
    right: 15px;
  }
}

:global(.body-modal-opened) {

  .fullWidth {

    > div {
      opacity: 1;
    }

    > div > div {
      transform: scale(1, 1);
    }
  }
}

:global(.body-modal-opened) {

  .modalWrapper {

    > div {
      transform: translateY(0%);
    }
  }
}

.closeBtn {
  position: absolute;
  overflow: hidden;
  top: 10px;
  right: 10px;
  cursor: pointer;
  opacity: .5;
  transition: all .25s ease-out;

  &:hover {
    opacity: 1;
  }

  &:after,
  &:before {
    content: '';
    display: block;
    width: 50px;
    height: 1px;
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
  }

  &:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  &:before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
}


@media (max-width: 320px) {

  .modalWrapper {
    justify-content: left !important;
  }
}

@include media-mobile {

  .modalWrapper {

    > div {
      min-width: 320px;
      display: flex;
      align-items: center;
      transform: translate3d(0, 0, 0) !important;
      padding-top: 0;
      padding-bottom: 0;
      width: 50%;
      height: 50%;
      transition: all ease .25s;

      max-height: 100%;
    }
  }

  :global(.body-modal-opened) {
    position: fixed;
    width: 100%;
    height: 100%;

    .modalWrapper {

      > div {
        opacity: 1;
        width: 100%;
        height: 100%;
      }

      > div > div {
        transform: scale(1, 1);
      }
    }
  }

  .modalWrapper {

    > div {
      padding: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: all .15s ease;
    }

    > div > div {
      transform: scale(.75, .75);
      transition: all .25s ease;
      transition-delay: .05s;
    }
  }

  .closeBtn {
    width: vw(20);
    height: vw(20);
  }
}

@include media-except-mobile {

  .modalWrapper {

    > div {
      border-radius: 5px;
    }
  }

  .closeBtn {
    width: 20px;
    height: 20px;
  }
}