//
// Text Link Styles //
//
*[class^='text-link-'], *[class*=' text-link-'] {
	color: $color-black-09;
	&:hover, &:focus {
		color: $color-black-09;
	}
}
.text-link-1 {
	&:hover { text-decoration: underline; }
}
.text-link-2 {
	&:hover { text-decoration: line-through; }
}
.text-link-3 {
	&:hover { text-decoration: overline; }
}
.text-link-4 {
	&:hover { text-decoration: underline overline; }
}
.text-link-5, 
.text-link-6 {
	position: relative;
	&:before {
		content: '';
		position: absolute;
		bottom: -2px;
		background: $color-black-09;
		width: 0;
		height: 1px;
		@include transition(all 0.24s cubic-bezier(0.165, 0.84, 0.44, 1));
	}
	&:hover {
		&:before {
			width: 100%;
		}
	}
}
.text-link-5 {
	&:before { left: 0; }
}
.text-link-6 {
	&:before { right: 0; }
}
.text-link-7 {
	position: relative;
	&:before {
		content: '';
		position: absolute;
		bottom: -2px;
		left: 0;
		@include transform(translateY(3px));
		opacity: 0;
		background: $color-black-09;
		width: 100%;
		height: 1px;
		@include transition(linear 0.1s);
	}
	&:hover {
		&:before {
			@include transform(translateY(0));
			opacity: 1;
		}
	}
}
.text-link-8, 
.text-link-9 {
	position: relative;
	&:before, &:after {
		content: '';
		position: absolute;
		bottom: -2px;
		height: 1px;
		@include transition(all 0.24s cubic-bezier(0.165, 0.84, 0.44, 1));
	}
	&:before {
		left: 0;
		background: $color-black-02;
		width: 100%;
	}
	&:after {
		background: $color-black-09;
		width: 0;
	}
	&:hover {
		&:after {
			width: 100%;
		}
	}
}
.text-link-8 {
	&:after { left: 0; }
}
.text-link-9 {
	&:after { right: 0; }
}
.text-link-10 {
	position: relative;
	&:before, &:after {
		content: '';
		position: absolute;
		bottom: -2px;
		left: 0;
		width: 100%;
		height: 1px;
		@include transition(linear 0.1s);
	}
	&:before {
		background: $color-black-02;
	}
	&:after {
		opacity: 0;
		@include transform(translateY(3px));
		background: $color-black-09;
	}
	&:hover {
		&:before {
			opacity: 0;
		}
		&:after {
			@include transform(translateY(0));
			opacity: 1;
		}
	}
}
.text-link-11 {
	position: relative;
	&:before {
		content: '';
		position: absolute;
		bottom: 4px;
		left: 0;
		background: $color-black-02;
		width: 0;
		height: 6px;
		@include transition(all 0.24s cubic-bezier(0.165, 0.84, 0.44, 1));
	}
	&:hover {
		&:before {
			width: 100%;
		}
	}
}

div[class^='bg-black'], div[class*=' bg-black'], div[class^='bg-dark'], div[class*=' bg-dark'] {
	*[class^='text-link-'], *[class*=' text-link-'] {
		color: $color-white;
		&:hover, &:focus {
			color: $color-white;
		}
	}
	.text-link-5, .text-link-6, .text-link-7 {
		&:before { background: $color-white; }
	}
	.text-link-8, .text-link-9, .text-link-10 {
		&:before { background: $color-white-03; }
		&:after { background: $color-white; }
	}
	.text-link-11 {
		&:before { background: $color-white-03; }
	}
}