@use "sass:map";
@use "sass:list";
@use "../function";
@use "../mixin";

/*
---
name: circle-spinner()
category:
  - core/abstract
  - core/abstract/spinner
---
Abstract circle spinner component

### scss
```scss
//
// @param  hash  $params
//   size         length
//   color        hex
//   border-size  length
//   delay        seconds
//   duration     seconds
//

@use "node_modules/sass-basis/src/css/core";

.c-circle-spinner {
  @include core.circle-spinner((
    size: 20px,
    color: var(--_light-color-gray),
    border-size: 3px,
    delay: 0s,
    duration: 2s,
  ));
}
```

### html
```ejs
<div class="c-circle-spinner"></div>
```
*/

@mixin circle-spinner($params: ()) {
  $params: map.merge(
    (
      size: 20px,
      color: var(--_light-color-gray),
      accent-color: var(--_color-gray),
      border-size: 3px,
      delay: 0s,
      duration: 2s,
    ),
    $params
  );

  $size: map.get($params, 'size');
  $border-size: map.get($params, 'border-size');
  $delay: map.get($params, 'delay');
  $duration: map.get($params, 'duration');

  $animation-name: function.sanitize-animation-name(_circle-spinner- + list.zip(map.values($params)));

  display: inline-block;
  @include mixin.circle($size);
  border: $border-size solid transparent;
  animation: $animation-name $duration linear $delay infinite;

  @each $color in map.get($params, 'color') {
    border-color: $color;
  }

  @each $accent-color in map.get($params, 'accent-color') {
    border-top-color: $accent-color;
  }

  @keyframes #{$animation-name} {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

/*
---
name: dots-spinner()
category:
  - core/abstract
  - core/abstract/spinner
---
Abstract dots spinner component

### scss
```scss
//
// @param  hash  $params
//   size         length
//   color        hex
//   delay        seconds
//   duration     seconds
//   scale        int
//

@use "node_modules/sass-basis/src/css/core";

.c-dots-spinner {
  @include core.dots-spinner((
    size: 10px,
    color: var(--_color-gray),
    delay: 0s,
    duration: 2s,
    scale: 1.3,
  ));
}
```

### html
```ejs
<div class="c-dots-spinner">
  <div class="c-dots-spinner__dot"></div>
  <div class="c-dots-spinner__dot"></div>
  <div class="c-dots-spinner__dot"></div>
</div>
```
*/

@mixin dots-spinner($params: ()) {
  $params: map.merge(
    (
      size: 10px,
      color: var(--_color-gray),
      delay: 0s,
      duration: 2s,
      scale: 1.3,
    ),
    $params
  );

  $size: map.get($params, 'size');
  $delay: map.get($params, 'delay');
  $duration: map.get($params, 'duration');
  $scale: map.get($params, 'scale');

  $animation-name: function.sanitize-animation-name(_dots-spinner- + list.zip(map.values($params)));

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

  &__dot {
    @include mixin.circle($size);
    display: inline-block;
    animation: $animation-name $duration ease-in $delay infinite;

    @each $color in map.get($params, 'color') {
      background-color: $color;
    }

    &: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);
      }
    }
  }
}

/*
---
name: _pulse-spinner()
category:
  - core/abstract
  - core/abstract/spinner
---
Abstract pulse spinner component

### scss
```scss
//
// @param  hash  $params
//   height    length
//   width     length
//   color     hex
//   delay     seconds
//   duration  seconds
//   scale     int
//

@use "node_modules/sass-basis/src/css/core";

.c-pulse-spinner {
  @include core.pulse-spinner((
    height: 16px,
    width: 5px,
    color: var(--_color-gray),
    delay: 0s,
    duration: 2s,
    scale: 1.3,
  ));
}
```

### html
```ejs
<div class="c-pulse-spinner">
  <div class="c-pulse-spinner__bar"></div>
  <div class="c-pulse-spinner__bar"></div>
  <div class="c-pulse-spinner__bar"></div>
</div>
```
*/

@mixin pulse-spinner($params: ()) {
  $params: map.merge(
    (
      height: 16px,
      width: 5px,
      color: var(--_color-gray),
      delay: 0s,
      duration: 2s,
      scale: 1.4,
    ),
    $params
  );

  $height: map.get($params, 'height');
  $width: map.get($params, 'width');
  $delay: map.get($params, 'delay');
  $duration: map.get($params, 'duration');
  $scale: map.get($params, 'scale');

  $animation-name: function.sanitize-animation-name(_pulse-spinner- + list.zip(map.values($params)));

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

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

    @each $color in map.get($params, 'color') {
      background-color: $color;
    }

    &: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);
      }
    }
  }
}