////
/// @group icons
////

/// This logo is used in the header across all viewports
///
/// @type File
$logo-image-url: url('../images/logo/logo_mop.svg') no-repeat;

/// This logo is used in the loyalty section
///
/// @type File
$logo-formembers-image-url: url('../images/logo/logo_mop_for_members_loyalty.svg') no-repeat;

/// This logo is used in the account section
///
/// @type File
$person-image-url: url('../images/icons/person.svg') no-repeat;

/// This logo is used in the account section
///
/// @type File
$address-image-url: url('../images/icons/address.svg') no-repeat;

/// This logo is used in the storelocator and account section
///
/// @type File
$pin-image-url: url('../images/icons/pin.svg') no-repeat;

/// This logo is used in the storelocator and account section
///
/// @type File
$pin-filled-image-url: url('../images/icons/pin-filled.svg') no-repeat;

/// This logo is used in the storelocator Input field for geo location
///
/// @type File
$target-image-url: url('../images/icons/storefinder.svg') no-repeat;

/// This logo is used in the storelocator and account section
///
/// @type File
$star-image-url: url('../images/icons/star.svg') no-repeat;

/// This logo is used in the storelocator and account section
///
/// @type File
$star-filled-image-url: url('../images/icons/star-filled.svg') no-repeat;

/// This logo is used in the sticky header and in the navigation menu up to and including viewport M (768px - see $breakpoint-map and $viewport-map in _metrics.scss)
///
/// @type File
$logo-signet-image-url: url('../images/logo/logo_mop_signet.svg') no-repeat;

/// This logo is used for products of the MOP Denim category
///
/// @type File
$logo-denim-image-url: url('../images/logo/logo_mop_denim_round.svg') no-repeat;

/// This logo is used for products of the MOP White Label category
///
/// @type File
$logo-whitelabel-image-url: url('../images/logo/logo_mop_whitelabel.svg') no-repeat;

/// This icon is used in select tables and accordions
///
/// @type File
$arrow-select-image-url: url('../images/icons/arrow_select.svg') no-repeat;

/// This icon is used in buttons
///
/// @type File
$arrow-short-image-url: url('../images/icons/arrow_short.svg') no-repeat;

/// This icon is used in inputfields
///
/// @type File
$arrow-success-image-url: url('../images/icons/arrow_success.svg') no-repeat;

/// This icon is used for global success notifications
///
/// @type File
$arrow-success-green-image-url: url('../images/icons/arrow_success_green.svg') no-repeat;

/// This icon is used in disabled checkboxes
///
/// @type File
$arrow-success-grey-image-url: url('../images/icons/arrow_success_grey.svg') no-repeat;

/// This icon is used to display the cart in the header
///
/// @type File
$bag-image-url: url('../images/icons/bag.svg') no-repeat;

/// This icon is used for the burger menu button
///
/// @type File
$burger-image-url: url('../images/icons/burger.svg') no-repeat;

/// This icon is used to display the wishlist in the header and in the account section
///
/// @type File
$heart-image-url: url('../images/icons/heart.svg') no-repeat;

/// This icon is used to display status of product in the wishlist
///
/// @type File
$heart-filled-image-url: url('../images/icons/heart-filled.svg') no-repeat;

/// This icon is used as a button to display the search input field and start the search
///
/// @type File
$search-image-url: url('../images/icons/search.svg') no-repeat;

/// This icon is used as a close button in the header mobile toggle-layer
///
/// @type File
$x-burger-image-url: url('../images/icons/x_big.svg') no-repeat;

/// This icon is used as a close button in the header and in layers, e. g. the cart layer
///
/// @type File
$x-big-image-url: url('../images/icons/x_big.svg') no-repeat;

/// This icon is used for e.g. global warning notification
///
/// @type File
$x-small-red-image-url: url('../images/icons/x_small_red.svg') no-repeat;

// The following three icons represent the different delivery methods
//
/// @type File
$dhl-express-image-url: url('../images/icons/delivery/delivery_dhl_express.svg') no-repeat;

/// @type File
$dhl-image-url: url('../images/icons/delivery/delivery_dhl.svg') no-repeat;

/// @type File
$hermes-image-url: url('../images/icons/delivery/delivery_hermes.svg') no-repeat;

