@use "sass:math";
@use "sass:list";

// if you don't want to use deps...
@function join($list, $glue: '', $is-nested: false) {
    $result: null;
    @for $i from 1 through length($list) {
        $e: nth($list, $i);
        @if type-of($e) == list {
            $result: $result#{join($e, $glue, true)};
        } @else {
            $result: if(sass($i != length($list) or $is-nested): $result #{$e}#{$glue}; else: $result #{$e});
        }
    }
    @return $result;
};

// F(X):[x,y] where X:[0..1]
@#{"function --wavy-step(--step <number>)"} {
    --angle: calc((var(--step, 0) * 2) * 1rad * pi);
    --variant: calc(cos(var(--clip-freq, 8) * var(--angle, 0deg)) * 0.5 + 0.5);
    --adjust: calc(var(--variant, 0) * var(--clip-amplitude, 0));
    --x: calc(50% + (cos(var(--angle, 0deg)) * (0.5 - var(--adjust, 0))) * var(--icon-size, 100%));
    --y: calc(50% + (sin(var(--angle, 0deg)) * (0.5 - var(--adjust, 0))) * var(--icon-size, 100%));
    result: #{"var(--x) var(--y)"};
}

// F(X):[x,y] where X:[0..1]
@function ShapeMaker($it: 0, $name: "wavy-step", $steps: 100) {
    $step: math.div($it, $steps);
    @if $it == 0
        { @return "from --#{$name}(#{$step})"; } @else
        { @return "line to --#{$name}(#{$step})"; }
}

// space cadet or cheater-tale
@function Integrate($name: "wavy-step", $steps: 100) {
    $points: ();
    @for $i from 0 through $steps { $points: list.append($points, ShapeMaker($i, $name, $steps), $separator: comma); }
    @return "shape(evenodd #{$points}, close)";
}

//
@mixin wavy-shaped($detail: 100) {
    --clip-amplitude: 0.05;
    --clip-freq: 8;
    --clip-path: #{Integrate("wavy-step", $detail)};
    --icon-size: 100%;
    --corrector: 1.1;
}