//
// Spinner (Dots)
//
// @param  hash  params  properties for decoration
//
// .c-spinner-dots {
//   _spinner-dots({
//     size: 10px,
//     color: _color-gray,
//     delay: 0s,
//     duration: 2s,
//     scale: 1.3,
//   });
// }
//
// <div class="c-spinner-dots">
//   <div class="c-spinner-dots__dot"></div>
//   <div class="c-spinner-dots__dot"></div>
//   <div class="c-spinner-dots__dot"></div>
// </div>
//

_spinner-dots(params = {}) {
  params = merge(
    {
      size: 10px,
      color: _color-gray,
      delay: 0s,
      duration: 2s,
      scale: 1.3,
    },
    params
  );

  size = params['size'];
  color = params['color'];
  delay = params['delay'];
  duration = params['duration'];
  scale = params['scale'];

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

  display: inline-block;
  font-size: 0;

  &__dot {
    _circle(size);
    display: inline-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: scale(1);
      }
      10% {
        transform: scale(scale);
      }
      20% {
        transform: scale(1);
      }
      100% {
        transform: scale(1);
      }
    }
  }
}