%icon {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  background-image: image-url('icons.png');
  background-size: 4rem 3rem;
}

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

%doc-icon {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  background-image: image-url('docs.png');
  background-size: 10rem 12rem;
}

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

%darkIconFix {
  @if $style == 'dark' {
    filter: invert(100%) grayscale(100%);
    -webkit-filter: invert(100%) grayscale(100%);
  }
}

%icon-dir                   { background-position: 0 0; }
%icon-search                { background-position: -1rem 0; }
%icon-link                  { background-position: -2.25rem -.25rem; }
%icon-clear                 { background-position: -3rem 0; }
%icon-path                  { background-position: 0 -1rem; }
%icon-search-white          { background-position: -1rem -1rem; }
%icon-dir-white             { background-position: -2rem -1rem; }
%icon-link-white            { background-position: -3.25rem -1.25rem; }
%icon-clipboard             { background-position: 0 -2rem; }
%icon-clipboard-white       { background-position: -1rem -2rem; }
%icon-close-white           { background-position: -2rem -2rem; }

._icon-codeceptjs:before    { background-position: -3rem 0; }
._icon-codeception:before   { background-position: -4rem 0; }
._icon-sqlite:before        { background-position: -5rem 0; @extend %darkIconFix !optional; }
._icon-async:before         { background-position: -6rem 0; @extend %darkIconFix !optional; }
._icon-http:before          { background-position: -7rem 0; @extend %darkIconFix !optional; }
._icon-jquery:before        { background-position: -8rem 0; @extend %darkIconFix !optional; }
._icon-underscore:before    { background-position: -9rem 0; @extend %darkIconFix !optional; }
._icon-html:before          { background-position: 0 -1rem; }
._icon-css:before           { background-position: -1rem -1rem; }
._icon-dom:before           { background-position: -2rem -1rem; }
._icon-dom_events:before    { background-position: -3rem -1rem; }
._icon-javascript:before    { background-position: -4rem -1rem; }
._icon-backbone:before      { background-position: -5rem -1rem; @extend %darkIconFix !optional; }
._icon-node:before,
._icon-node_lts:before      { background-position: -6rem -1rem; }
._icon-sass:before          { background-position: -7rem -1rem; }
._icon-less:before          { background-position: -8rem -1rem; }
._icon-angularjs:before     { background-position: -9rem -1rem; }
._icon-coffeescript:before  { background-position: 0 -2rem; @extend %darkIconFix !optional; }
._icon-ember:before         { background-position: -1rem -2rem; }
._icon-yarn:before          { background-position: -2rem -2rem; }
._icon-immutable:before     { background-position: -3rem -2rem; @extend %darkIconFix !optional; }
._icon-jqueryui:before      { background-position: -4rem -2rem; }
._icon-jquerymobile:before  { background-position: -5rem -2rem; }
._icon-lodash:before        { background-position: -6rem -2rem; }
._icon-php:before           { background-position: -7rem -2rem; }
._icon-ruby:before,
._icon-minitest:before      { background-position: -8rem -2rem; }
._icon-rails:before         { background-position: -9rem -2rem; }
._icon-python:before,
._icon-python2:before       { background-position: 0 -3rem; }
._icon-git:before           { background-position: -1rem -3rem; }
._icon-redis:before         { background-position: -2rem -3rem; }
._icon-postgresql:before    { background-position: -3rem -3rem; }
._icon-d3:before            { background-position: -4rem -3rem; }
._icon-knockout:before      { background-position: -5rem -3rem; }
._icon-moment:before        { background-position: -6rem -3rem; @extend %darkIconFix !optional; }
._icon-c:before             { background-position: -7rem -3rem; }
._icon-statsmodels:before   { background-position: -8rem -3rem; }
._icon-yii:before,
._icon-yii1:before          { background-position: -9rem -3rem; }
._icon-cpp:before           { background-position: 0 -4rem; }
._icon-go:before            { background-position: -1rem -4rem; }
._icon-express:before       { background-position: -2rem -4rem; }
._icon-grunt:before         { background-position: -3rem -4rem; }
._icon-rust:before          { background-position: -4rem -4rem; @extend %darkIconFix !optional; }
._icon-laravel:before       { background-position: -5rem -4rem; }
._icon-haskell:before       { background-position: -6rem -4rem; }
._icon-requirejs:before     { background-position: -7rem -4rem; }
._icon-chai:before          { background-position: -8rem -4rem; }
._icon-sinon:before         { background-position: -9rem -4rem; @extend %darkIconFix !optional; }
._icon-cordova:before       { background-position: 0 -5rem; }
._icon-markdown:before      { background-position: -1rem -5rem; @extend %darkIconFix !optional; }
._icon-django:before        { background-position: -2rem -5rem; }
._icon-xslt_xpath:before    { background-position: -3rem -5rem; }
._icon-nginx:before,
._icon-nginx_lua_module:before { background-position: -4rem -5rem; }
._icon-svg:before           { background-position: -5rem -5rem; }
._icon-marionette:before    { background-position: -6rem -5rem; }
._icon-mongoose:before      { background-position: -7rem -5rem; }
._icon-phpunit:before       { background-position: -8rem -5rem; }
._icon-nokogiri:before      { background-position: -9rem -5rem; @extend %darkIconFix !optional; }
._icon-rethinkdb:before     { background-position: 0 -6rem; }
._icon-react:before         { background-position: -1rem -6rem; }
._icon-socketio:before      { background-position: -2rem -6rem; }
._icon-modernizr:before     { background-position: -3rem -6rem; }
._icon-bower:before         { background-position: -4rem -6rem; }
._icon-fish:before          { background-position: -5rem -6rem; @extend %darkIconFix !optional; }
._icon-scikit_image:before  { background-position: -6rem -6rem; }
._icon-twig:before          { background-position: -7rem -6rem; }
._icon-pandas:before        { background-position: -8rem -6rem; }
._icon-scikit_learn:before  { background-position: -9rem -6rem; }
._icon-bottle:before        { background-position: 0 -7rem; }
._icon-docker:before        { background-position: -1rem -7rem; }
._icon-cakephp:before       { background-position: -2rem -7rem; }
._icon-lua:before           { background-position: -3rem -7rem; @extend %darkIconFix !optional; }
._icon-clojure:before       { background-position: -4rem -7rem; }
._icon-symfony:before       { background-position: -5rem -7rem; }
._icon-mocha:before         { background-position: -6rem -7rem; }
._icon-meteor:before        { background-position: -7rem -7rem; @extend %darkIconFix !optional; }
._icon-npm:before           { background-position: -8rem -7rem; }
._icon-apache_http_server:before { background-position: -9rem -7rem; }
._icon-drupal:before        { background-position: 0 -8rem; }
._icon-webpack:before       { background-position: -1rem -8rem; }
._icon-phaser:before        { background-position: -2rem -8rem; }
._icon-vue:before           { background-position: -3rem -8rem; }
._icon-opentsdb:before      { background-position: -4rem -8rem; }
._icon-q:before             { background-position: -5rem -8rem; }
._icon-crystal:before       { background-position: -6rem -8rem; @extend %darkIconFix !optional; }
._icon-julia:before         { background-position: -7rem -8rem; @extend %darkIconFix !optional; }
._icon-redux:before         { background-position: -8rem -8rem; @extend %darkIconFix !optional; }
._icon-bootstrap:before     { background-position: -9rem -8rem; }
._icon-react_native:before  { background-position: 0 -9rem; }
._icon-phalcon:before       { background-position: -1rem -9rem; }
._icon-matplotlib:before    { background-position: -2rem -9rem; }
._icon-cmake:before         { background-position: -3rem -9rem; }
._icon-elixir:before        { background-position: -4rem -9rem; @extend %darkIconFix !optional; }
._icon-vagrant:before       { background-position: -5rem -9rem; }
._icon-dojo:before          { background-position: -6rem -9rem; }
._icon-flow:before          { background-position: -7rem -9rem; }
._icon-relay:before         { background-position: -8rem -9rem; }
._icon-phoenix:before       { background-position: -9rem -9rem; }
._icon-tcl_tk:before        { background-position: 0 -10rem; }
._icon-erlang:before        { background-position: -1rem -10rem; }
._icon-chef:before          { background-position: -2rem -10rem; }
._icon-ramda:before         { background-position: -3rem -10rem; @extend %darkIconFix !optional; }
._icon-codeigniter:before   { background-position: -4rem -10rem; @extend %darkIconFix !optional; }
._icon-influxdata:before    { background-position: -5rem -10rem; @extend %darkIconFix !optional; }
._icon-tensorflow:before    { background-position: -6rem -10rem; }
._icon-haxe:before          { background-position: -7rem -10rem; }
._icon-ansible:before       { background-position: -8rem -10rem; @extend %darkIconFix !optional; }
._icon-typescript:before    { background-position: -9rem -10rem; }
._icon-browser_support_tables:before { background-position: 0rem -11rem; }
._icon-gnu_fortran:before   { background-position: -1rem -11rem; }
._icon-gcc:before           { background-position: -2rem -11rem; }
._icon-perl:before          { background-position: -3rem -11rem; }
._icon-apache_pig:before    { background-position: -4rem -11rem; }
._icon-numpy:before         { background-position: -5rem -11rem; }
._icon-kotlin:before        { background-position: -6rem -11rem; }
._icon-padrino:before       { background-position: -7rem -11rem; }
._icon-angular:before       { background-position: -8rem -11rem; }
._icon-love:before          { background-position: -9rem -11rem; }