$components-colors: (
	'primary': $color-primary,
	'positive': $color-positive,
	'negative': $color-negative,
	'warning' : $color-warning,
	'info'    : $color-info,
);

.#{$component-prefix}link {
	font-weight: 400;
	text-decoration: none;

	color: $color-gray-800;

	cursor: pointer;
	outline: none;
	transition: all $timing-fastest ease-in-out;

	svg, path {
		transition: fill $timing-fastest ease-in-out;
		fill: $color-gray-800;
	}

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

	&:hover, &:focus, &.-active {
		color: $color-primary;

		svg, path {
			fill: $color-primary;
		}
	}

	@each $key, $value in $components-colors {
		&.-#{$key} {
			color: $value;

			svg, path {
				fill: $value;
			}

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

				svg, path {
					fill:darken($value, 8%);
				}
			}
		}
	};
}