@import '../../typography/variables';

/* --------
  M&S font icons
  -------- */
/* -------- Icons -------- */
@include create-icon('email', 'icon-email');
// Email icon
@include create-icon('pintrest', 'icon-pintrest');
// Pintrest
@include create-icon('mobile', 'icon-mobile');
// Mobile
@include create-icon('googleplus', 'icon-googleplus');
// Google Plus
@include create-icon('facebook', 'icon-facebook');
// Facebook
@include create-icon('instagram', 'icon-instagram');
// Instagram
@include create-icon('twitter', 'icon-twitter');
// Twitter
@include create-icon('youtube', 'icon-youtube');
// Youtube
@include create-icon('edit', 'icon-arrow-heavy');
// Arrow
@include create-icon('arrow-light', 'icon-arrow-light');
// Arrow thin
@include create-icon('tick', 'icon-tick');
// Tick
@include create-icon('tooltip-info', 'icon-information');
// Tick
@include create-icon('information', 'icon-information');
// Success / Confirmation icon
@include create-icon('confirmation', 'icon-confirmation');
@include create-icon('success', 'icon-success');
// Error icon
@include create-icon('error', 'icon-error');
// Tick icon
@include create-icon('close', 'icon-close');
// Close icon
@include create-icon('bag', 'icon-bag');
// Checkout - Bag
@include create-icon('gift', 'icon-gift');
// Checkout - Gift icon
@include create-icon('delivery-sdd', 'icon-truck');
// Checkout - Truck
@include create-icon('delivery-ndd', 'icon-truck');
// Checkout - Truck
@include create-icon('delivery-international', 'icon-truck');
// Checkout - Truck
@include create-icon('delivery-expressinternational', 'icon-truck');
// Checkout - Truck
@include create-icon('delivery-store', 'icon-store');
// Checkout - Store
@include create-icon('disposal', 'icon-service');
// Checkout - Removal / Disposal
@include create-icon('my-account', 'icon-my-account');
// bu toolbar : my account icon
@include create-icon('logo', 'icon-logo-est');
// logo
@include create-icon('fave', 'icon-fave');
// Header - Heart icon
@include create-icon('search', 'icon-search');
// Checkout - Bag
@include create-icon('search-plus', 'icon-search-plus');
// PDP - Sets
@include create-icon('menu', 'icon-menu');
// Checkout - Bag
@include create-icon('location', 'icon-location');
// Checkout - Bag
@include create-icon('checkout', 'icon-checkout');
// Checkout circle/arrow - Bag
@include create-icon('fave-plus', 'icon-fave-plus');
// Navigation on mobile - Saved items / Recently viewed
@include create-icon('sign-in', 'icon-sign-in');
// Navigation on mobile - Sign in / Sign out
@include create-icon('arrow-down', 'icon-arrow-down');
// Accordion/Menu - Expanded state icon
@include create-icon('arrow-right', 'icon-arrow-right');
// Accordion/Menu - Collapsed state icon / Calendar Next Month
@include create-icon('arrow-left', 'icon-arrow-left');
// Calendar Prev Month
@include create-icon('locator-pin', 'icon-locator-pin');
// Store locator - Map pin - current location - icon
@include create-icon('arrow-toggle', 'icon-arrow-heavy');
// Arrow toggle  - L2 navigation toggle - mobile devices
@include create-icon('toilet', 'icon-toilet');
// Store facility - toilet:yes
@include create-icon('no-toilet', 'icon-no-toilet');
// Store facility - toilet:no
@include create-icon('car-collect', 'icon-car-collect');
// Store facility - collect-by-car:yes
@include create-icon('no-car-collect', 'icon-no-car-collect');
// Store facility - collect-by-car:no
@include create-icon('park', 'icon-park');
// Store facility - parking:yes
@include create-icon('no-park', 'icon-no-park');
// Store facility - parking:no
@include create-icon('baby-chng', 'icon-baby-chng');
// Store facility - baby-changing:yes
@include create-icon('no-baby-chng', 'icon-no-baby-chng');
// Store facility - baby-changing:no
@include create-icon('print', 'icon-print');
// Order Confirmation - print - icon
@include create-icon('sparks', 'icon-sparks');
// Loyalty - sparks icon
@include create-icon('sparks-filled', 'icon-sparks-filled');
// Loyalty - sparks filled
@include create-icon('circle-arrow', 'icon-circle-arrow');
// Loyalty - circle arrow
@include create-icon('long-arrow', 'icon-long-arrow');
// Loyalty - long arrow
@include create-icon('gear', 'icon-gear');
// Loyalty - gear
@include create-icon('gear-filled', 'icon-gear-filled');
// Loyalty - gear filled
@include create-icon('lock', 'icon-lock');
// Loyalty - lock
@include create-icon('delivery-ed', 'icon-delivery-email');
//CFTO - colelction slot icon
@include create-icon('map-marker', 'icon-map-marker');
//CFTO - collection slot time icon
@include create-icon('clock-o', 'icon-clock-o');
// Loyalty - Sparks logo
@include create-icon('sparks-logo', 'icon-sparks-logo');
// Loyalty - Sparks logo
@include create-icon('sparks-events', 'icon-sparks-events');
// Loyalty - Sparks logo
@include create-icon('sparks-priority', 'icon-sparks-priority');
// Loyalty - Sparks logo
@include create-icon('sparks-offers', 'icon-sparks-offers');
// Store accessibility information
@include create-icon('disabled', 'icon-disabled');

