/**
 * /user/assets/styles/modal.css
 *
 * @author Pablo Rubio
 * @version 0.8
 */

html[data-modal-state='open'],
html[data-modal-state='loading'],
html[data-modal-state='open'] body,
html[data-modal-state='loading'] body {
  overflow: hidden;
}

.modal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 1300;
  overflow: visible;
  transition: width 0ms 200ms, height 0ms 200ms;
}

[data-modal-state='hidden'] .modal,
[data-modal-state='loading'] .modal,
[data-modal-state='open'] .modal {
  width: 100%;
  height: 100%;
  transition: width 0ms 0ms, height 0ms 0ms;
}

[data-modal-state='hidden'] .modal {
  width: 100%;
  height: 190px;
  transition: width 0ms 0ms, height 200ms 0ms, opacity 0ms 0ms ease;
}

.modal:before {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 1);
}

[data-modal-state='loading'] .modal:before,
[data-modal-state='open'] .modal:before {
  width: 100%;
  height: 100%;
  opacity: 0.84;
  transition: width 0ms 0ms, height 0ms 0ms, opacity 200ms 0ms ease;
}

[data-modal-state='closed'] .modal:before,
[data-modal-state='hidden'] .modal:before {
  width: 0;
  height: 0;
  opacity: 0;
  transition: width 0ms 200ms, height 0ms 200ms, opacity 200ms 0ms ease;
}

.modal .outer {
  position: relative;
  z-index: 200;
  width: 100%;
  height: 100%;
  overflow: auto;
}

[data-modal-state='hidden'] .modal .outer {
  overflow: visible;
}

.modal .inner {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: top 200ms ease, translate 200ms ease;
  min-height: 120px;
  min-width: 120px;
}

[data-modal-state='hidden'] .modal .inner {
  top: 90%;
  transform: translate(-50%, 0%);
  transition: top 200ms ease, transform 200ms ease;
}

[data-modal-state='loading'] .modal .inner {
  background-image: url('../images/spinner/dark.gif');
  background-position: center;
  background-size: 30px;
  background-repeat: no-repeat;
}

.modal .content {
  width: 100%;
  /* max-width: 720px; */
  margin: 0 auto;
  position: relative;
  opacity: 0;
  transform: scale(0.99, 0.99);
  background-color: transparent;
  /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); */
  transition: opacity 200ms ease, transform 200ms ease;
}

[data-modal-state='hidden'] .modal .content,
[data-modal-state='open'] .modal .content {
  opacity: 1;
  transform: scale(1, 1);
  transition: opacity 200ms ease, transform 200ms ease;
}