$spin-width: 48px;
$bg: darken($brand-primary, 40%);

.spin-modal {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: center;
  animation: loadme ease-in-out 0.3s 1;
  background-color: rgba($bg, 0.4);
  transition: all ease-in-out 0.3s;
}

@keyframes loadme {
  0% {background-color: rgba($bg, 0);}
  100% {background-color: rgba($bg, 0.4);}
}

.loader-caption {
    padding: 0;
    margin: 30px 0 0 0;
    line-height: 0;
    font-size: 16px;
}

.spin {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
  display: block;
  margin: 0 auto;
  z-index: 1200;
  transform: rotate(0deg);
  width: $spin-width;
  height: $spin-width;
  position: relative;
  overflow: hidden;
  animation-name: spinme;
  animation-duration: 1s;
  animation-iteration-count:infinite;

  div {
    display: block;
    width: $spin-width;
    height: $spin-width;
    position: relative;

    span {
      display: inline-block;
      position: absolute;
    }
  }
}

@keyframes spinme {
  0% {transform: rotate(0deg)}
  100% {transform: rotate(360deg)}
}
