@use 'sass:list';
@use 'sass:map';
@use 'animation' as *;

@mixin transition($properties, $duration-key: '100', $easing-key: 'linear') {
  @if list.length($properties) == 0 or $properties == null {
    @error "[STIHL Design System] - [ds.transition()]: No properties provided for ds.transition() mixin.";
  }

  $duration: map.get($animation-durations, $duration-key);
  $easing: map.get($animation-easing-functions, $easing-key);

  @if not map.has-key($animation-durations, $duration-key) {
    @error "[STIHL Design System] - [ds.transition()]: Duration key '#{$duration-key}' is not available in the ds.transition() mixin.";
  }

  @if not map.has-key($animation-easing-functions, $easing-key) {
    @error "[STIHL Design System] - [ds.transition()]: Easing key '#{$easing-key}' is not available in the ds.transition() mixin.";
  }

  $transition-values: ();
  @each $prop in $properties {
    $transition-values: list.append(
      $transition-values,
      #{$prop} #{$duration} #{$easing},
      comma
    );
  }
  & {
    transition: $transition-values;

    @media (prefers-reduced-motion: reduce) {
      transition-duration: 0ms;
    }
  }
}