#scss mixins for text underline

undeline.scss

	/* mixins for text underline */
	@mixin text-underline-crop($background) {
		text-shadow:  .03em 0 $background, 
									-.03em 0 $background,
									0 .03em $background,
									0 -.03em $background,
									.06em 0 $background,
									-.06em 0 $background,
									.09em 0 $background,
									-.09em 0 $background,
									.12em 0 $background,
									-.12em 0 $background,
									.15em 0 $background,
									-.15em 0 $background;
	}
	
	@mixin text-underline($under-c) {
		background-image: linear-gradient($under-c, $under-c);
		background-size: 2px 2px;
		background-repeat: repeat-x;
		background-position: 0% 95%;
	}
	
	@mixin text-selection($selection) {
		&::selection {
			@include text-underline-crop($selection);
			
			background: $selection;
		}
	
		&::-moz-selection {
			@include text-underline-crop($selection);
			
			background: $selection;
		}
	}
	
	@mixin link-underline($background, $text, $underline-color, $selection){
		@include text-underline-crop($background);
		@include text-underline($underline-color);
		@include text-selection($selection);
	
		color: $text;
		text-decoration: none;

		*,
		*:after,
		&:after,
		*:before,
		&:before {
			text-shadow: none;
		}
	
		&:visited {
			color: $text;
		}
	}