Katochimoto/xblocks

@require "../../../styl/init"

$svg ?= {}

$svg-icons = {
    'attention': 1,
    'close': 1,
    'download': 1,
    'download-white': 1,
    'eye': 1,
    'help': 1,
    'link': 1,
    'link-white': 1,
    'mail': 1,
    'mic-off': 1,
    'mic-on': 1,
    'odnoklassniki': 1,
    'pause': 1,
    'people': 1,
    'play': 1,
    'print': 1,
    'services': 1,
    'settings': 1,
    'three-dots': 1,
    'trash': 1,
    'trash-white': 1,
    'twitter': 1,
    'upload': 1,
    'upload-white': 1,
    'vk': 1
}

$svg["sizes"] = {
  s: 1.6*rem,
  m: 3.2*rem
}

xb-ico
  skin: xb-inline-block
  line-height: normal

.xb-ico
  display: inline-block
  background-position: center center
  background-repeat: no-repeat
  line-height: normal

  for $size-name, $size-value in $svg.sizes
    &._size-{$size-name}
      width: $size-value
      height: $size-value

  for $icon, $icon-on in $svg-icons
    &._type-{$icon}
      background-image: url('../img/' + $icon + '.svg')

      &:not(._active)
        skin: v3-icon

      &._active
        skin: v3-icon with-hover

  &._type-remove
    &:not(._active)
      skin: v3-icon_remove

    &._active
      skin: v3-icon_remove with-hover

  &._type-notification
    width: auto !important
    height: auto !important

    &:not(._active)
      skin: v3-icon_notification

    &._active
      skin: v3-icon_notification with-hover

  &._type-check
    &:not(._active)
      skin: v3-icon_check

    &._active
      skin: v3-icon_check with-hover

  &._type-dropdown
    &:not(._active)
      skin: v3-icon_dropdown

    &._active
      skin: v3-icon_dropdown with-hover