// HARDCODED styles
// This part serves for the demo and can be safely canceled
// However, if you need a particular icon you can write the code like in the examples below
//

.mime-icon {
  .ico.ico-magenta:after {
    @include do-icon(#d9006c);
  }
  .ico.ico-yellow:after {
    @include do-icon(#f9ca15);
  }
  .ico.ico-blue:after {
    @include do-icon(#0d75dd);
  }

  &.abc .ico:after {
    @include do-icon(desaturate(hsla(15, 90%, 55%, 1), 15%), '', 'ABC');
  }
  &.def .ico:after {
    @include do-icon(desaturate(hsla(80, 75%, 47%, 1), 15%), '', 'DEF');
  }
  &.ghi .ico:after {
    @include do-icon(desaturate(hsla(270, 60%, 55%, 1), 15%), '', 'GHI');
  }

  &.light {
    &.ico-mp3 .ico:after {
      @include do-icon(#f1f2f2, desaturate(#05ad9d, 15%), 'MP3', #888, '');
    }
    &.ico-pcm .ico:after {
      @include do-icon(#f1f2f2, desaturate(#8bc34a, 15%), 'PCM', #888, '');
    }
    &.ico-ogg .ico:after {
      @include do-icon(#f1f2f2, desaturate(#cddc39, 15%), 'OGG', #888, '');
    }
    &.ico-wav .ico:after {
      @include do-icon(#f1f2f2, desaturate(#ffc107, 15%), 'WAV', #888, '');
    }
    &.ico-aac .ico:after {
      @include do-icon(#f1f2f2, desaturate(#f44336, 15%), 'AAC', #888, '');
    }
    &.ico-aiff .ico:after {
      @include do-icon(#f1f2f2, desaturate(#e91e63, 15%), 'AIFF', #888, '');
    }
    &.ico-wma .ico:after {
      @include do-icon(#f1f2f2, desaturate(#9c27b0, 15%), 'WMA', #888, '');
    }
    &.ico-html .ico:after {
      @include do-icon(#f1f2f2, desaturate(#3f51b5, 15%), 'HTML', #888, '');
    }
    &.ico-js .ico:after {
      @include do-icon(#f1f2f2, desaturate(#9c27b0, 15%), 'JS', #888, '');
    }
  }

  &.dark {
    &.ico-csv .ico:after {
      @include do-icon($dark-color, desaturate(#05ad9d, 15%), 'CSV', #ddd, '');
    }
    &.ico-txt .ico:after {
      @include do-icon($dark-color, desaturate(#8bc34a, 15%), 'TXT', #ddd, '');
    }
    &.ico-rtf .ico:after {
      @include do-icon($dark-color, desaturate(#cddc39, 15%), 'RTF', #ddd, '');
    }
    &.ico-doc .ico:after {
      @include do-icon($dark-color, desaturate(#ffc107, 15%), 'DOC', #ddd, '');
    }
    &.ico-docx .ico:after {
      @include do-icon($dark-color, desaturate(#f44336, 15%), 'DOCX', #ddd, '');
    }
    &.ico-flac .ico:after {
      @include do-icon($dark-color, desaturate(#e91e63, 15%), 'FLAC', #ddd, '');
    }
    &.ico-js .ico:after {
      @include do-icon($dark-color, desaturate(#9c27b0, 15%), 'JS', #ddd, '');
    }
    &.ico-php .ico:after {
      @include do-icon($dark-color, desaturate(#3f51b5, 15%), 'PHP', #ddd, '');
    }
  }

  &.double {
    &.ico-avi .ico {
      &:before {
        color: #f44336 !important;
      }
      &:after {
        @include do-icon($dark-color, #f44336, 'AVI', #f44336, '');
      }
    }
    &.ico-mp4 .ico {
      &:before {
        color: #8bc34a !important;
      }
      &:after {
        @include do-icon($dark-color, #8bc34a, 'MP4', #8bc34a, '');
      }
    }
    &.ico-mkv .ico {
      &:before {
        color: #bdcc2b !important;
      }
      &:after {
        @include do-icon($dark-color, #bdcc2b, 'MKV', #bdcc2b, '');
      }
    }
    &.ico-mpeg .ico {
      &:before {
        color: #ffc107 !important;
      }
      &:after {
        @include do-icon($dark-color, #ffc107, 'MPEG', #ffc107, '');
      }
    }
    &.ico-mov .ico {
      &:before {
        color: #05ad9d !important;
      }
      &:after {
        @include do-icon($dark-color, #05ad9d, 'MOV', #05ad9d, '');
      }
    }
    &.ico-flv .ico {
      &:before {
        color: #e91e63 !important;
      }
      &:after {
        @include do-icon($dark-color, #e91e63, 'FLV', #e91e63, '');
      }
    }
    &.ico-swf .ico {
      &:before {
        color: #9c27b0 !important;
      }
      &:after {
        @include do-icon($dark-color, #9c27b0, 'SWF', #9c27b0, '');
      }
    }
    &.ico-wmv .ico {
      &:before {
        color: #8bc34a !important;
      }
      &:after {
        @include do-icon($dark-color, #8bc34a, 'WMV', #8bc34a, '');
      }
    }
  }
}
