@import '../../styles/breakpoints/index';

.spinner {
  position: relative;
  animation: spinnerRotate 2s linear infinite;
  overflow: hidden;
  transition: 0.25s var(--animation-bezier);
  transition-property: width, opacity;
  opacity: 1;
  --iconWidth: 100%;
  width: var(--iconWidth);
  height: var(--iconWidth);
}

.spinner.is-hidden {
  opacity: 0;
  width: 0;
}

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

.inner {
  position: absolute;
  width: 100%;
  height: 100%;
  border-color: currentColor;
  animation: spinnerUnfillRotate 6s cubic-bezier(0.4, 0, .2, 1) infinite;
}

@keyframes spinnerUnfillRotate {
  12.5% { transform: rotate(135deg); }
  25.0% { transform: rotate(270deg); }
  37.5% { transform: rotate(405deg); }
  50.0% { transform: rotate(540deg); }
  62.5% { transform: rotate(675deg); }
  75.0% { transform: rotate(810deg); }
  87.5% { transform: rotate(945deg); }
  100%  { transform: rotate(1080deg); }
}

.left,
.right {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-color: inherit;
}

.left {
  float: left;
}

.left .circle {
  border-right-color: transparent !important;
  animation: spinnerLeft 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.right {
  float: right;
}

.right .circle {
  border-left-color: transparent !important;
  animation: spinnerRight 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  left: -100%;
}

.circle {
  box-sizing: border-box;
  height: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
  border-bottom-color: transparent !important;
  border-radius: 50%;
  animation: none;
  animation: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  border-width: 0.5px;
}

@keyframes spinnerLeft {
  0%   { transform: rotate(130deg); }
  50%  { transform: rotate(-5deg); }
  100% { transform: rotate(130deg); }
}

@keyframes spinnerRight {
  0%   { transform: rotate(-130deg); }
  50%  { transform: rotate(5deg); }
  100% { transform: rotate(-130deg); }
}
