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

/*
---
name: page-effect()
category:
  - core/abstract
---
Abstract page effect component

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

.c-page-effect {
  @include core.page-effect((
    duration: .2s,
    background-color: #fff,
  ));
}
```

### js
```js
import BasisPageEffect from 'node_modules/sass-basis/src/js/_page-effect.js';
new BasisPageEffect({
  pageEffect: '.c-page-effect',
  duration: 200
});
```

### html
```ejs
<div class="c-page-effect" data-page-effect="fadein" aria-hidden="false">
  <div class="c-page-effect__item">
    Loading...
  </div>
</div>
```
*/

@mixin page-effect($params: ()) {
  $params: map.merge(
    (
      duration: .2s, // Must be the same as js location duration time.
      background-color: var(--_color-white),
    ),
    $params
  );

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

  $fadein-animation-name : function.sanitize-animation-name(_page-effect-fadein- + list.zip(map.values($params)));
  $fadeout-animation-name: function.sanitize-animation-name(_page-effect-fadeout- + list.zip(map.values($params)));

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--_page-effect-z-index);
  display: flex;
  align-items: center;
  justify-content: center;

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

  &[data-page-effect="fadein"][aria-hidden="true"] {
    opacity: 0;
    z-index: -1;
    animation: $fadein-animation-name ($duration + 0.2) ease-in 0s;
  }

  &[data-page-effect="fadeout"][aria-hidden="false"] {
    opacity: 1;
    z-index: var(--_page-effect-z-index);
    animation: $fadeout-animation-name $duration ease-in 0s;
  }

  @keyframes #{$fadein-animation-name} {
    0% {
      z-index: var(--_page-effect-z-index);
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes #{$fadeout-animation-name} {
    0% {
      z-index: var(--_page-effect-z-index);
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  &__item {
    flex: 0 1 auto;
  }
}