$flag-icon-css-path: '../img' !default;
$flag-icon-rect-path: '/flags' !default;

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

.flag-icon {
  @extend .flag-icon-background;
  position: relative;
  display: inline-block;
  width: (4 / 3) * 30px;
  line-height: 30px;
  &:before {
    content: '\00a0';
  }
  &.flag-icon-squared {
    width: 1em;
  }
}

@mixin flag-icon($country) {
  .flag-icon-#{$country} {
    background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg);
  }
}

@include flag-icon(da);
@include flag-icon(en);
@include flag-icon(de);
@include flag-icon(fr);