/// @type File
$ups-image-url: url('../images/icons/delivery/delivery_ups.svg') no-repeat;

/// @type File
$post-swiss-image-url: url('../images/icons/delivery/delivery_swiss-post.svg') no-repeat;

/// @type File
$post-nl-image-url: url('../images/icons/delivery/delivery_postnl.svg') no-repeat;

/// @type File
$post-at-image-url: url('../images/icons/delivery/delivery_postat.svg') no-repeat;

/// @type File
$gls-image-url: url('../images/icons/delivery/delivery_gls.svg') no-repeat;

// The following icons represent the different payment methods
//
/// @type File
$amex-image-url: url('../images/icons/payment/payment_amex.svg') no-repeat;

/// @type File
$carte-bleue-image-url: url('../images/icons/payment/payment_carte-bleue.svg') no-repeat;

/// @type File
$ideal-image-url: url('../images/icons/payment/payment_ideal.svg') no-repeat;

/// @type File
$mastercard-image-url: url('../images/icons/payment/payment_mastercard.svg') no-repeat;

/// @type File
$paypal-image-url: url('../images/icons/payment/payment_paypal.svg') no-repeat;

/// @type File
$visa-image-url: url('../images/icons/payment/payment_visa.svg') no-repeat;

// The following six icons represent the different social media icons
//
/// @type File
$facebook-image-url: url('../images/icons/social_media/socialmedia_fb.svg') no-repeat;

/// @type File
$instagram-image-url: url('../images/icons/social_media/socialmedia_instagram.svg') no-repeat;

/// @type File
$pinterest-image-url: url('../images/icons/social_media/socialmedia_pinterest.svg') no-repeat;

/// @type File
$tumblr-image-url: url('../images/icons/social_media/socialmedia_tumblr.svg') no-repeat;

/// @type File
$twitter-image-url: url('../images/icons/social_media/socialmedia_twitter.svg') no-repeat;

/// @type File
$youtube-image-url: url('../images/icons/social_media/socialmedia_youtube.svg') no-repeat;

// The following icons represent the different country flags
//
/// @type File
$at-flag-image-url: url('../images/icons/flags/AT.svg') no-repeat;

/// @type File
$be-flag-image-url: url('../images/icons/flags/BE.svg') no-repeat;

/// @type File
$bg-flag-image-url: url('../images/icons/flags/BG.svg') no-repeat;

/// @type File
$ch-flag-image-url: url('../images/icons/flags/CH.svg') no-repeat;

/// @type File
$cz-flag-image-url: url('../images/icons/flags/CZ.svg') no-repeat;

/// @type File
$de-flag-image-url: url('../images/icons/flags/DE.svg') no-repeat;

/// @type File
$ee-flag-image-url: url('../images/icons/flags/EE.svg') no-repeat;

/// @type File
$es-flag-image-url: url('../images/icons/flags/ES.svg') no-repeat;

/// @type File
$fi-flag-image-url: url('../images/icons/flags/FI.svg') no-repeat;

/// @type File
$fr-flag-image-url: url('../images/icons/flags/FR.svg') no-repeat;

/// @type File
$gb-flag-image-url: url('../images/icons/flags/GB.svg') no-repeat;

/// @type File
$ie-flag-image-url: url('../images/icons/flags/IE.svg') no-repeat;

/// @type File
$it-flag-image-url: url('../images/icons/flags/IT.svg') no-repeat;

/// @type File
$lu-flag-image-url: url('../images/icons/flags/LU.svg') no-repeat;

/// @type File
$lt-flag-image-url: url('../images/icons/flags/LT.svg') no-repeat;

/// @type File
$lv-flag-image-url: url('../images/icons/flags/LV.svg') no-repeat;

/// @type File
$nl-flag-image-url: url('../images/icons/flags/NL.svg') no-repeat;

/// @type File
$pl-flag-image-url: url('../images/icons/flags/PL.svg') no-repeat;

/// @type File
$se-flag-image-url: url('../images/icons/flags/SE.svg') no-repeat;

/// @type File
$si-flag-image-url: url('../images/icons/flags/SI.svg') no-repeat;

/// @type File
$sk-flag-image-url: url('../images/icons/flags/SK.svg') no-repeat;

