/// <reference path="../../_color-definitions.scss" />
/// <reference path="../../_variables.scss" />
/// <reference path="../../_mixins.scss" />

.spinner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

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

  background-color: rgba(0,0,0, 0.7);
  z-index: 1500;
}

.spinner__element {
  height: 60px;
  min-height: 60px;
  width: 60px;
  border-radius: 100px;
  border: 5px transparent solid;
  border-top-width: 5px;
  border-top-style: solid;
  border-top-color: #f59c1a;
  -webkit-animation: spinner-animation 5s infinite;
  animation: spinner-animation 5s infinite;
}

@-webkit-keyframes spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  50% {
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
  }
  75% {
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg);
  }
  100% {
    -webkit-transform: rotate(1440deg);
    transform: rotate(1440deg);
  }
}
@keyframes spinner-animation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  50% {
    -webkit-transform: rotate(720deg);
    transform: rotate(720deg);
  }
  75% {
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg);
  }
  100% {
    -webkit-transform: rotate(1440deg);
    transform: rotate(1440deg);
  }
}
