////// DO-ICON MIXIN USAGE
/////
///// -> do-icon($background-color, $edge-color, $text, $text-color, $icon, $shape-color);
///// +> @include do-icon(#009688, lighten(#009688, 20%), "", "");
///
// $background-color: the background of the document image (A color is expected - REQUIRED)
// $edge-color: the color of corner edge
// $text: the type of mime type
// $text-color: the color of the text containing file extension (A color is expected)
// $icon: inject an icon inside the document model

// IF WOU WANT CHANGE THE DEFAULT ICON
// #{$background-color} -> the icon main color
// #{$edge-color} 			-> the icon secondary color
// #{$font-size} 				-> the size of the file extension text (exe, jpg, gif, etc)
// #{$icon} 						-> the ascii code of the icon font
// #{$text} 						-> the file extension variable

@mixin do-icon(
  $background-color: #888,
  $edge-color: null,
  $text: null,
  $text-color: #f1f2f2,
  $icon: null
) {
  @if (type-of($edge-color) != 'color') {
    $edge-color: lighten($background-color, 15%);
  }
  @if (type-of($text-color) != 'color') {
    $text-color: '#F1F2F2';
  }
  @if (type-of($text) != 'string') and ($text) {
    $text: '@#!';
  }

  $background-color: colorEncode($background-color);
  $text-color: colorEncode($text-color);
  $edge-color: colorEncode($edge-color);

  $ico: '<svg xmlns="http://www.w3.org/2000/svg" class="icon-model" viewBox="0 0 200 200">#{$icon} <path d="M171 192.4V58.2l-58.4 0V0H36.5C32.4 0 29 3.4 29 7.6h0v184.9h0c0 4.2 3.4 7.6 7.6 7.6h126.9C167.6 200 171 196.6 171 192.4z" fill="#{$background-color}"/><text class="icon-text" transform="translate(100 171)" width="120" height="50" font-family="#{$font-family}" font-size="#{$font-size}" style="fill:#{$text-color};font-weight:bold;text-anchor:middle;text-shadow:0">#{$text}</text><polygon points="112.6 0 171 58.3 112.6 58.3" fill="#{$edge-color}"/><polygon points="170.9 116.5 112.6 58.3 170.9 58.3" style="fill:%23010202;opacity:0.1"/></svg>';

  background-image: url('data:image/svg+xml;utf8,#{$ico}');
}