// Following icons represent care instructions
//
/// @type File
$care-1a-image-url: url('../images/icons/care_instructions/1a.svg') no-repeat;

/// @type File
$care-1b-image-url: url('../images/icons/care_instructions/1b.svg') no-repeat;

/// @type File
$care-10-image-url: url('../images/icons/care_instructions/10.svg') no-repeat;

/// @type File
$care-11-image-url: url('../images/icons/care_instructions/11.svg') no-repeat;

/// @type File
$care-12-image-url: url('../images/icons/care_instructions/12.svg') no-repeat;

/// @type File
$care-13-image-url: url('../images/icons/care_instructions/13.svg') no-repeat;

/// @type File
$care-14-image-url: url('../images/icons/care_instructions/14.svg') no-repeat;

/// @type File
$care-16-image-url: url('../images/icons/care_instructions/16.svg') no-repeat;

/// @type File
$care-17-image-url: url('../images/icons/care_instructions/17.svg') no-repeat;

/// @type File
$care-18-image-url: url('../images/icons/care_instructions/18.svg') no-repeat;

/// @type File
$care-19-image-url: url('../images/icons/care_instructions/19.svg') no-repeat;

/// @type File
$care-20-image-url: url('../images/icons/care_instructions/20.svg') no-repeat;

/// @type File
$care-21-image-url: url('../images/icons/care_instructions/21.svg') no-repeat;

/// @type File
$care-22-image-url: url('../images/icons/care_instructions/22.svg') no-repeat;

/// @type File
$care-30-image-url: url('../images/icons/care_instructions/30.svg') no-repeat;

/// @type File
$care-31-image-url: url('../images/icons/care_instructions/31.svg') no-repeat;

/// @type File
$care-32-image-url: url('../images/icons/care_instructions/32.svg') no-repeat;

/// @type File
$care-40-image-url: url('../images/icons/care_instructions/40.svg') no-repeat;

/// @type File
$care-41-image-url: url('../images/icons/care_instructions/41.svg') no-repeat;

/// @type File
$care-42-image-url: url('../images/icons/care_instructions/42.svg') no-repeat;

/// @type File
$care-43-image-url: url('../images/icons/care_instructions/43.svg') no-repeat;

/// @type File
$care-50-image-url: url('../images/icons/care_instructions/50.svg') no-repeat;

/// @type File
$care-53-image-url: url('../images/icons/care_instructions/53.svg') no-repeat;

/// @type File
$care-54-image-url: url('../images/icons/care_instructions/54.svg') no-repeat;

/// @type File
$care-55-image-url: url('../images/icons/care_instructions/55.svg') no-repeat;

/// @type File
$care-56-image-url: url('../images/icons/care_instructions/56.svg') no-repeat;

/// @type File
$care-57-image-url: url('../images/icons/care_instructions/57.svg') no-repeat;

/// @type File
$care-58-image-url: url('../images/icons/care_instructions/58.svg') no-repeat;

/// @type File
$care-washing-machine-image-url: url('../images/icons/care_instructions/washing_machine.svg') no-repeat;

/// @type File
$email-image-url: url('../images/icons/email.svg') no-repeat;

/// @type File
$chain-image-url: url('../images/icons/chain.svg') no-repeat;

/// @type File
$zoom-in-image-url: url('../images/icons/zoom-in.svg');

/// @type File
$zoom-out-image-url: url('../images/icons/zoom-out.svg');

/// @type File
$select-arrow-down-url: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMzODNlNDQiIHZpZXdCb3g9IjAgMCAxMSA2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMSA2Ij48cGF0aCBkPSJNNS4yNjEgNS43MTJsLTQuOTY4LTUuMDMzLjcxMS0uNzAzIDQuMjU2IDQuMzEyIDQuMjU2LTQuMzEyLjcxMi43MDN6IiBpZD0iU2hhcGUiLz48L3N2Zz4='); // sass-lint:disable-line max-line-length

/// @type File
$select-arrow-down-disabled-url: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM5OTk5OTkiIHZpZXdCb3g9IjAgMCAxMSA2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMSA2Ij48cGF0aCBkPSJNNS4yNjEgNS43MTJsLTQuOTY4LTUuMDMzLjcxMS0uNzAzIDQuMjU2IDQuMzEyIDQuMjU2LTQuMzEyLjcxMi43MDN6IiBpZD0iU2hhcGUiLz48L3N2Zz4='); // sass-lint:disable-line max-line-length

