.bio-link {
	cursor: pointer;
}

.bio-link {
	font-weight: 400;
	outline: none;
	text-decoration: none;
	color: $color-primary;
	transition: all 0.2s ease-in-out;

	&:before, &:after {
		pointer-events: none;
		backface-visibility: hidden;
	}

	&:hover, &:focus, &.-active {
		color: darken($color-primary, 8%);
	}

	&.-fancy {
		border-bottom-color: $color-primary;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		&:hover, &:focus, &.-active {
			border-bottom-color: transparentize($color-primary, .9);
			background-color: transparentize($color-primary, .9);
		}
	}

	@each $key, $value in $components-colors {
		&.-#{$key} {
			color: $value;
			&:hover, &:focus, &.-active {
				color: darken($value, 8%);
			}
			&.-fancy {
				border-bottom-color: $value;
				&:hover, &:focus, &.-active {
					border-bottom-color: transparentize($value, .9);
					background-color: transparentize($value, .9);
				}
			}
		}
	};
}