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

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

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

@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) {
      border-radius: map.get($size, border-radius);
    }
  }
}