@use "sass:list";

@mixin transition($properties, $duration: 0.15s, $easing: ease-in-out, $will-change: false) {
    @if $will-change {
        will-change: list.join($properties, (), "comma");
    }

    @if (1 == list.length($properties)) {
        transition: #{$duration} #{$easing} #{$properties};
    } @else {
        transition: #{$duration} #{$easing};
        transition-property: list.join($properties, (), "comma");
    }
}

@mixin reduced {
    @media (prefers-reduced-motion) {
        @content;
    }
}