- @arrows = ['top','right','bottom','left']
%section.demo-css
  - @arrows.each do |i|
    %div{:class=>"arrow-css #{i}"}

%section.demo-sass
  - @arrows.each do |i|
    %div{:class=>"arrow-sass #{i}"}

section, div { 
	display: flex;
	margin: 2em auto 0;
}

// FIRST, WE DO IT IN OLD SCHOOL CSS

.arrow-css {
	transform: rotate(45deg);
	border-style: solid;
}

.top {
	border-width: 5px 20px 20px 5px;
	border-color: #556270 transparent transparent #556270;
}

.right {
	border-width: 5px 5px 20px 20px;
	border-color: #4ecdc4 #4ecdc4 transparent transparent;
}

.bottom {
	border-width: 20px 5px 5px 20px;
	border-color: transparent #c7f464 #c7f464 transparent;
}

.left {
	border-width: 20px 20px 5px 5px;
	border-color: transparent transparent #ff6b6b #ff6b6b;
}

// NOW, LET'S DO THIS THE SASS WAY

$arrows: top #556270 -45deg, right #4ecdc4 45deg, bottom #c7f464 135deg, left #ff6b6b 225deg;

.arrow-sass {
	border-width: 5px 5px 20px 20px;
	border-style: solid;

	@each $arrow in $arrows {
		&.#{nth($arrow, 1)} {
			border-color: nth($arrow, 2) nth($arrow, 2) transparent transparent;
			transform: rotate(nth($arrow, 3));
		}
	}
}