@import "../variables/colors";
@import "../variables/mixins";
@import "../variables/sizes";

// The typical spinner we use, a circle with a infinite, rotating piece
// Example usage:
//   <div class="Spinner"></div>
.Spinner {
  position: relative;
  margin: 0 auto;
  animation: load8 1.1s infinite linear;
  border-top: 2px solid $cStructure-mainLine;
  border-right: 2px solid $cStructure-mainLine;
  border-bottom: 2px solid $cStructure-mainLine;
  border-left: 2px solid $cHighlight-main;
}

.Spinner,
.Spinner::after {
  width: $sSpinner-default;
  height: $sSpinner-default;
  border-radius: 50%;
}

.Spinner--formIcon,
.Spinner--formIcon::after {
  position: absolute;
  width: $sSpinner-mini;
  height: $sSpinner-mini;
}

.Spinner.Spinner--center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -($sSpinner-default / 2) 0 0  - ($sSpinner-default / 2);
}

@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}