$logos-folder: '../images/modstyle-logos' !default;
$logos: 'logo--dark-bw' 'logo--white-color' 'logo--white-bw' 'logo-pros--white-color';

@mixin logos {
	@each $logo in $logos {
		.#{$logo} {
			background-image: url('#{$logos-folder}/#{$logo}.svg');
		}
	}
}

.logo,
.logo-pros {
	background-repeat: no-repeat;
	background-size: contain;
	text-indent: -1000px;

	.inline {
		display: inline-block;
	}
}

.logo {
	background-image: url('#{$logos-folder}/logo--dark-color.svg');
	height: 35px;
	width: 152px;
}

.logo-pros {
	background-image: url('#{$logos-folder}/logo-pros--dark-color.svg');
	height: 50px;
	width: 172px;
}

@include logos();

@include breakpoint-phone {
	.logo-pros {
		height: 43px;
		width: 150px;
	}
}