<% manifest = JSON.parse(File.read('assets/images/sprites/docs.json')) %>

%svg-icon {
  display: inline-block;
  vertical-align: top;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  fill: currentColor;
}

%doc-icon {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  background-image: image-url('sprites/docs.png');
  background-size: <%= manifest['icons_per_row'] %>rem <%= manifest['icons_per_row'] %>rem;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  %doc-icon { background-image: image-url('sprites/docs@2x.png'); }
}

html._theme-dark {
  %darkIconFix {
    filter: invert(100%) grayscale(100%);
    -webkit-filter: invert(100%) grayscale(100%);
  }
}

<%=
  items = []

  manifest['items'].each do |item|
    rules = []
    rules << "background-position: -#{item['col']}rem -#{item['row']}rem;"
    rules << "@extend %darkIconFix !optional;" if item['dark_icon_fix']
    items << "._icon-#{item['type']}:before { #{rules.join(' ')} }"
  end

  items.join('')
 %>