@use 'sass:map';
@use '../config';

@use '../config' as *;

.flag {
  position: relative;
  display: inline-block;
  width: config.$avatar-size;
  aspect-ratio: 1.33333;
  vertical-align: bottom;
  background: no-repeat center/cover;
  box-shadow: config.$flag-box-shadow;
  @include config.border-radius(config.$flag-border-radius);

  &.flag-country-np {
    border-radius: 0;
    box-shadow: none;
  }
}

@each $country in config.$flag-countries {
  .flag-country-#{$country} {
    background-image: url('#{config.$assets-base}/img/flags/#{$country}.svg');
  }
}

@each $flag-size, $size in config.$flag-sizes {
  .flag-#{$flag-size} {
    width: map.get($size, size);

    @if map.has-key($size, border-radius) {
      @include config.border-radius(map.get($size, border-radius));
    }
  }
}