import { LitElement, css, html } from "lit";
const DOT_SELECTOR = "dot";
export class MerAnimatedDots extends LitElement {
    static styles = css `
    :host {
      --dot-size: 5px;
      --dot-initial-opacity: 0;
      --dot-initial-scale: 0.5;
      --animation-duration: 0.4s;
      display: inline-flex;
      gap: calc(var(--dot-size) / 1.15);
    }

    .dot {
      display: inline-block;
      inline-size: var(--dot-size);
      block-size: var(--dot-size);
      border-radius: calc(var(--dot-size) / 2);
      opacity: var(--dot-initial-opacity);
      transform: scale(var(--dot-initial-scale));
      animation: animateDot var(--animation-duration) ease-in-out infinite
        alternate;
    }
    .dot:first-child {
      background-color: var(
        --chat-avatar-waiting-dot-1-color,
        var(--color-accent-gradient-start)
      );
    }
    .dot:nth-child(2) {
      animation-delay: calc(var(--animation-duration) / 3);
      background-color: var(
        --chat-avatar-waiting-dot-2-color,
        var(--color-accent-gradient-middle)
      );
    }
    .dot:nth-child(3) {
      animation-delay: calc(var(--animation-duration) / 1.5);
      background-color: var(
        --chat-avatar-waiting-dot-3-color,
        var(--color-accent-gradient-end)
      );
    }

    @keyframes animateDot {
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
  `;
    // Render the UI as a function of component state
    render() {
        return html `<div class=${DOT_SELECTOR} part="dot dot-1"></div>
      <div class=${DOT_SELECTOR} part="dot dot-2"></div>
      <div class=${DOT_SELECTOR} part="dot dot-3"></div>`;
    }
}
if (!customElements.get("mer-animated-dots")) {
    customElements.define("mer-animated-dots", MerAnimatedDots);
}
