@use "sass:color";
@use "sass:math";
@use "sass:meta";

/// Generate URL-encoded chevron SVG and return as CSS url() value
///
/// @author John Hildenbiddle (@jhildenbiddle)
///
/// @param  {up|down|left|right} $direction - Direction of chevron
/// @param  {Number}  $width [16px]   - Width of chevron (px)
/// @param  {Number}  $height [10px]  - Height of chevron (px)
/// @param  {Number}  $stroke [1.5px] - Stroke width of chevron (px)
/// @param  {Color}   $color [black]  - Color of chevron
/// @param  {Boolean} $round [false]  - Round stroke linecap and linejoin
/// @return {String}                  - URL-encoded SVG data uri
///
/// @example scss
/// .myclass {
///   background-image: chevron-data-uri(right);
///   background-repeat: no-repeat;
///   background-position: left center;
/// }
///
/// .myclass {
///   background: chevron-data-uri(right) no-repeat left center;
/// }
@function chevron-data-uri($direction, $width: null, $height: null, $stroke: 1.25, $color: black, $round: false) {
    // Default size
    @if $width == null and $height == null {
        @if $direction == up or $direction == down {
            $width : 16;
            $height: 10;
        }
        @else {
            $width : 10;
            $height: 16;
        }
    }
    @else if $direction == up or $direction == down {
        $width : if($width == null, $height * 1.6, $width);
        $height: if($height == null, $width * 0.625, $height);
    }
    @else {
        $width : if($width == null, $height * 0.625, $width);
        $height: if($height == null, $width * 1.6, $height);
    }

    // Strip units
    $width : math.div($width, $width * 0 + 1);
    $height: math.div($height, $height * 0 + 1);
    $stroke: math.div($stroke, $stroke * 0 + 1);

    // Convert color to RGB
    @if meta.type-of($color) == color {
        $color: 'rgb%28#{color.red($color)}, #{color.green($color)}, #{color.blue($color)}%29';
    }

    // Stroke linecap and linejoin
    $linecap : if($round, round, square);
    $linejoin: if($round, round, miter);

    // Path description
    $path-d: '';

    @if $direction == up {
        $path-d: 'M#{$stroke} #{$height - $stroke}l#{($width * 0.5) - $stroke} -#{$height - ($stroke * 2)} #{($width * 0.5) - $stroke} #{$height - ($stroke * 2)}';
    }
    @else if $direction == down {
        $path-d: 'M#{$stroke $stroke}l#{($width * 0.5) - $stroke} #{$height - ($stroke * 2)} #{($width * 0.5) - $stroke}-#{$height - ($stroke * 2)}';
    }
    @else if $direction == right {
        $path-d: 'M#{$stroke} #{$stroke}l#{$width - ($stroke * 2)} #{($height * 0.5) - $stroke} -#{$width - ($stroke * 2)} #{($height * 0.5) - $stroke}';
    }
    @else if $direction == left {
        $path-d: 'M#{$width - $stroke} #{$stroke}l-#{$width - ($stroke * 2)} #{($height * 0.5) - $stroke} #{$width - ($stroke * 2)} #{($height * 0.5) - $stroke}';
    }

    @if $path-d == '' {
        @error "chevron-data-uri: #{$direction} is not a valid direction";
    }
    @else {
        // Unencoded SVG: <svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='#{$height}' viewBox='0 0 #{$width} #{$height}'><path d='#{$path-d}' stroke-width='#{$stroke}' stroke='#{$color}' fill='none' stroke-linecap='#{$linecap}' stroke-linejoin='#{$linejoin}' vector-effect='non-scaling-stroke'/></svg>
        @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='#{$height}' viewBox='0 0 #{$width} #{$height}'%3E%3Cpath d='#{$path-d}' stroke-width='#{$stroke}' stroke='#{$color}' fill='none' stroke-linecap='#{$linecap}' stroke-linejoin='#{$linejoin}' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    }
}