// Checkout - SPC Reskins icons
@include create-icon('error-triangle', 'icon-error-triangle');
@include create-icon('store-logo', 'icon-store-logo');
@include create-icon('calendar-new', 'icon-calendar-new');
@include create-icon('mobile-phone', 'icon-mobile-phone');
@include create-icon('collect-plus', 'icon-collect-plus');
@include create-icon('cake', 'icon-cake');
@include create-icon('wine-subs', 'icon-wine-subs');
@include create-icon('add-card', 'icon-add-card');
@include create-icon('pin', 'icon-PIN');
@include create-icon('cvv', 'icon-cvv');
@include create-icon('cvv-amex', 'icon-cvv-amex');
@include create-icon('tick-off', 'icon-tick-Off');
@include create-icon('tick-on', 'icon-tick-on');
@include create-icon('tick-reverse', 'icon-tick-reverse');
@include create-icon('chat', 'icon-chat');
@include create-icon('comments', 'icon-comments');
@include create-icon('clock', 'icon-clock');
@include create-icon('quick-view', 'icon-quick-view');
@include create-icon('people', 'icon-people');
@include create-icon('alert-info', 'icon-alert-info');
@include create-icon('size', 'icon-size');
@include create-icon('returns', 'icon-returns');
@include create-icon('send', 'icon-send');
@include create-icon('confirm', 'icon-confirm');
@include create-icon('eco-leaf', 'icon-eco-leaf');
@include create-icon('geo-location', 'icon-geo-location');
@include create-icon('thumbs-down-active', 'icon-thumbs-down-active');
@include create-icon('store-location', 'icon-store-location');
@include create-icon('afterpay', 'icon-afterpay');
@include create-icon('paypal', 'icon-paypal');
@include create-icon('applepay', 'icon-applepay');
@include create-icon('card-default', 'icon-card-default');
@include create-icon('slot-delivery', 'icon-slot-delivery');
@include create-icon('logo-food', 'icon-logo-food');
@include create-icon('ifl', 'icon-ifl');
@include create-icon('arrow-up-down', 'icon-arrow-up-down');
@include create-icon('telephone', 'icon-telephone');
@include create-icon('effort', 'icon-effort');
@include create-icon('calories', 'icon-calories');
@include create-icon('thumbs-up', 'icon-thumbs-up');
@include create-icon('information-active', 'icon-information-active');
@include create-icon('account-active', 'icon-account-active');
@include create-icon('creation-logo', 'icon-creation-logo');
@include create-icon('card-logo', 'icon-card-logo');
@include create-icon('apple-pay-payment-mark', 'icon-apple-pay-payment-mark');
@include create-icon('visa', 'icon-visa');
@include create-icon('mastercard', 'icon-mastercard');
@include create-icon('amex', 'icon-amex');
@include create-icon('tag', 'icon-tag');
@include create-icon('heart', 'icon-heart');
@include create-icon('gift-box', 'icon-gift-box');
@include create-icon('hamburger-menu', 'icon-hamburger-menu');
@include create-icon('account-signout', 'icon-account-signout');
@include create-icon('key', 'icon-key');
@include create-icon('eye-open', 'icon-eye-open');
@include create-icon('eye-close', 'icon-eye-close');
@include create-icon('circle', 'icon-circle');
@include create-icon('reserve-slot', 'icon-reserve-slot');
@include create-icon('slot-confirm', 'icon-slot-confirm');
@include create-icon('basket-empty', 'icon-basket-empty');
@include create-icon('bag-empty', 'icon-bag-empty');
@include create-icon('bag-fill', 'icon-bag-fill');
@include create-icon('unavaliable-ny', 'icon-unavaliable-ny');
@include create-icon('alert-info1', 'icon-alert-info1');
@include create-icon('error-triangle1', 'icon-error-triangle1');
@include create-icon('checkbox-off1', 'icon-checkbox-off1');
@include create-icon('checkbox-on1', 'icon-checkbox-on1');
@include create-icon('sparks-symbol', 'icon-sparks-symbol');
@include create-icon('store-collect', 'icon-store-collect');
@include create-icon('standard-delivery', 'icon-standard-delivery');
@include create-icon('nextday-delivery', 'icon-nextday-delivery');
@include create-icon('timed-delivery', 'icon-timed-delivery');
@include create-icon('clearpay-symbol', 'icon-clearpay-symbol');
@include create-icon('clearpay-logo', 'icon-clearpay-logo');
@include create-icon('afterpay-black', 'icon-afterpay-black');
@include create-icon('clearpay-set-mobile', 'icon-clearpay-set-mobile');
@include create-icon('clearpay-set-signup', 'icon-clearpay-set-signup');
@include create-icon('clearpay-set-shop', 'icon-clearpay-set-shop');
@include create-icon('clearpay-set-payments', 'icon-clearpay-set-payments');
@include create-icon('sparkspay', 'icon-sparkspay');
@include create-icon('ifl-v', 'icon-ifl-v');
@include create-icon('ifl-h', 'icon-ifl-h');
@include create-icon('med-arrow-right', 'icon-med-arrow-right');
@include create-icon('sparks-star', 'icon-sparks-star');
@include create-icon('amex-alt', 'icon-amex-alt');
@include create-icon('amex-line', 'icon-amex-line');
@include create-icon('amex-stack', 'icon-amex-stack');
@include create-icon('visa-box', 'icon-visa-box');
@include create-icon('visa-line', 'icon-visa-line');
@include create-icon('rewards-card', 'icon-rewards-card');
@include create-icon('rewards', 'icon-rewards');
@include create-icon('instant-spend', 'icon-instant-spend');
@include create-icon('shopping-bags', 'icon-shopping-bags');
@include create-icon('rewards-bag', 'icon-rewards-bag');
@include create-icon('timer-3mins', 'icon-timer-3mins');
@include create-icon('timer-clock', 'icon-timer-clock');


