@define-mixin file-icons {
  .name[data-path$=".txt"] {
    background-image: url("scribo/icons/document.svg");
  }
  .name[data-path$=".html"] {
    background-image: url("scribo/icons/html.svg");
  }
  .name[data-path$=".json"] {
    background-image: url("scribo/icons/json.svg");
  }
  .name[data-path$=".yaml"] {
    background-image: url("scribo/icons/yaml.svg");
  }
  .name[data-path$=".yml"] {
    background-image: url("scribo/icons/yaml.svg");
  }
  .name[data-path$=".xml"] {
    background-image: url("scribo/icons/xml.svg");
  }
  .name[data-path$=".plist"] {
    background-image: url("scribo/icons/xml.svg");
  }

  .name[data-path$=".css"] {
    background-image: url("scribo/icons/css.svg");
  }
  .name[data-path$=".scss"] {
    background-image: url("scribo/icons/sass.svg");
  }
  .name[data-path$=".sass"] {
    background-image: url("scribo/icons/sass.svg");
  }

  .name[data-path$=".md"] {
    background-image: url("scribo/icons/markdown.svg");
  }
  .name[data-path$=".markdown"] {
    background-image: url("scribo/icons/markdown.svg");
  }
  .name[data-path="LICENSE"] {
    background-image: url("scribo/icons/markdown.svg");
  }
  // script
  .name[data-path$=".js"] {
    background-image: url("scribo/icons/javascript.svg");
  }
  .name[data-path$=".rb"] {
    background-image: url("scribo/icons/ruby.svg");
  }
  .name[data-path="Gemfile"] {
    background-image: url("scribo/icons/ruby.svg");
  }
  .name[data-path="Gemfile.lock"] {
    background-image: url("scribo/icons/ruby.svg");
  }

  // image
  .name[data-path$=".png"] {
    background-image: url("scribo/icons/image.svg");
  }
  .name[data-path$=".gif"] {
    background-image: url("scribo/icons/image.svg");
  }
  .name[data-path$=".bmp"] {
    background-image: url("scribo/icons/image.svg");
  }
  .name[data-path$=".webp"] {
    background-image: url("scribo/icons/image.svg");
  }
  .name[data-path$=".jpeg"] {
    background-image: url("scribo/icons/image.svg");
  }
  .name[data-path$=".jpg"] {
    background-image: url("scribo/icons/image.svg");
  }
  .name[data-path$=".svg"] {
    background-image: url("scribo/icons/image.svg");
  }
  .name[data-path$=".ico"] {
    background-image: url("scribo/icons/image.svg");
  }

  // video
  .name[data-path$=".webm"] {
    background-image: url("scribo/icons/video.svg");
  }
  .name[data-path$=".ogg"] {
    background-image: url("scribo/icons/video.svg");
  }
  .name[data-path$=".mp4"] {
    background-image: url("scribo/icons/video.svg");
  }

  // audio
  .name[data-path$=".midi"] {
    background-image: url("scribo/icons/audio.svg");
  }
  .name[data-path$=".mpeg"] {
    background-image: url("scribo/icons/audio.svg");
  }
  .name[data-path$=".webm"] {
    background-image: url("scribo/icons/audio.svg");
  }
  .name[data-path$=".wav"] {
    background-image: url("scribo/icons/audio.svg");
  }

  // document
  .name[data-path$=".doc"] {
    background-image: url("scribo/icons/word.svg");
  }
  .name[data-path$=".docx"] {
    background-image: url("scribo/icons/word.svg");
  }
  .name[data-path$=".ppt"] {
    background-image: url("scribo/icons/powerpoint.svg");
  }
  .name[data-path$=".pptx"] {
    background-image: url("scribo/icons/powerpoint.svg");
  }
  .name[data-path$=".csv"] {
    background-image: url("scribo/icons/table.svg");
  }
  .name[data-path$=".xls"] {
    background-image: url("scribo/icons/table.svg");
  }
  .name[data-path$=".xlsx"] {
    background-image: url("scribo/icons/table.svg");
  }
  .name[data-path$=".pdf"] {
    background-image: url("scribo/icons/pdf.svg");
  }
  .name[data-path$=".zip"] {
    background-image: url("scribo/icons/zip.svg");
  }

  // font
  .name[data-path$=".eot"] {
    background-image: url("scribo/icons/font.svg");
  }
  .name[data-path$=".otf"] {
    background-image: url("scribo/icons/font.svg");
  }
  .name[data-path$=".ttf"] {
    background-image: url("scribo/icons/font.svg");
  }
  .name[data-path$=".woff"] {
    background-image: url("scribo/icons/font.svg");
  }
  .name[data-path$=".woff2"] {
    background-image: url("scribo/icons/font.svg");
  }

  // other
  .name[data-path$=".link"] {
    background-image: url("scribo/icons/http.svg");
  }
}