@use '../../theme.scss';
.me-dot {
  position: relative;
  width: 12px;
  height: 12px;
  .dot {
    position: absolute;
    width: var(--dot-size);
    height: var(--dot-size);
    background-color: var(--dot-color);
    border-radius: 50%;
  }

  .light-dot:before {
    content: "";
    display: block;
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    opacity: 0.7;
    background-color: var(--dot-color);
    animation: scaless 1s infinite cubic-bezier(0, 0, 0.49, 1.02);
  }

  @keyframes scaless {
    0% {
      transform: scale(1);
    }

    50%,
    75% {
      transform: scale(3);
    }

    78%,
    100% {
      opacity: 0;
    }
  }
}
