$default-color-1: #29323c;
$default-color-2: #485563;

$file-icon-width: 39px !default;
$file-icon-height: 32px !default;
$file-icon-text-size: .7em !default;

$colors: (
        g1: (
                selector: (doc, docx, odt, pages),
                color1: #928dab,
                color2: #00d2ff
        ),
        g2: (
                selector: (ace, bz2, gz, rar, tgz, zip),
                color1: #38ef7d,
                color2: #11998e
        ),
        g3: (
                selector: (dmg),
                color1: #ffc500,
                color2: #c21500
        ),
        g4: (
                selector: (html),
                color1: #799f0c,
                color2: #ffe000
        ),
        g5: (
                selector: (key, keynote, odp, pps, ppt, pptx, ppt),
                color1: #333399,
                color2: #ff00cc
        ),
        g6: (
                selector: (ods, xls, xlsx, csv),
                color1: #b5ac49,
                color2: #3ca55c
        ),
        g7: (
                selector: (txt, rtf, tex, ttf),
                color1: #DECBA4,
                color2: #3E5151
        ),
        g8: (
                selector: (xml, css),
                color1: #3f4c6b,
                color2: #606c88
        ),
        g9: (
                selector: (pdf),
                color1: #dd1818,
                color2: #333333
        ),
        g10: (
                selector: (bmp, png, gif),
                color1: #8f94fb,
                color2: #4e54c8
        ),
        g11: (
                selector: (exif, tif, tiff, ico, svg),
                color1: #C06C84,
                color2: #6C5B7B,
                color3: #355C7D
        ),
        g12: (
                selector: (jpeg, jpg),
                color1: #ef8e38,
                color2: #108dc7
        ),
        g13: (
                selector: (psd, img, ai, dxf),
                color1: #6A82FB,
                color2: #FC5C7D
        ),
        g14: (
                selector: (avi, flv, mov, mpeg, m4v, mkv, mpg, mp4, swf, wmv, rm),
                color1: #4b134f,
                color2: #c94b4b
        ),
        g15: (
                selector: (mp3, mpa, ogg, aac, flac, mid, aiff, alac, amr, au, cdda, m3u, m4a, m4p, pac, ra, wav, wma/*, 3gp*/, asf, vob),
                color1: #fdbb2d,
                color2: #22c1c3
        )
);

@mixin icon-linear-gradient($color1, $color2) {
  background: $color2;
  background: -moz-linear-gradient(-45deg, $color1 0%, $color2 100%);
  background: -webkit-linear-gradient(-45deg, $color1 0%, $color2 100%);
  background: linear-gradient(149deg, $color1 0%, $color2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color1}', endColorstr='#{$color2}',GradientType=1 );
}

@mixin icon-linear-gradient-tri-colors($color1, $color2, $color3) {
  background: $color3;
  background: -moz-linear-gradient(-45deg, $color1 0%, $color2 50%, $color3 100%);
  background: -webkit-linear-gradient(-45deg, $color1 0%, $color2 50%, $color3 100%);
  background: linear-gradient(149deg, $color1 0%, $color2 50%, $color3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$color1}', endColorstr='#{$color3}',GradientType=1 );
}

.ext {
  display: block;
  float: left;
  width: $file-icon-width;
  height: $file-icon-height;
  @include icon-linear-gradient($default-color-1, $default-color-2);
  @include borderRadius($small-radius);
  position: relative;
  .txt {
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    color: white;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: $file-icon-text-size;
    top: 50%;
    transform: translateY(-50%);
  }
  @each $g, $group in $colors {
    $color3: null !default;
    $selector: map-get($group, selector);
    $color1: map-get($group, color1);
    $color2: map-get($group, color2);
    $color3: map-get($group, color3);
    @each $index, $ext in $selector {
      &.ext-#{$index} {
        @if $color3 != null {
          @include icon-linear-gradient-tri-colors($color1, $color2, $color3);
        }
        @else {
          @include icon-linear-gradient($color1, $color2);
        }

      }
    }

  }
}