@use "sass:map" as *;
@use "mixins" as *;

/* Transitions */

$axes: block, inline;
$directions: start, end;

$transition-states: from, to, active;
$transition-actions: enter, leave;

$fixed-size: var(--step-3);

:root {
  --app-motion-standard: 0.3s cubic-bezier(0.2, 0, 0, 1);
  --app-motion-standard-enter: 0.25s cubic-bezier(0, 0, 0, 1);
  --app-motion-standard-leave: 0.2s cubic-bezier(0.3, 0, 1, 1);

  --app-motion-emphasis: 0.5s
    linear(
      0 0%,
      0 3%,
      0.02 5%,
      0.05 7%,
      0.08 9%,
      0.11 10%,
      0.14 11%,
      0.17 12%,
      0.2 13%,
      0.24 14%,
      0.27 15%,
      0.3 15%,
      0.34 15%,
      0.37 16%,
      0.4 16%,
      0.43 17%,
      0.47 17%,
      0.5 17%,
      0.53 18%,
      0.57 18%,
      0.6 19%,
      0.63 20%,
      0.66 20%,
      0.7 21%,
      0.73 23%,
      0.76 24%,
      0.79 26%,
      0.81 28%,
      0.84 30%,
      0.86 32%,
      0.88 35%,
      0.9 38%,
      0.91 41%,
      0.93 44%,
      0.94 47%,
      0.95 50%,
      0.96 53%,
      0.96 56%,
      0.97 60%,
      0.97 63%,
      0.98 66%,
      0.98 70%,
      0.99 73%,
      0.99 76%,
      0.99 80%,
      0.99 83%,
      0.99 86%,
      0.99 90%,
      0.99 93%,
      0.99 96%,
      1 100%
    );
  --app-motion-emphasis-enter: 0.4s cubic-bezier(0.05, 0.7, 0.1, 1);
  --app-motion-emphasis-leave: 0.2s cubic-bezier(0.3, 0, 0.8, 0.15);
}

/* Slide fixed */
@mixin createSlideFixedTransition() {
  @each $axis in $axes {
    @each $direction in $directions {
      .slide-fixed-#{$axis}-#{$direction}-enter-active,
      .slide-fixed-#{$axis}-#{$direction}-leave-active {
        transition: all 0.2s ease;
      }

      .slide-fixed-#{$axis}-#{$direction}-enter-from,
      .slide-fixed-#{$axis}-#{$direction}-leave-to {
        opacity: 0;

        @if $direction ==start {
          @if $axis ==block {
            transform: translateY(#{$fixed-size});
          } @else {
            transform: translateX(#{$fixed-size});
          }
        } @else {
          @if $axis ==block {
            transform: translateY(calc(-1 * #{$fixed-size}));
          } @else {
            transform: translateX(calc(-1 * #{$fixed-size}));
          }
        }
      }
    }
  }
}

/* Slide height */
@mixin createSlideHeightTransition() {
  .slide-height-enter-active {
    transition: all 0.2s ease-in;
  }

  .slide-height-leave-active {
    transition: all 0.2s ease-out;
  }

  .slide-height-leave-from,
  .slide-height-enter-to {
    max-height: 100%;
  }

  .slide-height-enter-from,
  .slide-height-leave-to {
    max-height: 0%;
  }
}

@include createSlideHeightTransition();
@include createSlideFixedTransition();

/* Fade */
@include createTransition(fade, opacity) {
  opacity: 0;
}

/* Slide */
@include createTransition(
    slide,
    transform,
    (
      axis: (
        block,
        inline
      ),
      direction: (
        start,
        end
      )
    )
  )
  using ($axis, $direction) {

  @if $direction ==start {
    @if $axis ==block {
      transform: translateY(100%);
    } @else {
      transform: translateX(100%);
    }
  } @else {
    @if $axis ==block {
      transform: translateY(-100%);
    } @else {
      transform: translateX(-100%);
    }
  }
}


/* Slide Fade */
@include createTransition(
    slide-fade,
    transform opacity,
    (
      axis: (
        block,
        inline
      ),
      direction: (
        start,
        end
      ),
      distance: (
        '3xs',
        '2xs',
        'xs',
        's',
        'm',
        'l',
        'xl',
        '2xl',
        '3xl'
      )
    )
  )
  using ($axis, $direction, $distance) {
  opacity: 0;

  @if $direction ==start {
    @if $axis ==block {
      transform: translateY(var(--space-#{$distance}));
    } @else {
      transform: translateX(var(--space-#{$distance}));
    }
  } @else {
    @if $axis ==block {
      transform: translateY(calc(var(--space-#{$distance}) * -1));
    } @else {
      transform: translateX(calc(var(--space-#{$distance}) * -1));
    }
  }
}

/* Zoom Fade */
@include createTransition(
    zoom-fade,
    transform opacity,
    (
      direction: (
        front,
        back
      ),
      distance: (
        '3xs',
        '2xs',
        'xs',
        's',
        'm',
        'l',
        'xl',
        '2xl',
        '3xl'
      )
    )
  )
  using ($direction, $distance) {
  opacity: 0;

  @if $direction ==front {
    transform: translateZ(calc(var(--space-#{$distance}) * -1));
  } @else {
    transform: translateZ(var(--space-#{$distance}));
  }
}