.icon {
  @each $name, $icon in $icons {
    &.#{$name} {
      &:before {
        background-image: url('../images/icons/#{$icon}');
        content: ' ';
        background-size: 100%;
        background-repeat: no-repeat;
      }
    }
  }
}


span.filetype {
  text-transform: uppercase;

  &:before {
    content: '';
    width: 17px;
    height: 17px;
    background-size: cover;
    display: inline-block;
    background-repeat: no-repeat;
    margin-right: 3px;

    @include mobile {
      width: 12px;
      height: 12px;
    }
  }
}