fontello-icon($symbol = '')
  &:before
    font-size: 15px
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin: 2px 0;
  if $symbol not ''
    &:before
      content: $symbol


icon-before(url, w, h, m = '')
  &:before
    display inline-block
    content ''
    background inline(url)
    background-repeat no-repeat
    width w
    height h
    if m isnot ''
      margin m

icon-cart-white(m = '')
  icon-before('../i/inline/icon-cart-white.png', 21px, 21px, m)

icon-flag-black(m = '')
  icon-before('../i/inline/icon-flag-black.png', 14px, 17px, m)

icon-down-black(m = '')
  icon-before('../i/inline/icon-down-black.png', 10px, 17px, m)

icon-down-accent-1(m = '')
  icon-before('../i/inline/icon-down-blue.png', 13px, 28px, m)

icon-flag-accent-1(m = '')
  icon-before('../i/inline/icon-flag-blue.png', 22px, 28px, m)

icon-cart-accent-2(m = '')
  icon-before('../i/inline/icon-cart-red.png', 33px, 27px, m)


[class^="icon-"]
  display: inline-block
  background-position: 50% 50%
  background-repeat: no-repeat

.icon-bluecards
  width: 34px
  height: 38px
  background-image: inline('../i/inline/icon-bluecards.png')

.icon-bluecheck
  width: 29px
  height: 38px
  background-image: inline('../i/inline/icon-bluecheck.png')

.icon-bluepin
  width: 18px
  height: 38px
  background-image: inline('../i/inline/icon-bluepin.png')

.icon-bluetruck
  width: 44px
  height: 38px
  background-image: inline('../i/inline/icon-bluetruck.png')

.icon-whitecards
  width: 34px
  height: 38px
  background-image: url('../i/inline/icon-whitecards.png')

.icon-whitecheck
  width: 29px
  height: 38px
  background-image: url('../i/inline/icon-whitecheck.png')

.icon-whitepin
  width: 18px
  height: 38px
  background-image: url('../i/inline/icon-whitepin.png')

.icon-whitetruck
  width: 44px
  height: 38px
  background-image: url('../i/inline/icon-whitetruck.png')

.icon-cart-blue
  width: 41px
  height: 43px
  background-image: inline('../i/inline/icon-cart-blue.png')

.icon-cart-black
  width: 21px
  height: 21px
  background-image: inline('../i/inline/icon-cart-black.png')

.icon-cart-white
  width: 21px
  height: 21px
  background-image: inline('../i/inline/icon-cart-white.png')

.icon-cart-white-large
  width: 41px
  height: 43px
  background-image: inline('../i/inline/icon-cart-white-large.png')

.icon-cart-red
  width: 33px
  height: 27px
  background-image: inline('../i/inline/icon-cart-red.png')

.icon-cart-brown
  width: 33px
  height: 27px
  background-image: inline('../i/inline/icon-cart-brown.png')

.icon-flag-black
  width: 14px
  height: 17px
  background-image: inline('../i/inline/icon-flag-black.png')

.icon-down-black
  width: 10px
  height: 17px
  background-image: inline('../i/inline/icon-down-black.png')

.icon-down-blue
  width: 13px
  height: 28px
  background-image: inline('../i/inline/icon-down-blue.png')

.icon-flag-blue
  width: 22px
  height: 28px
  background-image: inline('../i/inline/icon-flag-blue.png')

.icon-facebook-mobile
  width: 72px
  height: 72px
  background-image: inline('../i/inline/icon-facebook-mobile.png')

.icon-instagram-mobile
  width: 72px
  height: 72px
  background-image: inline('../i/inline/icon-instagram-mobile.png')

.icon-mobilenav-cart
  width: 49px
  height: 50px
  background-position: 50% 100%
  background-image: inline('../i/inline/icon-mobilenav-cart.png')

.icon-mobilenav-logo
  width: 52px
  height: 50px
  background-position: 50% 100%
  background-image: inline('../i/inline/icon-mobilenav-logo.png')

.icon-mobilenav-menu
  width: 32px
  height: 50px
  background-position: 50% 100%
  background-image: inline('../i/inline/icon-mobilenav-menu.png')

.icon-mobilenav-search
  width: 38px
  height: 50px
  background-position: 50% 100%
  background-image: inline('../i/inline/icon-mobilenav-search.png')

.icon-mobilenav-user
  width: 45px
  height: 50px
  background-position: 50% 100%
  background-image: inline('../i/inline/icon-mobilenav-user.png')

.icon-close
  width: 34px
  height: 34px
  background-image: inline('../i/inline/icon-close.png')

.icon-popup-close
  width: 29px
  height: 29px
  background-image: inline('../i/inline/icon-popup-close.png')

.icon-lowtohight,
.icon-highttolow
  width: 16px
  height: 11px
  theme(color 'accent-2')
  position: relative
  overflow: hidden
  top: -1px
  &:before
    position: absolute
    content: ''
    width: 0
    height: 0
    border-color: transparent
    border-bottom-color: inherit
    border-style: solid
    border-width: 10px 16px
    bottom: 1px
    left: -1px
.icon-highttolow:before
  left: auto
  right: -2px