// sass-lint:disable max-line-length
/// @type File
$arrow-next-url: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMSAxMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTEgMTAiPjxwYXRoIGQ9Ik0xMC43MTIgNC45ODlsLTUuMDMzLTQuOTY4LS43MDMuNzExIDMuODE2IDMuNzY3aC04LjYxNXYxaDguNTkzbC0zLjc5NSAzLjc0NS43MDMuNzEyeiIvPjwvc3ZnPg==');

/// @type File
$arrow-next-white-url: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJFYmVuZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTEgMTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDExIDEwOyI+Cgk8cG9seWdvbiBmaWxsPSIjZmZmIiBwb2ludHM9IjEwLjcxMTkxLDQuOTg5MjYgNS42Nzg3MSwwLjAyMTQ4IDQuOTc2MDcsMC43MzI5MSA4Ljc5MjQyLDQuNSAwLjE3NzczLDQuNSAwLjE3NzczLDUuNSA4Ljc3MDYzLDUuNQoJNC45NzYwNyw5LjI0NTEyIDUuNjc4NzEsOS45NTcwMyAiLz4KPC9zdmc+Cg==');
// sass-lint:enable max-line-length

/// @type File
$video-play-image-url: url('../images/icons/video/play.svg');

/// @type File
$video-pause-image-url: url('../images/icons/video/pause.svg');

