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

:root {
  --pending-bars-size-small: 14px;
  --pending-bars-size: 20px;
  --pending-bars-size-large: 26px;
  --pending-bars-color-default: #a8abb5;
  --pending-bars-color-primary: var(--color-primary);
  --pending-bars-color-success: var(--color-success);
  --pending-bars-color-info: var(--color-info);
  --pending-bars-color-warning: var(--color-warning);
  --pending-bars-color-danger: var(--color-danger);
  --pending-bars-animation-duration: 1.5s;
}

/* Keyframes */
@keyframes scale {
  0%,
  40%,
  100% {
    transform: scaleY(0.6);
  }

  20% {
    transform: scaleY(1);
  }
}

/* Reset */
.container {
  all: initial;
}

/* Styles */
.container {
  display: inline-flex;
  vertical-align: middle;
  align-content: center;
  align-items: center;
  justify-content: space-evenly;
  flex-flow: row nowrap;
  width: var(--pending-bars-size);
  height: var(--pending-bars-size);

  & > div {
    display: block;
    flex: 0 0 auto;
    animation: scale var(--pending-bars-animation-duration) infinite ease;
    background-color: var(--pending-bars-color-default);
    flex: 0 0 auto;
    width: 2px;
    height: calc(var(--pending-bars-size) * 0.8);
    margin: 0 1px;
    transform: scaleY(0.6);

    &:nth-child(1) {
      animation-delay: 0.9s;
    }

    &:nth-child(2) {
      animation-delay: 1s;
    }

    &:nth-child(3) {
      animation-delay: 1.1s;
    }

    &:nth-child(4) {
      animation-delay: 1.2s;
    }

    &:nth-child(5) {
      animation-delay: 1.3s;
    }
  }
}

/* Sizes */
.small {
  width: var(--pending-bars-size-small);
  height: var(--pending-bars-size-small);

  & > div {
    width: 1px;
    height: calc(var(--pending-bars-size-small) * 0.8);
  }
}

.large {
  width: var(--pending-bars-size-large);
  height: var(--pending-bars-size-large);

  & > div {
    margin: 0 1.5px;
    width: 3px;
    height: calc(var(--pending-bars-size-large) * 0.8);
  }
}

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

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

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

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

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