@mixin breakpoint($class) {
	@if $class == xs {
		@media (max-width: 767px) {
			@content;
		}
	} @else if $class == sm {
		@media (min-width: 768px) {
			@content;
		}
	} @else if $class == md {
		@media (min-width: 992px) {
			@content;
		}
	} @else if $class == lg {
		@media (min-width: 1200px) {
			@content;
		}
	} @else if $class == xl {
		@media (min-width: 1400px) {
			@content;
		}
	} @else {
		@warn 'Breakpoint mixin supports: xs, sm, md, lg, xl';
	}
}

@mixin typography($family, $size, $lineHeight, $color) {
	color: $color;
	font-family: $family, sans-serif;
	font-size: $size;
	line-height: $lineHeight;
	margin: 0;
}

@mixin hover($color) {
	&:hover {
		color: $color;
		fill: $color;
	}
}

@mixin stroke-hover($color) {
	&:hover {
		stroke: $color;
	}
}