.charcoal-loading-spinner {
  box-sizing: content-box;
  margin: auto;
  padding: var(--charcoal-loading-spinner-padding);
  border-radius: 8px;
  font-size: var(--charcoal-loading-spinner-size);
  width: var(--charcoal-loading-spinner-size);
  height: var(--charcoal-loading-spinner-size);
  opacity: 0.84;
  color: var(--charcoal-text4);
  background-color: var(--charcoal-background1);

  &[data-transparent='true'] {
    background-color: var(--charcoal-transparent);
  }
}

@keyframes charcoal-loading-spinner-icon-scale-out {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}

.charcoal-loading-spinner-icon {
  width: 1em;
  height: 1em;
  border-radius: 1em;
  background-color: currentColor;
  animation: charcoal-loading-spinner-icon-scale-out 1s both ease-out;
  animation-iteration-count: infinite;

  &[data-reset-animation] {
    animation: none;
  }

  &[data-once='true'] {
    animation-iteration-count: 1;
  }
}