$loading-circle-diameter: 4px;
$loading-circle-color: white;

@keyframes flowcalizing {
  100% { transform: rotate(360deg); }
}
@keyframes flowcalization-fade-in {
  0% { opacity: 0 }
  100% { opacity: 1 }
}

[data-flow-cart-container] {
  [data-flow-localize] {
    animation: flowcalization-fade-in 0.7s ease;
  }

  &.flowcalizing [data-flow-localize] {
    transition: none;
    position: relative;
    visibility: hidden;
    animation: none;

    &::after {
      transform-origin: bottom left;
      content: '';
      display: inline-block;
      width: $loading-circle-diameter;
      height: $loading-circle-diameter;
      border-radius: 50%;
      background-color: $loading-circle-color;
      visibility: visible;
      animation: 0.6s ease infinite flowcalizing;
    }
  }
}