@import '../settings/variables';

$margin-between-bar: 0.85em;

.c-spinner {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 0.375em;
  height: 100%;
  min-height: 2.5em;
  margin: auto;
  
  &__bar {
    display: block;
    position: absolute;
    width: 0.375em;
    height: 1.25em;
    background-color: $color-primary;
    border-radius: $border-radius;

    &:nth-child(1){
      animation: grow 1s ease-in-out infinite;
      left: -$margin-between-bar;
    }

    &:nth-child(2){
      animation: grow 1s ease-in-out 0.15s infinite;
    }

    &:nth-child(3){
      animation: grow 1s ease-in-out 0.30s infinite;
      left: $margin-between-bar;
    }
  }

  @keyframes grow{
    0%, 100%{
      -webkit-transform: scaleY(1);
      -ms-transform: scaleY(1);
      -o-transform: scaleY(1);
      transform: scaleY(1);
    }

    50%{
      -webkit-transform: scaleY(1.8);
      -ms-transform: scaleY(1.8);
      -o-transform: scaleY(1.8);
      transform: scaleY(1.8);
    }
  }
}