//-------------------------------------------------------------------
// Motion
//-------------------------------------------------------------------

// Transitions
//-------------------------------------------------------------------

@function speed($speed) {
  @return $transition-duration * $speed;
}

@function transition-speed($speed) {
  @if map-has-key($speeds, $speed) {
    $speed: map-get($speeds, $speed);
    @return $speed;
  }
  @warn error-message($speed, $speeds,'tokens/_motion.scss');
  @return null;
}

@function transition-property($property-set) {
  @if map-has-key($transition-properties, $property-set) {
    $property-set: map-get($transition-properties, $property-set);
    @return #{$property-set};
  }
  @warn error-message($property-set, $transition-properties, 'tokens/_motion.scss');
  @return null;
}

@mixin transition($speed: 'fast', $properties: 'default') {
  @if map-has-key($speeds, $speed) {
    transition: transition-speed($speed);
  } @else {
    transition-duration: speed($speed);
  }

  transition-property: transition-property($properties);

  @media (prefers-reduced-motion: reduce) {
    transition-duration: 0 !important;

    &:hover,
    &:focus {
      transition-duration: 0 !important;
    }
  }
}

@mixin animate($animation, $speed: 'fast', $properties...) {
  animation: $animation transition-speed($speed) transition-property($properties);
  @media (prefers-reduced-motion: reduce) {
    animation-duration: 0;
  }
}