/*!
 * Tabler Flags v1.2.0 (https://tabler.io)
 * Copyright 2018-2025 The Tabler Authors
 * Copyright 2018-2025 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
/**
 * Converts a given value to a percentage string.
 *
 * @param {Number} $value - The value to be converted to a percentage.
 * @return {String} - The percentage representation of the value.
 */
/**
 * Generates a transparent version of the given color.
 *
 * @param {Color} $color - The base color to be made transparent.
 * @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1.
 * @return {Color} - The resulting color with the specified transparency.
 */
.flag {
  position: relative;
  display: inline-block;
  height: 2.5rem;
  aspect-ratio: 1.33333;
  background: no-repeat center/cover;
  box-shadow: var(--tblr-shadow-border);
  border-radius: var(--tblr-border-radius);
  vertical-align: bottom;
}

.flag-country-br {
  background-image: url("/assets/br.svg");
}

.flag-country-gb {
  background-image: url("/assets/gb.svg");
}

.flag-xxs {
  height: 1rem;
}

.flag-xs {
  height: 1.25rem;
}

.flag-sm {
  height: 2rem;
}

.flag-md {
  height: 2.5rem;
}

.flag-lg {
  height: 3rem;
}

.flag-xl {
  height: 5rem;
}

.flag-2xl {
  height: 7rem;
}