span.icon, span.glyphicon {
  vertical-align: text-top;
}

// Maps Glyphicons to Spree .icon prefix.
// You can apply same pattern to extend with more icons.
//
// example:
// glyphicon glyphicon-pencil => icon icon-edit
//

// All Glyphicons Halflings in Bootstrap v3.3.1.0
$default_icons: (
  adjust
  align-center
  align-justify
  align-left
  align-right
  arrow-down
  arrow-left
  arrow-right
  arrow-up
  asterisk
  backward
  ban-circle
  barcode
  bell
  bold
  book
  bookmark
  briefcase
  bullhorn
  calendar
  camera
  certificate
  check
  chevron-down
  chevron-left
  chevron-right
  chevron-up
  circle-arrow-down
  circle-arrow-left
  circle-arrow-right
  circle-arrow-up
  cloud
  cloud-download
  cloud-upload
  cog
  collapse-down
  collapse-up
  comment
  compressed
  copyright-mark
  credit-card
  cutlery
  dashboard
  download
  download-alt
  earphone
  eject
  envelope
  euro
  exclamation-sign
  expand
  export
  eye-close
  eye-open
  facetime-video
  fast-backward
  fast-forward
  file
  film
  filter
  fire
  flag
  flash
  floppy-disk
  floppy-open
  floppy-remove
  floppy-save
  floppy-saved
  folder-close
  folder-open
  font
  forward
  fullscreen
  gbp
  gift
  glass
  globe
  hand-down
  hand-left
  hand-right
  hand-up
  hd-video
  hdd
  header
  headphones
  heart
  heart-empty
  home
  import
  inbox
  indent-left
  indent-right
  info-sign
  italic
  leaf
  link
  list
  list-alt
  lock
  log-in
  log-out
  magnet
  map-marker
  minus
  minus-sign
  move
  music
  new-window
  off
  ok
  ok-circle
  ok-sign
  open
  paperclip
  pause
  pencil
  phone
  phone-alt
  picture
  plane
  play
  play-circle
  plus
  plus-sign
  print
  pushpin
  qrcode
  question-sign
  random
  record
  refresh
  registration-mark
  remove
  remove-circle
  remove-sign
  repeat
  resize-full
  resize-horizontal
  resize-small
  resize-vertical
  retweet
  road
  saved
  screenshot
  sd-video
  search
  send
  share
  share-alt
  shopping-cart
  signal
  sort
  sort-by-alphabet
  sort-by-alphabet-alt
  sort-by-attributes
  sort-by-attributes-alt
  sort-by-order
  sort-by-order-alt
  sound-5-1
  sound-6-1
  sound-7-1
  sound-dolby
  sound-stereo
  star
  star-empty
  stats
  step-backward
  step-forward
  stop
  subtitles
  tag
  tags
  tasks
  text-height
  text-width
  th
  th-large
  th-list
  thumbs-down
  thumbs-up
  time
  tint
  tower
  transfer
  trash
  tree-conifer
  tree-deciduous
  unchecked
  upload
  usd
  user
  volume-down
  volume-off
  volume-up
  warning-sign
  wrench
  zoom-in
  zoom-out
);

// We prefer alias/remap these so its easy to understand which icon to use.
// Note: If desired alias exist as default, then remove it from default Array,
//       or write a smarter @each scope below that can actually override.
// ==========> default | alias
$alias_icons: (plus add)
              (pencil edit)
              (ok capture)
              (remove void)
              (bullhorn promotion)
              (share return)
              (send shipment)
              (share clone)
              (refresh update)
              (remove cancel)
              (resize-full split)
              (ok save)
              (eye-open show)
              (remove delete)
              (minus refund)
              (th-large products)
              (th-large variants)
              (picture images)
              (tag properties)
              (inbox stock)
              (usd money)
              (globe translate)
              (ok approve);

span.icon {
  @extend .glyphicon;
  top:2px;

  // Map defaults.
  @each $icon in $default_icons {
    &.icon-#{$icon} { @extend .glyphicon-#{$icon}; }
  }

  // Map and override with aliases.
  @each $map in $alias_icons {
    $icon:  nth($map, 1);
    $alias: nth($map, 2);
    &.icon-#{$alias} { @extend .glyphicon-#{$icon}; }
  }
}

// Spree SVG Icon Defaults
i.icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}


// Spree SVG Icons in JS

// The icons listed below are used by javascript generated content
// If you wish to use an existing SVG icon in javascript generated content
// use <i> tags like this -> <i class="icon icon-close"></i>
// Using <span> tags will fall back to legacy glyphicon font based icons

i.icon-close,
i.icon-cancel,
i.icon-delete,
i.icon-void          { background-image: url(asset-path("backend-cancel.svg")); }
i.icon-save          { background-image: url(asset-path("backend-save.svg")); }
i.icon-add           { background-image: url(asset-path("backend-add.svg")); }
i.icon-search        { background-image: url(asset-path("backend-search.svg")); }
i.icon-settings      { background-image: url(asset-path("backend-settings.svg")); }
i.icon-delete        { background-image: url(asset-path("backend-delete.svg")); }
i.icon-edit          { background-image: url(asset-path("backend-edit.svg")); }
i.icon-chevron-down  { background-image: url(asset-path("backend-chevron-down.svg")); }
i.icon-chevron-left  { background-image: url(asset-path("backend-chevron-left.svg")); }
i.icon-chevron-right { background-image: url(asset-path("backend-chevron-right.svg")); }
i.icon-chevron-up    { background-image: url(asset-path("backend-chevron-up.svg")); }