.container {
  color: red;

  .spinner {
    svg {
      width: 1.5rem;
      height: 1.5rem;
      rect {
        fill: black;
        width: 0.25rem;
        height: 0.75rem;
        rx: 2px;
        ry: 2px;
        x: 23px;
        y: 36px;
        transform-origin: 50% 50%;
        animation: spin 800ms ease-in-out infinite;

        &:nth-child(1) {
          transform: rotate(180deg);
          animation-delay: 0s;
        }
        &:nth-child(2) {
          transform: rotate(225deg);
          animation-delay: 100ms;
        }
        &:nth-child(3) {
          transform: rotate(270deg);
          animation-delay: 200ms;
        }
        &:nth-child(4) {
          transform: rotate(315deg);
          animation-delay: 300ms;
        }
        &:nth-child(5) {
          transform: rotate(0deg);
          animation-delay: 400ms;
        }
        &:nth-child(6) {
          transform: rotate(45deg);
          animation-delay: 500ms;
        }
        &:nth-child(7) {
          transform: rotate(90deg);
          animation-delay: 600ms;
        }
        &:nth-child(8) {
          transform: rotate(135deg);
          animation-delay: 700ms;
        }
      }
    }
  }

  &:global(.sm) {
    svg {
      width: 1rem;
      height: 1rem;
    }
  }

  &:global(.lg) {
    svg {
      width: 2rem;
      height: 2rem;
    }
  }
}

@keyframes spin {
  0% {
    height: 0.75rem;
  }
  15% {
    height: 0.25rem;
    opacity: 0.6;
  }
  30% {
    opacity: 1;
    height: 0.75rem;
  }
  100% {
    height: 0.75rem;
  }
}
