@keyframes nest-circular-top {
  0% {
    stroke-dasharray: 94, 200;
    stroke-dashoffset: -94;
  }
  50% {
    stroke-dasharray: 50, 200;
  }
  100% {
    stroke-dasharray: 0, 200;
    stroke-dashoffset: 0;
  }
}

@keyframes nest-circular-bottom {
  0% {
    stroke-dasharray: 91, 200;
    stroke-dashoffset: 90;
  }
  30% {
    stroke-dashoffset: 54;
  }
  50% {
    stroke-dashoffset: 0;
  }
  70% {
    stroke-dashoffset: -54;
  }
  100% {
    stroke-dasharray: 91, 200;
    stroke-dashoffset: -94;
  }
}

.nest-circular {
  display: inline-block;
  vertical-align: middle;
  color: var(--nest-circular-color, #009e42);
}

.nest-circular > circle {
  stroke-dasharray: 0 200;
  stroke-linecap: round;
  stroke: currentColor;
  stroke-width: 5px;
  animation: nest-circular-top 1.5s ease-in-out infinite;
}

.nest-circular > circle:last-of-type {
  animation: nest-circular-bottom 1.2s ease-in-out infinite;
  opacity: 0.3;
}