:host {
  display: contents;
}

.css-spinner {
  --spinner-size: 80px;
  --ring-size: calc(var(--spinner-size) * 3 / 11);
  --ring-gap: calc(var(--spinner-size) / 11);
  --ring-stroke: calc(var(--spinner-size) * 14 / 165);
  --bounce-distance: calc(var(--spinner-size) * 5 / 11);
  --cycle-duration: 1620ms;

  display: flex;
  align-items: flex-start;
  gap: var(--ring-gap);
  width: var(--spinner-size);
  height: calc(var(--spinner-size) * 8 / 11);
}

.tf-ring {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--ring-size);
  height: var(--ring-size);
  margin: 0;
  border: var(--ring-stroke) solid currentColor;
  border-radius: 50%;
  animation: ring-bounce var(--cycle-duration) linear infinite;
}

.tf-ring-1 {
  color: #6dc8c1;
  animation-delay: 0ms;
}

.tf-ring-2 {
  color: #1da9e1;
  animation-delay: -1440ms;
}

.tf-ring-3 {
  color: #0272b6;
  animation-delay: -1260ms;
}

@keyframes ring-bounce {
  0%, 25.93% {
    transform: translateY(0);
  }

  29.63% {
    transform: translateY(calc(var(--bounce-distance) * 0.052));
  }

  33.33% {
    transform: translateY(calc(var(--bounce-distance) * 0.329));
  }

  37.04% {
    transform: translateY(calc(var(--bounce-distance) * 0.627));
  }

  40.74% {
    transform: translateY(calc(var(--bounce-distance) * 0.813));
  }

  44.44% {
    transform: translateY(calc(var(--bounce-distance) * 0.921));
  }

  48.15% {
    transform: translateY(calc(var(--bounce-distance) * 0.977));
  }

  51.85%, 62.96% {
    transform: translateY(var(--bounce-distance));
  }

  66.67% {
    transform: translateY(calc(var(--bounce-distance) * 0.917));
  }

  70.37% {
    transform: translateY(calc(var(--bounce-distance) * 0.739));
  }

  74.07% {
    transform: translateY(calc(var(--bounce-distance) * 0.533));
  }

  77.78% {
    transform: translateY(calc(var(--bounce-distance) * 0.361));
  }

  81.48% {
    transform: translateY(calc(var(--bounce-distance) * 0.239));
  }

  85.19% {
    transform: translateY(calc(var(--bounce-distance) * 0.148));
  }

  88.89% {
    transform: translateY(calc(var(--bounce-distance) * 0.085));
  }

  92.59% {
    transform: translateY(calc(var(--bounce-distance) * 0.043));
  }

  96.3% {
    transform: translateY(calc(var(--bounce-distance) * 0.016));
  }

  100% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tf-ring {
    animation-duration: 3240ms;
  }
}