.loader__wrapper {
  display: flex;

  .loader,
  &:before,
  &:after {
    animation: zoom--second-dot 1s infinite ease-in-out;
    border-radius: 50%;
    background: returnColorCSSVar('brand-primary');
    height: $baseline * 1.8;
    width: 18px;
  }

  &::before {
    animation-name: zoom--first-dot;
    content: '';
  }
  &::after {
    animation-name: zoom--third-dot;
    content: '';
  }
}

.loader__wrapper--white {
  .loader,
  &:before,
  &:after {
    background-color: returnColorCSSVar('white');
  }
}

.loader__wrapper--gray-20 {
  .loader,
  &:before,
  &:after {
    background-color: returnColorCSSVar('gray-20');
  }
}

.loader__wrapper--brand-secondary {
  .loader,
  &:before,
  &:after {
    background-color: returnColorCSSVar('brand-secondary');
  }
}