SASS Mixin: Image-less Arrows

mixin-arrows.scss

/*
 * Arrow Mixin
 */
@mixin arrow($font-size: 1em, $color: $black, $hover-color: $white, $background-color: $white, $hover-background-color: $black) {
    
    @include inline-block;
	position: relative;
	background: $background-color;
	font-size: $font-size;
	line-height: 1em;
	padding: 1em 1.25em 1em .25em;
	margin-right: 2.25em;
	margin-left: 2.25em;
	color: $color;
	text-shadow: none;
	text-decoration: none;
	border: none;
	vertical-align: middle;
	
	&:after, &:before { 
		display: block;
		position: absolute; 
		content: "\0020";
		width: 0;
		height: 0;
		border: 0 none;
		border-style: solid;
		border-width: 1.5em;
	}

	&:before {
		right: 100%;
		top: 0;
		border-color: $background-color $background-color $background-color transparent;
	}

	&:after {
		left: 100%;
		top: 0;
		border-color: transparent transparent transparent $background-color;
	}

	&:hover {
		
		color: $hover-color;
		background: $hover-background-color;
		
		&:before { border-color: $hover-background-color $hover-background-color $hover-background-color transparent; }
	
		&:after { border-color: transparent transparent transparent $hover-background-color; }		
		
	}
	
}