/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
/** @define Spinner */
.Spinner {
  position: relative;
  height: 60px;
  width: 60px;
  z-index: 99;
}
.Spinner .Spinner__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: 2s linear infinite spinnerRotation;
}

.Spinner__circle {
  display: block;
  fill: transparent;
  stroke-width: 10px;
  animation: 1.5s cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite both spinnerAnimation;
  transform-origin: 50% 50%;
  stroke-linecap: butt;
  stroke-dasharray: 282.743343;
  stroke: #08bfdf;
}

.Spinner--large {
  height: 80px;
  width: 80px;
}
.Spinner--large .Spinner__circle {
  stroke-width: 8px;
  stroke-dasharray: 289.0265284;
}

.Spinner--small {
  height: 40px;
  width: 40px;
}
.Spinner--small .Spinner__circle {
  stroke-width: 10px;
  stroke-dasharray: 282.743343;
}

.Spinner--tiny {
  height: 20px;
  width: 20px;
}
.Spinner--tiny .Spinner__circle {
  stroke-width: 14px;
  stroke-dasharray: 276.4601576;
}

.Card__spinner {
  box-shadow: 0 8px 24px rgba(20, 20, 20, 0.1);
}
.Card__spinner .CardSection {
  padding: 10px;
}

@keyframes spinnerAnimation {
  0% {
    stroke-dashoffset: 237.50440812;
    transform: rotate(0);
  }
  50% {
    stroke-dashoffset: 67.85840232;
    transform: rotate(45deg);
  }
  100% {
    stroke-dashoffset: 237.50440812;
    transform: rotate(360deg);
  }
}
@keyframes spinnerRotation {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

/*# sourceMappingURL=Spinner.css.map */