$spinner-xs-size: 1rem !default;
$spinner-sm-size: 2rem !default;
$spinner-md-size: 4rem !default;
$spinner-lg-size: 6rem !default;
$spinner-fill-color: inherit !default;

.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}
.spinner {
  color: $green;
  background: $white;
  position: relative;
  width: $spinner-md-size;
  height: $spinner-md-size;
  box-shadow: inset 0 0 0 5px;
  transform: translateZ(0);
  animation: rotate-circle 1s infinite linear;
  &:after {
    width: $spinner-md-size*0.5; //5.2em;
    height: $spinner-md-size; // 10.2em;
    background: $spinner-fill-color;
    border-radius: 0 $spinner-md-size $spinner-md-size 0;//0 10.2em 10.2em 0;
    //top: -0.1rem;
    left: $spinner-md-size*0.5;//5.1em;
    transform-origin: 0 $spinner-md-size*0.5;//0 5.1em;
    animation: rotate-circle 2s infinite ease;
  }
  &:before {
    width: $spinner-md-size*0.5; //5.2em;
    height: $spinner-md-size; //10.2em;
    background: $spinner-fill-color;
    border-radius: $spinner-md-size 0 0 $spinner-md-size; // 10.2em 0 0 10.2em;
    //top: -0.1rem;
    //left: -0.1rem;
    left: 0;
    transform-origin: $spinner-md-size*0.5 $spinner-md-size*0.5; // 5.2em 5.1em;
    animation: rotate-circle 2s infinite ease 1.5s;
  }
}

.spinner.spinner-xs, .btn .spinner {
  width: $spinner-xs-size;
  height: $spinner-xs-size;
  box-shadow: inset 0 0 0 2px;
  &:before {
    width: $spinner-xs-size*0.5;
    height: $spinner-xs-size;
    border-radius: $spinner-xs-size 0 0 $spinner-xs-size;
    transform-origin: $spinner-xs-size*0.5 $spinner-xs-size*0.5;
  }
  &:after {
    width: $spinner-xs-size*0.5; //5.2em;
    height: $spinner-xs-size; // 10.2em;
    border-radius: 0 $spinner-xs-size $spinner-xs-size 0;//0 10.2em 10.2em 0;
    left: $spinner-xs-size*0.5;//5.1em;
    transform-origin: 0 $spinner-xs-size*0.5;//0 5.1em;
  }
}

.spinner.spinner-sm {
  width: $spinner-sm-size;
  height: $spinner-sm-size;
  box-shadow: inset 0 0 0 3.5px;
  &:before {
    width: $spinner-sm-size*0.5;
    height: $spinner-sm-size;
    border-radius: $spinner-sm-size 0 0 $spinner-sm-size;
    transform-origin: $spinner-sm-size*0.5 $spinner-sm-size*0.5;
  }
  &:after {
    width: $spinner-sm-size*0.5; //5.2em;
    height: $spinner-sm-size; // 10.2em;
    border-radius: 0 $spinner-sm-size $spinner-sm-size 0;//0 10.2em 10.2em 0;
    left: $spinner-sm-size*0.5;//5.1em;
    transform-origin: 0 $spinner-sm-size*0.5;//0 5.1em;
  }
}

.spinner.spinner-lg {
  width: $spinner-lg-size;
  height: $spinner-lg-size;
  box-shadow: inset 0 0 0 7px;
  &:before {
    width: $spinner-lg-size*0.5;
    height: $spinner-lg-size;
    border-radius: $spinner-lg-size 0 0 $spinner-lg-size;
    transform-origin: $spinner-lg-size*0.5  $spinner-lg-size*0.5;
  }
  &:after {
    width: $spinner-lg-size*0.5; //5.2em;
    height: $spinner-lg-size; // 10.2em;
    border-radius: 0 $spinner-lg-size $spinner-lg-size 0;//0 10.2em 10.2em 0;
    left: $spinner-lg-size*0.5;//5.1em;
    transform-origin: 0 $spinner-lg-size*0.5;//0 5.1em;
  }
}
.spinner {
  @each $color, $value in $theme-colors {
    &.bg-#{$color} {
      &::before, &::after {
        box-shadow: $value 0 0 0 1px;
      }
    }
  }
}
.spinner::before,
.spinner::after {
  position: absolute;
  content: '';
  box-shadow: $white 0 0 0 1px;
}

.spinner.light {
  background: $light
}

.btn {
  .spinner {
    background: $btn-disabled-color;
    //width: 1rem;
    //height: 1rem;
    color: $white;
    display: inline-block;
    vertical-align: -3px;
    &::before, &::after {
      box-shadow: $btn-disabled-color 0 0 0 1px;
    }
  }
  &[class*=" btn-outline-"] {
    .spinner-sq {
      background-color: $btn-disabled-color;
    }
    .spinner {
      color: $btn-disabled-color;
      background: $white;
      &::before, &::after {
        box-shadow: $white 0 0 0 1px;
      }
    }
  }
  &.btn-secondary {
    .spinner-sq {
      background-color: $btn-disabled-color;
    }
    .spinner {
      color: $btn-disabled-color;
      background: $white;
      &::before, &::after {
        box-shadow: $white 0 0 0 1px;
      }
    }
  }
}

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

.spinner-sq {
  width: $spinner-md-size;
  height: $spinner-md-size;
  background-color: $green;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

.spinner-sq.spinner-xs,.btn > .spinner-sq {
  width: 1rem;
  height: 1rem;
}

.spinner-sq.spinner-md {
  width: $spinner-md-size;
  height: $spinner-md-size;
}
.spinner-sq.spinner-lg {
  width: $spinner-lg-size;
  height: $spinner-lg-size;
}

.btn > .spinner-sq {
  background-color: $white;
  display: inline-block;
  vertical-align: -3px;
}

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  } 50% {
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    } 100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      }
}