////
/// @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');
/// @type File
$contacts-address-image-url: url('../images/icons/pin.svg');
/// @type File
$contacts-time-image-url: url('../images/icons/clocks.svg');
/// @type File
$contacts-phone-image-url: url('../images/icons/phone_small.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,
),
contacts-address: ( background: $contacts-address-image-url,
width: 24px,
height: 30px,
));
/// 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};
        }
    }
}