//-------------------------------------------------------------------------------------
// Angled Edges v2.0.0 (https://github.com/josephfusco/angled-edges)
// Copyright 2017 Joseph Fusco
// Licensed under MIT (https://github.com/josephfusco/angled-edges/blob/master/LICENSE)
//-------------------------------------------------------------------------------------

/// Replace `$search` with `$replace` in `$string`.
///
/// @author Hugo Giraudel
/// @link   http://www.sassmeister.com/gist/1b4f2da5527830088e4d
///
/// @param  {String}  $string - Initial string
/// @param  {String}  $search - Substring to replace
/// @param  {String}  $replace ('') - New value
/// @return {String}  Updated string
///
@function ae-str-replace($string, $search, $replace: '') {
	$index: str-index($string, $search);

	@if $index {
		@return str-slice($string, 1, $index - 1) + $replace + ae-str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
	}

	@return $string;
}

/// Encode SVG to use as background.
///
/// @param  {String}  $string
/// @return {String}  Encoded svg data
///
@function ae-svg-encode($string){
	$result: ae-str-replace($string, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
	$result: ae-str-replace($result, '%', '%25');
	$result: ae-str-replace($result, '"', '\'');
	$result: ae-str-replace($result, '<', '%3C');
	$result: ae-str-replace($result, '>', '%3E');

	@return 'data:image/svg+xml,' + $result;
}

/// Outputs pseudo content for main mixin.
///
/// @author Joseph Fusco
///
/// @param  {String}  $location
/// @param  {Number}  $height
/// @output psuedo content
///
@mixin ae-pseudo($wedge, $height, $width) {
	background-image: url($wedge);
	background-position: center center;
	background-repeat: no-repeat;

	// full width wedge - needed as Firefox ignores preserveAspectRatio="none" in this case
	@if ($width == null) {
		background-size: 100% 100%;
	}

	content: '';
	height: $height * 1px;
	left: 0;
	position: absolute;
	right: 0;
	width: 100%;
	z-index: 1;
}

/// Attatches an svg wedge shape to an element.
///
/// @author Joseph Fusco
///
/// @param  {String}  $location   - 'inside top', 'outside top', 'inside bottom', 'outside bottom'
/// @param  {String}  $hypotenuse - 'upper left', 'upper right', 'lower left', 'lower right'
/// @param  {Color}   $fill
/// @param  {Number}  $height
/// @param  {Number}  $width
/// @output '::before' and/or '::after' with svg background image
///
@mixin angled-edge($location, $hypotenuse, $fill, $height: 100, $width: null) {

	position: relative;

	$points: (
		'upper left': '0,#{$height} #{$width},#{$height} #{$width},0',
		'upper right': '0,#{$height} #{$width},#{$height} 0,0',
		'lower left': '0,0 #{$width},#{$height} #{$width},0',
		'lower right': '0,0 #{$width},0 0,#{$height}'
	);

	// full width wedge
	@if ($width == null) {
		$points: (
			'upper left': '0,#{$height} 100,#{$height} 100,0',
			'upper right': '0,#{$height} 100,#{$height} 0,0',
			'lower left': '0,0 100,#{$height} 100,0',
			'lower right': '0,0 100,0 0,#{$height}'
		);
	}

	// ensure $fill color is using rgb()
	$fill-rgb: 'currentColor';

	// capture alpha component of $fill to use with fill-opacity
	$fill-alpha: alpha($fill);

	$wedge: '<svg width="#{$width}" height="#{$height}" fill="#{$fill-rgb}" fill-opacity="#{$fill-alpha}"><polygon points="#{map-get($points, $hypotenuse)}"></polygon></svg>';

	// full width wedge
	@if ($width == null) {
		$wedge: '<svg preserveAspectRatio="none" viewBox="0 0 100 #{$height}" fill="#{$fill-rgb}" fill-opacity="#{$fill-alpha}"><polygon points="#{map-get($points, $hypotenuse)}"></polygon></svg>';
	}

	$encoded-wedge: ae-svg-encode($wedge);

	@if ($location == 'inside top') {
		&::before {
			@include ae-pseudo($encoded-wedge, $height, $width);
			top: 0;
		}
	} @else if ($location == 'outside top') {
		&::before {
			@include ae-pseudo($encoded-wedge, $height, $width);
			top: -$height * 1px;
		}
	} @else if ($location == 'inside bottom') {
		&::after {
			@include ae-pseudo($encoded-wedge, $height, $width);
			bottom: 0;
		}
	} @else if ($location == 'outside bottom') {
		&::after {
			@include ae-pseudo($encoded-wedge, $height, $width);
			bottom: -$height * 1px;
		}
	} @else {
		@error 'Invalid argument for $location - must use: `inside top`, `outside top`, `inside bottom`, `outside bottom`';
	}

	@if (map-has-key($points, $hypotenuse) == false) {
		@error 'Invalid argument for $hypotenuse - must use: `upper left`, `upper right`, `lower left`, `lower right`';
	}
}
// ================================================

#example-1 {
	.has-angle {
		@include angled-edge("outside bottom", "lower right", tomato);
	}
}
#example-2 {
	.has-angle {
		@include angled-edge("outside bottom", "lower left", yellowgreen);
	}
}
#example-3 {
	.has-angle {
		@include angled-edge("inside bottom", "upper left", deepskyblue);
	}
}
#example-4 {
	.has-angle {
		@include angled-edge("inside bottom", "upper right", blueviolet);
	}
}
#example-5 {
	.has-angle {
		@include angled-edge("outside top", "upper right", orchid);
	}
}
#example-6 {
	.has-angle {
		@include angled-edge("outside top", "upper left", khaki);
	}
}
#example-7 {
	.has-angle {
		@include angled-edge("inside top", "lower left", lime);
	}
}
#example-8 {
	.has-angle {
		@include angled-edge("inside top", "lower right", fuchsia);
	}
}
// Example styles
hr {
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.example-section {
	margin: 100px 0;
}
.example-container {
	width: 500px;
	max-width: 100%;
	margin: 0 auto;
}
.example-snippet {
	text-align: center;
	margin: 0 auto 50px;
	font-size: 18px;
	opacity: 0;
}
.example-snippet-padded {
	@extend .example-snippet;
	padding-bottom: 100px;
}
.has-angle {
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
	height: 200px;
	background-color: #333;
	margin-bottom: 200px;
}
@media (min-width: 550px) {
	.example-snippet {
		opacity: 1;
		font-size: 13px;
	}
}
@media (min-width: 800px) {
	.example-snippet {
		opacity: 1;
		font-size: 18px;
	}
}