.fc-default {
  background: linear-gradient(to right, #EEE 30%, #DDD 60%, #EEE 80%);
  animation-name: moving-gradient;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

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

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

@mixin flag-css($country) {
  $alpha2Code: to-lower-case(#{map-get($country, alpha2Code)});
  $alpha3Code: to-lower-case(#{map-get($country, alpha3Code)});
  $iocCode: to-lower-case(#{map-get($country, cioc)});

  .fc-#{$alpha2Code} {
    background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$alpha2Code}.svg);
    &.fc-squared {
      background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$alpha2Code}.svg);
    }
  }

  @if variable-exists(iocCode) and ($iocCode != '') {
    .fc-ioc-#{$iocCode} {
      background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$alpha2Code}.svg);
      &.fc-squared {
        background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$alpha2Code}.svg);
      }
    }
  }

  @if variable-exists(alpha3Code) and ($alpha3Code != '') {
    .fc-alpha3-#{$alpha3Code} {
      background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$alpha2Code}.svg);
      &.fc-squared {
        background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$alpha2Code}.svg);
      }
    }
  }
}

@mixin flag-css-default {
  .fc-ioc-default {
    @extend .fc-default;
  }

  .fc-alpha3-default {
    @extend .fc-default;
  }
}