.loading-bubbles {
  $size: 1px;
  $radius: 12px;
  $shallow: 3px;
  $c-basic: #666;

  :deep(.bubble-item) {
    background: $c-basic;
    animation: loading-bubbles linear .75s infinite;

    &:first-child {
      margin-top: -$size/2 + -$radius;
      margin-left: -$size/2;
    }

    &:nth-child(2) {
      margin-top: -$size/2 + -$radius * .73;
      margin-left: -$size/2 + $radius * .73;
    }

    &:nth-child(3) {
      margin-top: -$size/2;
      margin-left: -$size/2 + $radius;
    }

    &:nth-child(4) {
      margin-top: -$size/2 + $radius * .73;
      margin-left: -$size/2 + $radius * .73;
    }

    &:nth-child(5) {
      margin-top: -$size/2 + $radius;
      margin-left: -$size/2;
    }

    &:nth-child(6) {
      margin-top: -$size/2 + $radius * .73;
      margin-left: -$size/2 + -$radius * .73;
    }

    &:nth-child(7) {
      margin-top: -$size/2;
      margin-left: -$size/2 + -$radius;
    }

    &:last-child {
      margin-top: -$size/2 + -$radius * .73;
      margin-left: -$size/2 + -$radius * .73;
    }
  }

  @keyframes loading-bubbles {
    0% {
      width: $size;
      height: $size;
      box-shadow: 0 0 0 $shallow $c-basic;
    }
    90% {
      width: $size;
      height: $size;
      box-shadow: 0 0 0 0 $c-basic;
    }
    100% {
      width: $size;
      height: $size;
      box-shadow: 0 0 0 $shallow $c-basic;
    }
  }
}