@use "sass:math";
@use "sass:color";

@mixin create-color($name, $hex) {
    --#{$name}: #{$hex};
    --#{$name}-lighten: #{color.adjust($hex, $lightness: 5%)};
    --#{$name}-darken: #{color.adjust($hex, $lightness: -10%)};
}    

@mixin devices($breakpoint) {
	@if $breakpoint == desktop {
		@media only screen and (min-width: 1200px) {
			@content;
		}
	}
}

@mixin icon($name, $filter) {
	.icon--#{$name} {
		background-image: url("/dist/icons/#{$name}.svg");
        filter: #{$filter};
	}
}