@use "sass:map";
@use "sass:list";
@use "tokens" as *;

/// Hent en easing til bruk i animasjoner. Se også `timing`-funksjonen og `motion`-mixinen.
/// @param {string} $name - Navn på easingen du ønsker verdien til
/// @return {String} - easingverdi til bruk i animasjoner
/// @see timing
/// @see motion
@function easing($name) {
    @if map.has-key($tokens, "motion", "easing", $name) {
        @return map.get($tokens, "motion", "easing", $name);
    } @else {
        @error 'Unable to find an easing named #{$name} in our supported easings.';
    }
}

/// Hent en timing til bruk i animasjoner. Se også `easing`-funksjonen og `motion`-mixinen.
/// @param {"energetic" | "snappy" | "productive" | "expressive" | "lazy"} $mode - Navn på timingen du ønsker verdien til
/// @return {String} - timingverdi til bruk i animasjoner
/// @see easing
/// @see motion
@function timing($mode) {
    @if map.has-key($tokens, "motion", "timing", $mode) {
        @return map.get($tokens, "motion", "timing", $mode);
    } @else {
        @error 'Unable to find a timing named #{$mode} in our supported timings';
    }
}

/// Setter transition-timing-function og transition-duration, for bruk i animasjoner.
/// Se også `timing`- og `easing`-funksjonene.
/// @param {"standard" | "entrance" | "exit" | "easeInBounceOut" | "focus"} $name [standard] - Navn på easingen du ønsker verdien til
/// @param {"energetic" | "snappy" | "productive" | "expressive" | "lazy"} $mode [productive] - Navn på timingen du ønsker verdien til
/// @param $properties - Kommaseparert liste over egenskapene du ønsker å animere
/// @see easing
/// @see timing
@mixin motion($name: "standard", $mode: "productive", $properties...) {
    transition-timing-function: easing($name);
    transition-duration: timing($mode);

    @if list.length($properties) > 0 {
        transition-property: $properties;
    }
}