$file-icon-css-path: '../icons' !default;

.fiv-background {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}

@mixin file-family( $short, $mult ) {
  .fiv-#{$short} {
    @extend .fiv-background;
    position: relative;
    display: inline-block;
    line-height: 1em;
    width: #{$mult}em;
    &:before {
      content: '\00a0';
    }
  }
}

@mixin file-icon( $family, $short, $ext ) {
  .fiv-#{$short} {
    &.fiv-icon-#{$ext} {
      background-image: url('#{$file-icon-css-path}/#{$family}/#{$ext}.svg');
    }
  }
}