@import 'vars';
$flag-icon-css-path: 'flags' !default;
$flag-icon-rect-path: '/4x3' !default;
$flag-icon-square-path: '/1x1' !default;

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

.flag-icon {
  @include flag-icon-background();
  position: relative;
  display: inline-block;
  width: (4 / 3) * 1em;
  line-height: 1em;

  &:before {
    content: "\00a0";
  }
  // &.flag-icon-squared {
  //   width: 1em;
  // }
  .dropdown-menu & {
    margin-right: 5px;
  }
}

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

    &.flag-icon-squared {
      background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$country}.svg);
    }
  }
}
@import "scss/flag-icon-list";
@import "scss/flag-icon-more";
