@import "../../constants/_variables.scss";

//Defined Colors
$theme-colors: () !default;
$background: #fff !default;
$theme-colors: map-merge(
  (
    "primary": $primary,
    "secondary": $secondary,
    "success": $success,
    "info": $info,
    "warning": $warning,
    "danger": $danger,
    "light": $light,
    "dark": $dark
  ),
  $theme-colors
);

.efe-spinner {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}
.default-spinner {
  display: inline-block;
  font-size: 10px;
  margin: auto;
  text-indent: -9999em;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  position: relative;
  -webkit-animation: spin 1.4s infinite linear;
  animation: spin 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.default-spinner::before {
  width: 50%;
  height: 50%;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}
.default-spinner::after {
  background: $background;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.circle-spinner {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid $primary; /* Blue */
  animation: spin 1s linear infinite;
}

.double-circle-spinner {
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid $primary; /* Blue */
  border-bottom: 4px solid $primary; /* Blue */
  animation: spin 1s linear infinite;
}

.growing-spinner {
  display: inline-block;
  vertical-align: text-bottom;
  background-color: currentColor;
  opacity: 0;
  animation: spinner-grow 0.75s ease infinite;
}
.bubble-spinner {
  display: inline-block;
  font-size: 8px;
  margin: 30px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: bubble-circle 1.3s infinite linear;
  animation: bubble-circle 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader-bubble-spinner,
.loader-bubble-spinner:before,
.loader-bubble-spinner:after {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: bubble-horz 1.8s infinite ease-in-out;
  animation: bubble-horz 1.8s infinite ease-in-out;
}
.loader-bubble-spinner {
  display: inline-block;
  font-size: 6px;
  margin: auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader-bubble-spinner:before,
.loader-bubble-spinner:after {
  content: "";
  position: absolute;
  top: 0;
}
.loader-bubble-spinner:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader-bubble-spinner:after {
  left: 3.5em;
}
// .square-spinner {
//   border: 6px solid rgba(0, 0, 0, 0.4);
//   animation: square 800ms linear infinite;
// }

@keyframes square {
  0% {
    border-radius: 50%;
    transform: rotate(0);
  }
  50% {
    transform: rotate(180deg);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  100% {
    border-radius: 50%;
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
  }
}
@keyframes bubble-circle {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0,
      0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em,
      0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em,
      0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
      0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@keyframes bubble-horz {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

//ANIMATION
.efe-spinner-animation-ease {
  animation: spin 1s ease infinite;
}

.efe-spinner-animation-square {
  border: 6px solid rgba(0, 0, 0, 0.4);
  animation: square 800ms linear infinite;
}

//Bubble Spinner Colors Loop
@each $name, $value in $theme-colors {
  .efe-spinner-bubble-#{$name} {
    color: $value;
  }
}

//Loader Bubble Spinner Colors Loop
@each $name, $value in $theme-colors {
  .efe-spinner-loader-bubble-#{$name} {
    color: $value;
  }
}

//Circle Spinner Colors Loop
@each $name, $value in $theme-colors {
  .efe-spinner-circle-#{$name} {
    border-top: 8px solid $value;
  }
}

//Growing Spinner Colors Loop
@each $name, $value in $theme-colors {
  .efe-spinner-growing-#{$name} {
    background-color: $value;
  }
}

//Double Circle Spinner Colors Loop
@each $name, $value in $theme-colors {
  .efe-spinner-double-circle-#{$name} {
    border-top: 4px solid $value;
    border-bottom: 4px solid $value;
  }
}

//Square Spinner Colors Loop
@each $name, $value in $theme-colors {
  .efe-spinner-square-#{$name} {
    border: 6px solid $value !important;
  }
}

@each $name, $value in $theme-colors {
  .efe-spinner-default-#{$name} {
    background: $value;
    background: -moz-linear-gradient(
      left,
      $value 10%,
      rgba(67, 236, 76, 0) 42%
    );
    background: -webkit-linear-gradient(
      left,
      $value 10%,
      rgba(67, 236, 76, 0) 42%
    );
    background: -o-linear-gradient(left, $value 10%, rgba(67, 236, 76, 0) 42%);
    background: -ms-linear-gradient(left, $value 10%, rgba(67, 236, 76, 0) 42%);
    background: linear-gradient(to right, $value 10%, rgba(67, 236, 76, 0) 42%);
    &:before {
      background: $value;
    }
  }
}
