@use "sass:math";
@use "../function";

/*
---
name: bounce-vertical()
category:
  - core/mixin
  - core/mixin/animation
---
Bounce vertical

### scss
```scss
//
// @param   length             $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//

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

.c-foo {
  @include core.hover() {
    @include core.bounce-vertical(4px, .5s);
  }
}
```
*/

@mixin bounce-vertical($px, $delay: 0) {
  $keyframe-name: function.sanitize-animation-name(_bounce-vertical- + $px);
  position: relative;
  animation: $keyframe-name $delay;

  @keyframes #{$keyframe-name} {
    0%   { top: ($px * -1); }
    25%  { top: $px; }
    50%  { top: (math.div($px, 2) * -1); }
    75%  { top: math.div($px, 2); }
    100% { top: 0; }
  }
}

/*
---
name: shake-vertical()
category:
  - core/mixin
  - core/mixin/animation
---
Shake vertical

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

.c-foo {
  @include core.hover() {
    @include core.shake-vertical();
  }
}
```
*/

@mixin shake-vertical() {
  @include bounce-vertical(4px, .5s);
}

/*
---
name: vibrate-vertical()
category:
  - core/mixin
  - core/mixin/animation
---
Vibrate vertical

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

.c-foo {
  @include core.hover() {
    @include core.vibrate-vertical();
  }
}
```
*/

@mixin vibrate-vertical() {
  @include bounce-vertical(2px, .2s);
}

/*
---
name: bounce-horizontal()
category:
  - core/mixin
  - core/mixin/animation
---
Bounce horizontal

### scss
```scss
//
// @param   length             $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//

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

.c-foo {
  @include core.hover() {
    @include core.bounce-horizontal(4px, .5s);
  }
}
```
*/

@mixin bounce-horizontal($px, $delay: 0) {
  $keyframe-name: function.sanitize-animation-name(_bounce-horizontal- + $px);
  position: relative;
  animation: $keyframe-name $delay;

  @keyframes #{$keyframe-name} {
    0%   { left: ($px * -1); }
    25%  { left: $px; }
    50%  { left: (math.div($px, 2) * -1); }
    75%  { left: math.div($px, 2); }
    100% { left: 0; }
  }
}

/*
---
name: shake-horizontal()
category:
  - core/mixin
  - core/mixin/animation
---
Shake horizontal

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

.c-foo {
  @include core.hover() {
    @include core.shake-horizontal();
  }
}
```
*/

@mixin shake-horizontal() {
  @include bounce-horizontal(4px, .5s);
}

/*
---
name: vibrate-horizontal()
category:
  - core/mixin
  - core/mixin/animation
---
Vibrate horizontal

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

.c-foo {
  @include core.hover() {
    @include core.vibrate-horizontal();
  }
}
```
*/

@mixin vibrate-horizontal() {
  @include bounce-horizontal(2px, .2s);
}

/*
---
name: bounce-scale()
category:
  - core/mixin
  - core/mixin/animation
---
Bounce scale

### scss
```scss
//
// @param   float              $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//

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

.c-foo {
  @include core.hover() {
    @include core.bounce-scale(1.2, .5s);
  }
}
```
*/
@mixin bounce-scale($float, $delay: 0) {
  $suffix: function.strip-unit(math.percentage($float));
  $keyframe-name: function.sanitize-animation-name(_bounce-scale- + $suffix);
  animation: $keyframe-name $delay ease-out;

  @keyframes #{$keyframe-name} {
    0%   { transform: scale(1); }
    25%  { transform: scale($float); }
    50%  { transform: scale(1); }
    75%  { transform: scale(1 + math.div($float - 1, 2)); }
    100% { transform: scale(1); }
  }
}

/*
---
name: shake-scale()
category:
  - core/mixin
  - core/mixin/animation
---
Shake scale

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

.c-foo {
  @include core.hover() {
    @include core.shake-scale();
  }
}
```
*/

@mixin shake-scale() {
  @include bounce-scale(1.2, .5s);
}

/*
---
name: vibrate-scale()
category:
  - core/mixin
  - core/mixin/animation
---
Vibrate scale

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

.c-foo {
  @include core.hover() {
    @include core.vibrate-scale();
  }
}
```
*/

@mixin vibrate-scale() {
  @include bounce-scale(1.1, .2s);
}

/*
---
name: extend-underline()
category:
  - core/mixin
  - core/mixin/animation
---
Extend the underline from the center.

* This mixin use the pseudo-elements.

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

.c-foo a {
  @include core.hover() {
    &::after {
      @include core.extend-underline();
    }
  }
}
```
*/

@mixin extend-underline() {
  --_transition-duration: var(--_global--transition-duration);
  --_transition-function-timing: var(--_global--transition-function-timing);

  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  content: '';
  width: 0;
  height: 1px;
  transition: width var(--_transition-duration) var(--_transition-function-timing);
  transform: translateX(-50%);
  background-color: currentColor;
}