// Checkout pages - delivery email icon

/* M&S font icon instructions
--------------------------------------------------
To add icons to the mns-icons font, follow the steps below:
   - inside the FEAR project, go to the /app/assets/fonts/
   - unzip the file mns-icons.zip
   - go to https://icomoon.io/app/
   - click on the hamburger menu
   - click on New Project
   - click Import Icons
   - from the unzipped folder, select file 'selection.json'
   - click Import Icons
   - select your new SVG files to add to the font file
   - make sure all icons are selected
   - click on Generate Font
   - rename new icons if necessary
   - click Download and save .zip file
   - unzip the newly created file
   - copy all font files from /mns-icons/fonts/ (eot, svg, ttf, woff) to FEAR folder /app/assets/fonts/
   - copy-paste the '.icon-.....' css rules from style.css into FEAR folder /sass/fear-core-ui/components/icons/_extends_content.scss
*/

/* -------- Icon elements -------- */

// Overwrite italic font style
.icon__label {
  font-style: normal;
}

/* -------- Icon modifiers -------- */

// Remove default styling from a button
.icon--button {
  background: transparent;
  border: none;
}

// Remove default styling from an anchor
.icon--link {
  text-decoration: none;

  span {
    left: -9999px;
    position: absolute;
    top: -9999px;
  }
}

.icon,
[class^='icon-']::before,
[class*=' icon-']::before {
  @extend %mns-icon-base;
}