/**
* ==============================================
* Dot Flashing
* ==============================================
*/

@dot-width: 6px;

@dot-height: 6px;

@dot-radius: 3px;

@dot-color: #ADB4E2;

@dot-bg-color: @dot-color;

@dot-before-color: @dot-color;

@dot-after-color: @dot-color;

@dot-spacing: 10px;

.dot-flashing-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;

  >.text {
    margin-right: 20px;
  }

  .dot-flashing {
    position: relative;
    border-radius: @dot-radius;
    width: @dot-width;
    height: @dot-height;
    animation: dot-flashing 1s .5s infinite linear alternate;

    &::before,
    &::after {
      position: absolute;
      top: 0;
      display: inline-block;
      border-radius: @dot-radius;
      width: @dot-width;
      height: @dot-height;
      content: "";
    }

    &::before {
      left: -@dot-spacing;
      animation: dot-flashing 1s infinite alternate;
    }

    &::after {
      left: @dot-spacing;
      animation: dot-flashing 1s 1s infinite alternate;
    }
  }
}

@keyframes dot-flashing {
  0% {
    background-color: @dot-color;
  }

  50%,
  100% {
    background-color: lighten(@dot-color, 15%);
  }
}