/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */

:root {
  --pending-dots-offset: 1px;

  --pending-dots-small-size: 3px;
  --pending-dots-size: 5px;
  --pending-dots-large-size: 7px;

  --pending-dots-color-default: #a8abb5;
  --pending-dots-color-primary: var(--color-primary);
  --pending-dots-color-success: var(--color-success);
  --pending-dots-color-info: var(--color-info);
  --pending-dots-color-warning: var(--color-warning);
  --pending-dots-color-danger: var(--color-danger);
  --pending-dots-animation-duration: 1.5s;
  --pending-dots-animation-delay: calc(
    var(--pending-dots-animation-duration) / 15
  );
}

/* Keyframes */
@keyframes pulse {
  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.2;
  }

  30% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Styles */
.container {
  position: relative;
  display: inline-flex;
  flex-flow: row nowrap;
  vertical-align: middle;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: calc(var(--pending-dots-size) * 3 + var(--pending-dots-offset) * 2);
  height: calc(var(--pending-dots-size) * 3 + var(--pending-dots-offset) * 2);

  & > div {
    display: block;
    flex: 0 0 auto;
    animation: pulse var(--pending-dots-animation-duration) ease infinite;
    transform-origin: center center;
    border-radius: 50%;
    background-color: var(--pending-dots-color-default);
    width: var(--pending-dots-size);
    height: var(--pending-dots-size);
    margin: 0 calc(var(--pending-dots-offset) / 2);

    &:nth-child(2) {
      animation-delay: var(--pending-dots-animation-delay);
    }

    &:nth-child(3) {
      animation-delay: calc(var(--pending-dots-animation-delay) * 2);
    }
  }
}

/* Sizes */
.small {
  height: calc(
    var(--pending-dots-small-size) * 3 + var(--pending-dots-offset) * 2
  );
  width: calc(
    var(--pending-dots-small-size) * 3 + var(--pending-dots-offset) * 2
  );

  & > div {
    width: var(--pending-dots-small-size);
    height: var(--pending-dots-small-size);
  }
}

.large {
  height: calc(
    var(--pending-dots-large-size) * 3 + var(--pending-dots-offset) * 2
  );
  width: calc(
    var(--pending-dots-large-size) * 3 + var(--pending-dots-offset) * 2
  );

  & > div {
    width: var(--pending-dots-large-size);
    height: var(--pending-dots-large-size);
  }
}

/* Themes */
.primary > div {
  background-color: var(--pending-dots-color-primary);
}

.success > div {
  background-color: var(--pending-dots-color-success);
}

.info > div {
  background-color: var(--pending-dots-color-info);
}

.warning > div {
  background-color: var(--pending-dots-color-warning);
}

.danger > div {
  background-color: var(--pending-dots-color-danger);
}