@import 'animations'

/*!
 * ICONS
 * ================
 *
 * This file contains icons coded in data:uri
 */

$icon
    content ''
    display inline-block
    vertical-align middle
    background-position center
    background-repeat no-repeat
    background-size cover


// icon's sizes
// ========================================================
$icon-12
    width em(12px)
    height em(12px)

$icon-16
    width em(16px)
    height em(16px)

$icon-24
    width em(24px)
    height em(24px)

$icon-36
    width em(36px)
    height em(36px)


// icon's properties
// ========================================================
$icon-centered
    position absolute
    top 50%
    left 50%
    transform translateX(-50%) translateY(-50%)

$spin-anim
    // arguments' order is important: the animation name must stay first
    // so that scoping works
    animation spin 1s linear infinite

$icon-spinner-grey
    @extend $icon
    @extend $icon-centered
    @extend $spin-anim
    background-image embed('../../assets/icons/spinner-grey.svg')

$icon-spinner-white
    @extend $icon
    @extend $icon-centered
    @extend $spin-anim
    background-image embed('../../assets/icons/spinner-white.svg')

$icon-spinner-small-blue
    @extend $icon
    @extend $icon-16
    @extend $spin-anim
    background-image embed('../../assets/icons/spinner-blue.svg')

@import 'animations'

/*!
 * ICONS
 * ================
 *
 * This file contains icons coded in data:uri
 */

$icon
    content ''
    display inline-block
    vertical-align middle
    background-position center
    background-repeat no-repeat
    background-size cover


// icon's sizes
// ========================================================
$icon-12
    width em(12px)
    height em(12px)

$icon-16
    width em(16px)
    height em(16px)

$icon-24
    width em(24px)
    height em(24px)

$icon-36
    width em(36px)
    height em(36px)


// icon's properties
// ========================================================
$icon-centered
    position absolute
    top 50%
    left 50%
    transform translateX(-50%) translateY(-50%)

$spin-anim
    // arguments' order is important: the animation name must stay first
    // so that scoping works
    animation spin 1s linear infinite

$icon-spinner-grey
    @extend $icon
    @extend $icon-centered
    @extend $spin-anim
    background-image embedurl('../../assets/icons/spinner-grey.svg')

$icon-spinner-white
    @extend $icon
    @extend $icon-centered
    @extend $spin-anim
    background-image embedurl('../../assets/icons/spinner-white.svg')

$icon-spinner-small-blue
    @extend $icon
    @extend $icon-16
    @extend $spin-anim
    background-image embedurl('../../assets/icons/spinner-blue.svg')

Fix 'Path must be a string. Received undefined' embed ⟹ embedurl
Fix 'Path must be a string. Received undefined' embed ⟹ embedurl
