@import "../../styles/variables";
@import "../../styles/global/functions";

:host {
  padding: 20px;
  display: flex;
  flex-direction: row;
  font-size: 13px;
  gap: 0.3em;

  &.size-small {
    padding: 8px;
    font-size: 8px;
  }

  &.size-large {
    font-size: 18px;
  }

  span.dot {
    display: block;
    border-radius: 50%;
    height: 1em;
    width: 1em;
    @include enumerate($dot-colors, "background-color", "map-val", "");
    @include animationMapDelay($dot-colors, jump, 1600ms, ease-in-out, 70ms, forward, infinite, "", "");
  }

  @each $analytics, $color in $analytics-colors {
    &.color-#{$analytics} {
      span.dot {
        background-color: $color;
      }
    }
  }

  &.white,
  &[inverse] {
    span.dot {
      background-color: #fff !important;
    }
  }
}

@keyframes jump {
  0% {
    transform: translateY(0px);
  }

  30% {
    transform: translateY(0px);
    opacity: 1;
  }

  45% {
    transform: translateY(-1.2em);
    opacity: 0.5;
  }

  60% {
    transform: translateY(0.8em);
    opacity: 0.95;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}