@theme {
  --activity-indicator-facebook-height: 4em;
  --activity-indicator-facebook-child-bg: #333;
  --activity-indicator-facebook-child-height: 100%;
  --activity-indicator-facebook-child-width: 6px;
  --activity-indicator-facebook-child-margin-right: 2px;
  --activity-indicator-facebook-child-display: inline-block;
  --activity-indicator-facebook-child-animation: activity-indicator-facebook 1.2s infinite ease-in-out;
  
  --activity-indicator-facebook-rect2-delay: -1.1s;
  --activity-indicator-facebook-rect3-delay: -1.0s;
  --activity-indicator-facebook-rect4-delay: -0.9s;
  --activity-indicator-facebook-rect5-delay: -0.8s;
  
  --activity-indicator-facebook-scale-start: scaleY(0.4);
  --activity-indicator-facebook-scale-peak: scaleY(1.0);
}

@utility activity-indicator-facebook {
  height: var(--activity-indicator-facebook-height);
  
  & > div {
    background-color: var(--activity-indicator-facebook-child-bg);
    height: var(--activity-indicator-facebook-child-height);
    width: var(--activity-indicator-facebook-child-width);
    margin-right: var(--activity-indicator-facebook-child-margin-right);
    display: var(--activity-indicator-facebook-child-display);
    animation: var(--activity-indicator-facebook-child-animation);
  }
  
  & .activity-indicator-facebook-rect2 {
    animation-delay: var(--activity-indicator-facebook-rect2-delay);
  }
  
  & .activity-indicator-facebook-rect3 {
    animation-delay: var(--activity-indicator-facebook-rect3-delay);
  }
  
  & .activity-indicator-facebook-rect4 {
    animation-delay: var(--activity-indicator-facebook-rect4-delay);
  }
  
  & .activity-indicator-facebook-rect5 {
    animation-delay: var(--activity-indicator-facebook-rect5-delay);
  }
}

@keyframes activity-indicator-facebook {
  0%, 40%, 100% {
    transform: var(--activity-indicator-facebook-scale-start);
  }
  20% {
    transform: var(--activity-indicator-facebook-scale-peak);
  }
}