/**
 * @file
 */

/** Accuracy is not crucial for this. Impression of progress does. */
@keyframes ajaxinFullScreenBar {
  0% {
    width: 0%;
  }
  40% {
    width: 40%;
  }
  80% {
    width: 80%;
  }
  100% {
    width: 100%;
  }
}

.ajaxin {
  max-width: 100%;
  max-height: 100%;
}

.ajaxin-wrapper {
  margin: auto;
}

.ajaxin-wrapper--fs {
  background: #fff;
  display: block;
  height: 4px;
  left: 0;
  overflow: visible;
  position: fixed;
  top: 0;
  transition: background-color .2s, opacity .2s ease-in .1s;
  width: 100%;
  z-index: 9998;
}

.ajaxin-wrapper--fs .ajaxin-wrapper__progress {
  height: 100%;
  width: 0;
  animation: ajaxinFullScreenBar 3s infinite ease-in;
}

.is-ajaxin--done .ajaxin-wrapper--fs .ajaxin-wrapper__progress {
  width: 100%;
}

.ajaxin-wrapper.ajaxin-wrapper--fs .ajaxin {
  left: auto;
  right: 30px;
  top: 30px;
  position: fixed;
  z-index: 99999;
}

.is-blue .sk,
.is-blue.is-trans .sk::before,
.is-blue.is-bg,
.is-ajaxin--done .ajaxin-wrapper--fs.is-blue {
  background: #00aedb;
}

.is-lime .sk,
.is-lime.is-trans .sk::before,
.is-lime.is-bg,
.is-ajaxin--done .ajaxin-wrapper--fs.is-lime {
  background: #8ec127;
}

.is-orange .sk,
.is-orange.is-trans .sk::before,
.is-orange.is-bg,
.is-ajaxin--done .ajaxin-wrapper--fs.is-orange {
  background: #ef5400;
}

.is-purple .sk,
.is-purple.is-trans .sk::before,
.is-purple.is-bg,
.is-ajaxin--done .ajaxin-wrapper--fs.is-purple {
  background: #662d91;
}

.is-red .sk,
.is-red.is-trans .sk::before,
.is-red.is-bg,
.is-ajaxin--done .ajaxin-wrapper--fs.is-red {
  background: #d41243;
}

.is-trans .sk {
  background: none;
}

.ajaxin.ajaxin--wordpress .sk {
  background: #fff;
}

/** Overrides core. */
.ajax-progress-throbber.ajax-progress--ajaxin .throbber,
.ui-dialog .ajax-progress-throbber.ajax-progress--ajaxin {
  background: none;
}

.ui-dialog .ajax-progress-throbber.ajax-progress--ajaxin {
  height: 80px;
  left: 50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
}

.media .ajaxin-wrapper,
.media--background ~ .ajaxin-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 97;
}

.media .ajaxin-wrapper .ajaxin.is-bg,
.media--background ~ .ajaxin-wrapper .ajaxin.is-bg {
  margin-left: -15px;
  margin-top: -15px;
}

.b-error ~ .ajaxin-wrapper.b-loader {
  display: none;
}