/// This map is used to define the styling of each icon, which includes width, height and background.
/// The keys and values are rendered 1:1 to css rules and values.
///
/// @type Map
///
/// @property {Map} arrow-long - The styling for the arrow-long icon
/// @property {Map} arrow-select - The styling for the arrow-select icon
/// @property {Map} arrow-short - The styling for the arrow-short icon
/// @property {Map} arrow-success - The styling for the arrow-success icon
/// @property {Map} arrow-success-grey - The styling for the arrow-success with grey color icon
/// @property {Map} arrow-success-green - The styling for the arrow-success with green color icon
/// @property {Map} bag - The styling for the bag icon
/// @property {Map} burger - The styling for the burger icon
/// @property {Map} heart - The styling for the heart icon
/// @property {Map} heart-filled - The styling for the heart-filled icon
/// @property {Map} search - The styling for the search icon
/// @property {Map} x-burger - The styling for the x-burger icon
/// @property {Map} x-big - The styling for the x-big icon
/// @property {Map} x-small - The styling for the x-small icon
/// @property {Map} dhl-express - The styling for the dhl-express icon
/// @property {Map} dhl - The styling for the dhl icon
/// @property {Map} hermes - The styling for the hermes icon
/// @property {Map} ups - The styling for the ups icon
/// @property {Map} post-swiss - The styling for the post-swiss icon
/// @property {Map} post-nl - The styling for the post-nl icon
/// @property {Map} post-at - The styling for the post-at icon
/// @property {Map} gls - The styling for the gls icon
/// @property {Map} amex - The styling for the amex icon
/// @property {Map} carte-bleue - The styling for the carte-bleue icon
/// @property {Map} ideal - The styling for the ideal icon
/// @property {Map} mastercard - The styling for the mastercard icon
/// @property {Map} paypal - The styling for the paypal icon
/// @property {Map} visa - The styling for the visa icon
/// @property {Map} facebook - The styling for the facebook icon
/// @property {Map} instagram - The styling for the instagram icon
/// @property {Map} pinterest - The styling for the pinterest icon
/// @property {Map} tumblr - The styling for the tumblr icon
/// @property {Map} twitter - The styling for the twitter icon
/// @property {Map} youtube - The styling for the youtube icon
/// @property {Map} at-flag - The styling for the at-flag icon
/// @property {Map} be-flag - The styling for the be-flag icon
/// @property {Map} bg-flag - The styling for the bg-flag icon
/// @property {Map} ch-flag - The styling for the ch-flag icon
/// @property {Map} cz-flag - The styling for the cz-flag icon
/// @property {Map} de-flag - The styling for the de-flag icon
/// @property {Map} ee-flag - The styling for the ee-flag icon
/// @property {Map} es-flag - The styling for the es-flag icon
/// @property {Map} fi-flag - The styling for the fi-flag icon
/// @property {Map} fr-flag - The styling for the fr-flag icon
/// @property {Map} gb-flag - The styling for the gb-flag icon
/// @property {Map} ie-flag - The styling for the ie-flag icon
/// @property {Map} it-flag - The styling for the it-flag icon
/// @property {Map} lu-flag - The styling for the lu-flag icon
/// @property {Map} lt-flag - The styling for the lt-flag icon
/// @property {Map} lv-flag - The styling for the lv-flag icon
/// @property {Map} nl-flag - The styling for the nl-flag icon
/// @property {Map} pl-flag - The styling for the pl-flag icon
/// @property {Map} se-flag - The styling for the se-flag icon
/// @property {Map} si-flag - The styling for the si-flag icon
/// @property {Map} sk-flag - The styling for the sk-flag icon
/// @property {Map} care-1a - The styling for the care instruction icon
/// @property {Map} care-1b - The styling for the care instruction icon
/// @property {Map} care-10 - The styling for the care instruction icon
/// @property {Map} care-11 - The styling for the care instruction icon
/// @property {Map} care-12 - The styling for the care instruction icon
/// @property {Map} care-13 - The styling for the care instruction icon
/// @property {Map} care-14 - The styling for the care instruction icon
/// @property {Map} care-16 - The styling for the care instruction icon
/// @property {Map} care-17 - The styling for the care instruction icon
/// @property {Map} care-18 - The styling for the care instruction icon
/// @property {Map} care-19 - The styling for the care instruction icon
/// @property {Map} care-20 - The styling for the care instruction icon
/// @property {Map} care-21 - The styling for the care instruction icon
/// @property {Map} care-22 - The styling for the care instruction icon
/// @property {Map} care-30 - The styling for the care instruction icon
/// @property {Map} care-31 - The styling for the care instruction icon
/// @property {Map} care-32 - The styling for the care instruction icon
/// @property {Map} care-40 - The styling for the care instruction icon
/// @property {Map} care-41 - The styling for the care instruction icon
/// @property {Map} care-42 - The styling for the care instruction icon
/// @property {Map} care-43 - The styling for the care instruction icon
/// @property {Map} care-50 - The styling for the care instruction icon
/// @property {Map} care-53 - The styling for the care instruction icon
/// @property {Map} care-54 - The styling for the care instruction icon
/// @property {Map} care-55 - The styling for the care instruction icon
/// @property {Map} care-56 - The styling for the care instruction icon
/// @property {Map} care-57 - The styling for the care instruction icon
/// @property {Map} care-58 - The styling for the care instruction icon
/// @property {Map} care-washing_machine - The styling for the care instruction icon
/// @property {Map} person-image-url - The style for the account person icon
/// @property {Map} address-image-url - The style for the account address icon
/// @property {Map} pin-image-url - The style for the account pin icon
/// @property {Map} pin-filled-image-url - The style for the account pin icon
/// @property {Map} star - The style for the account pin icon
/// @property {Map} star-filled-image-url - The style for the account pin icon
/// @property {Map} logo-formembers-image-url - The style for the account members logo icon
/// @property {Map} email - The styling for the email icon
/// @property {Map} chain - The styling for the chain icon
/// @property {Map} zoom in - The image zoom in icon
/// @property {Map} zoom out - The image zoom out icon
/// @property {Map} brand-logo-denim - The denim logo
/// @property {Map} brand-logo-whitelabel - The white label logo
/// @property {Map} notification-note - Notification type note
/// @property {Map} notification-note-small - Notification type note-small
/// @property {Map} notification-alert - Notification type alert
/// @property {Map} notification-success - Notification type success
/// @property {Map} target - Geo location target icon
/// @property {Map} loading-asset - Image and video loading spinner
/// @property {Map} video-play - Video play button
/// @property {Map} video-pause - Video pause button
$icons-map: (
	arrow-long: (
		display: inline-flex,
		position: relative,
		align-items: center,
		justify-content: flex-end,
		color: inherit,
		after: (
			display: block,
			content: '""',
			width: 38px,
			height: 1px,
			background-color: currentColor
		),
		before: (
			display: block,
			position: absolute,
			top: 0,
			right: 0,
			bottom: 0,
			width: 7px,
			height: 7px,
			margin: auto,
			padding: 0,
			//property for percentage steps transformation
			transform-origin: 50% 50%,
			transform: rotate(45deg),
			border-top: solid 1px currentColor,
			border-right: solid 1px currentColor,
			content: '""'
		)
	),
	arrow-select: (
		display: 'inline-block',
		width: 8px,
		height: 8px,
		//border-right: '1px solid #{$icon-outline}',
		//border-bottom: '1px solid #{$icon-outline}',
		transform: 'translateY(-4px) rotateZ(45deg)',
		content: '""'
		),
	arrow-short: (
		background: $arrow-short-image-url,
		width: 11px,
		height: 10px
	),
	arrow-success: (
		background: $arrow-success-image-url,
		width: 13px,
		height: 9px
	),
	arrow-success-grey: (
		background: $arrow-success-grey-image-url,
		width: 13px,
		height: 9px
	),
	arrow-success-green: (
		background: $arrow-success-green-image-url,
		width: 13px,
		height: 9px
	),
	bag: (
		background: $bag-image-url,
		width: 14px,
		height: 19px
	),
	burger: (
		background: $burger-image-url,
		width: 14px,
		height: 19px,
		after: (
			position: absolute,
			content: '""',
			width: 25px,
			height: 25px
		)
	),
	heart: (
		background: $heart-image-url,
		width: 17px,
		height: 19px
	),
	heart-filled: (
		background: $heart-filled-image-url,
		width: 17px,
		height: 19px
	),
	search: (
		background: $search-image-url,
		width: 14px,
		height: 19px
	),
	x-burger: (
		background: $x-burger-image-url,
		width: 13px,
		height: 19px,
		after: (
			position: absolute,
			content: '""',
			width: 25px,
			height: 25px
		)
	),
	x-big: (
		background: $x-big-image-url,
		width: 14px,
		height: 19px
	),
	x-small: (
		after: (
			display: inline-block,
			transform: rotate(45deg) scale(1.5),
			content: '"+"',
		)
	),
	minus: (
		width: 10px,
		height: 1px,
		//background-color: $brand,
		//color: $brand
	),
	plus: (
		width: 10px,
		//color: $brand,
		before: (
			position: 'absolute',
			width: 10px,
			height: 1px,
			//background-color: $brand,
			content: '""'
		),
		after: (
			position: 'absolute',
			width: 10px,
			height: 1px,
			transform: 'rotate(90deg)',
			//background-color: $brand,
			content: '""'
		)
	),
	dhl-express: (
		background: $dhl-express-image-url,
		background-size: 35px 30px,
		width: 35px,
		height: 30px
	),
	dhl: (
		background: $dhl-image-url,
		background-size: 31px 30px,
		width: 31px,
		height: 30px
	),
	hermes: (
		background: $hermes-image-url,
		background-size: 46px 30px,
		width: 46px,
		height: 30px
	),
	ups: (
		background: $ups-image-url,
		background-size: 20px 30px,
		width: 20px,
		height: 30px
	),
	post-swiss: (
		background: $post-swiss-image-url,
		background-size: 70px 30px,
		width: 70px,
		height: 30px
	),
	post-nl: (
		background: $post-nl-image-url,
		background-size: 24px 30px,
		width: 24px,
		height: 30px
	),
	post-at: (
		background: $post-at-image-url,
		background-size: 70px 30px,
		width: 70px,
		height: 30px
	),
	gls: (
		background: $gls-image-url,
		background-size: 41px 30px,
		width: 41px,
		height: 30px
	),
	amex: (
		background: $amex-image-url,
		width: 33px,
		height: 30px
	),
	carte-bleue: (
		background: $carte-bleue-image-url,
		width: 33px,
		height: 30px
	),
	ideal: (
		background: $ideal-image-url,
		width: 33px,
		height: 30px
	),
	mastercard: (
		background: $mastercard-image-url,
		width: 22px,
		height: 30px
	),
	paypal: (
		background: $paypal-image-url,
		width: 32px,
		height: 30px
	),
	visa: (
		background: $visa-image-url,
		width: 28px,
		height: 30px
	),
	facebook: (
		background: $facebook-image-url,
		width: 36px,
		height: 36px
	),
	instagram: (
		background: $instagram-image-url,
		width: 36px,
		height: 36px
	),
	pinterest: (
		background: $pinterest-image-url,
		width: 36px,
		height: 36px
	),
	tooltip-info: (
		//color: $brand,
		position: relative,
		width: 15px,
		height: 15px,
		border: solid 1px currentColor,
		border-radius: 100%,
		after: (
			position: absolute,
			top: 5px,
			left: 6px,
			width: 2px,
			height: 6px,
			background-color: currentColor,
			content: '""'
		),
		before: (
			position: absolute,
			top: 2px,
			left: 6px,
			width: 2px,
			height: 2px,
			border-radius: 100%,
			background-color: currentColor,
			content: '""'
		)
	),
	tumblr: (
		background: $tumblr-image-url,
		width: 36px,
		height: 36px
	),
	twitter: (
		background: $twitter-image-url,
		width: 36px,
		height: 36px
	),
	youtube: (
		background: $youtube-image-url,
		width: 36px,
		height: 36px
	),
	at-flag: (
		background: $at-flag-image-url,
		width: 13px,
		height: 10px
	),
	be-flag: (
		background: $be-flag-image-url,
		width: 13px,
		height: 10px
	),
	bg-flag: (
		background: $bg-flag-image-url,
		width: 13px,
		height: 10px
	),
	ch-flag: (
		background: $ch-flag-image-url,
		width: 13px,
		height: 10px
	),
	cz-flag: (
		background: $cz-flag-image-url,
		width: 13px,
		height: 10px
	),
	de-flag: (
		background: $de-flag-image-url,
		width: 13px,
		height: 10px
	),
	ee-flag: (
		background: $ee-flag-image-url,
		width: 13px,
		height: 10px
	),
	es-flag: (
		background: $es-flag-image-url,
		width: 13px,
		height: 10px
	),
	fi-flag: (
		background: $fi-flag-image-url,
		width: 13px,
		height: 10px
	),
	fr-flag: (
		background: $fr-flag-image-url,
		width: 13px,
		height: 10px
	),
	gb-flag: (
		background: $gb-flag-image-url,
		width: 13px,
		height: 10px
	),
	ie-flag: (
		background: $ie-flag-image-url,
		width: 13px,
		height: 10px
	),
	it-flag: (
		background: $it-flag-image-url,
		width: 13px,
		height: 10px
	),
	lu-flag: (
		background: $lu-flag-image-url,
		width: 13px,
		height: 10px
	),
	lt-flag: (
		background: $lt-flag-image-url,
		width: 13px,
		height: 10px
	),
	lv-flag: (
		background: $lv-flag-image-url,
		width: 13px,
		height: 10px
	),
	nl-flag: (
		background: $nl-flag-image-url,
		width: 13px,
		height: 10px
	),
	pl-flag: (
		background: $pl-flag-image-url,
		width: 13px,
		height: 10px
	),
	se-flag: (
		background: $se-flag-image-url,
		width: 13px,
		height: 10px
	),
	si-flag: (
		background: $si-flag-image-url,
		width: 13px,
		height: 10px
	),
	sk-flag: (
		background: $sk-flag-image-url,
		width: 13px,
		height: 10px
	),
	logo-signet: (
		background: $logo-signet-image-url,
		width: 36px,
		height: 36px
	),
	care-1a: (
		background: $care-1a-image-url,
		width: 25px,
		height: 27px
	),
	care-1b: (
		background: $care-1b-image-url,
		width: 25px,
		height: 27px
	),
	care-10: (
		background: $care-10-image-url,
		width: 25px,
		height: 27px
	),
	care-11: (
		background: $care-11-image-url,
		width: 25px,
		height: 27px
	),
	care-12: (
		background: $care-12-image-url,
		width: 25px,
		height: 27px
	),
	care-13: (
		background: $care-13-image-url,
		width: 25px,
		height: 27px
	),
	care-14: (
		background: $care-14-image-url,
		width: 25px,
		height: 27px
	),
	care-16: (
		background: $care-16-image-url,
		width: 25px,
		height: 27px
	),
	care-17: (
		background: $care-17-image-url,
		width: 25px,
		height: 27px
	),
	care-18: (
		background: $care-18-image-url,
		width: 25px,
		height: 27px
	),
	care-19: (
		background: $care-19-image-url,
		width: 25px,
		height: 27px
	),
	care-20: (
		background: $care-20-image-url,
		width: 25px,
		height: 27px
	),
	care-21: (
		background: $care-21-image-url,
		width: 25px,
		height: 27px
	),
	care-22: (
		background: $care-22-image-url,
		width: 25px,
		height: 27px
	),
	care-30: (
		background: $care-30-image-url,
		width: 25px,
		height: 27px
	),
	care-31: (
		background: $care-31-image-url,
		width: 25px,
		height: 27px
	),
	care-32: (
		background: $care-32-image-url,
		width: 25px,
		height: 27px
	),
	care-40: (
		background: $care-40-image-url,
		width: 25px,
		height: 27px
	),
	care-41: (
		background: $care-41-image-url,
		width: 25px,
		height: 27px
	),
	care-42: (
		background: $care-42-image-url,
		width: 25px,
		height: 27px
	),
	care-43: (
		background: $care-43-image-url,
		width: 25px,
		height: 27px
	),
	care-50: (
		background: $care-50-image-url,
		width: 25px,
		height: 27px
	),
	care-53: (
		background: $care-53-image-url,
		width: 25px,
		height: 27px
	),
	care-54: (
		background: $care-54-image-url,
		width: 25px,
		height: 27px
	),
	care-55: (
		background: $care-55-image-url,
		width: 25px,
		height: 27px
	),
	care-56: (
		background: $care-56-image-url,
		width: 25px,
		height: 27px
	),
	care-57: (
		background: $care-57-image-url,
		width: 25px,
		height: 27px
	),
	care-58: (
		background: $care-58-image-url,
		width: 25px,
		height: 27px
	),
	care-washing_machine: (
		background: $care-washing-machine-image-url,
		width: 25px,
		height: 27px
	),
	person-image-url: (
		background: url('../images/icons/person.svg') no-repeat,
		width: 25px,
		height: 20px
	),
	address-image-url: (
		background: $address-image-url,
		width: 25px,
		height: 20px
	),
	pin-image-url: (
		background: $pin-image-url,
		width: 25px,
		height: 20px
	),
	pin-filled: (
		background: $pin-filled-image-url,
		background-size: 17px,
		width: 17px,
		height: 19px
	),
	star: (
		background: $star-image-url,
		width: 17px,
		height: 19px
	),
	star-filled: (
		background: $star-filled-image-url,
		width: 17px,
		height: 19px
	),
	email: (
		background: $email-image-url,
		width: 16px,
		height: 18px
	),
	chain: (
		background: $chain-image-url,
		width: 16px,
		height: 18px
	),
	logo-formembers-image-url: (
		background: $logo-formembers-image-url,
		width: 87px,
		height: 87px
	),
	zoom-in: (
		background: $zoom-in-image-url,
		width: 35px,
		height: 35px
	),
	zoom-out: (
		background: $zoom-out-image-url,
		width: 35px,
		height: 35px
	),
	brand-logo-denim: (
		background: $logo-denim-image-url,
		width: 37px,
		height: 37px
	),
	brand-logo-whitelabel: (
		background: $logo-whitelabel-image-url,
		width: 50px,
		height: 23px
	),
	arrow-next: (
		background: $arrow-next-url,
		width: 11px,
		height: 10px,
	),
	arrow-next-white: (
		background: $arrow-next-white-url,
		width: 11px,
		height: 10px,
	)
	
);

/// The icon mixin returns the css rules defined in the map for each icon
///
/// @parameter {String} $icon-name - The name of the icon
///
/// @require $icons-map
///
/// @example
///		.abstract-symbol__icon--arrow-long {
///			@include icon-dimensions(arrow-long);
///		}
@mixin icon($icon-name) {
	$icons-definition: map-get($icons-map, $icon-name);

	@each $css-rule, $value in $icons-definition {
		@if $css-rule == before or $css-rule == after {
			&::#{$css-rule} {
				@each $sub-rule, $sub-value in $value {
					#{$sub-rule}: #{$sub-value};
				}
			}
		} @else {
			#{$css-rule}: #{$value};
		}
	}
}

