//
// Spinner (Pulse)
//
// @param  hash  params  properties for decoration
//
// .c-spinner-pulse {
//   _spinner-pulse({
//     height: 16px,
//     width: 5px,
//     color: _color-gray,
//     delay: 0s,
//     duration: 2s,
//     scale: 1.3,
//   });
// }
//
// <div class="c-spinner-pulse">
//   <div class="c-spinner-pulse__bar"></div>
//   <div class="c-spinner-pulse__bar"></div>
//   <div class="c-spinner-pulse__bar"></div>
// </div>
//

_spinner-pulse(params = {}) {
  params = merge(
    {
      height: 16px,
      width: 5px,
      color: _color-gray,
      delay: 0s,
      duration: 2s,
      scale: 1.4,
    },
    params
  );

  height = params['height'];
  width = params['width'];
  color = params['color'];
  delay = params['delay'];
  duration = params['duration'];
  scale = params['scale'];

  animation-name = _sanitize-animation-name(_spinner-pulse- + join('-', values(params)));

  display: inline-flex;
  justify-content: space-between;

  &__bar {
    height: height;
    width: width;
    display: block;
    background-color: color;
    animation: animation-name duration ease-in delay infinite;

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

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

    @keyframes animation-name {
      0% {
        transform: scaleY(1);
      }
      10% {
        transform: scaleY(scale);
      }
      20% {
        transform: scaleY(1);
      }
      100% {
        transform: scaleY(1);
      }
    }
  }
}