@import '.cssicons';
@import '.csstext';
@import '.cssbuttons';
@import '.csscontent';
@import '.cssbutton-loader';

root {
  --swal-modal-width 478px;
}

.swal-overlay {
  position fixed;
  top 0;
  bottom 0;
  left 0;
  right 0;
  text-align center;
  font-size 0;  Remove gap between inline-block elements 
  overflow-y auto;

  background-color rgba(0, 0, 0, 0.4);
  z-index 10000;
  pointer-events none;
  opacity 0;
  transition opacity 0.3s;
  &before {
    content ' ';
    display inline-block;
    vertical-align middle;  vertical alignment of the inline element 
    height 100%;
  }

  &--show-modal {
    opacity 1;
    pointer-events auto;

    & .swal-modal {
      opacity 1;
      pointer-events auto;
      box-sizing border-box;
      animation showSweetAlert 0.3s;
      will-change transform;
    }
  }
}

.swal-modal {
  width var(--swal-modal-width);
  opacity 0;
  pointer-events none;
  background-color white;
  text-align center;
  border-radius 5px;

  position static;
  margin 20px auto;
  display inline-block;
  vertical-align middle;

  transform scale(1);
  transform-origin 50% 50%;
  z-index 10001;
  transition transform 0.3s, opacity 0.2s;

  @media all and (max-width 500px) {
    width calc(100% - 20px);
  }
}

@keyframes showSweetAlert {
  0% {
    transform scale(1);
  }
  1% {
    transform scale(0.5);
  }

  45% {
    transform scale(1.05);
  }

  80% {
    transform scale(0.95);
  }

  100% {
    transform scale(1);
  }
}


Target IE8-IE10 due to incompability with the css `pointer-event` property.
@see httpsgithub.comt4t5sweetalertissues863

@media screen0 {
  .swal-overlay {
    visibility hidden;
  }

  .swal-overlay--show-modal {
    visibility visible;
  }

  .swal-button__loader {
    visibility hidden;
  }

  .swal-overlay--show-modal .swal-modal {
    visibility visible;
  }

  .swal-modal {
    visibility hidden;
  }
}