@property --chart-pop {
  syntax: '<transform-function>';
  inherits: true;
  initial-value: scale(1);
}

.dfi {
  display: inline-block;
  vertical-align: middle;
  height: 40px;
  width: auto;
  max-width: 80px;
}

/* normal icons */
.dfi:has(use[href*="icon-paperplane"]) {
  aspect-ratio: 247 / 171;
}
.dfi:has(use[href*="icon-questionmark"]) {
  aspect-ratio: 60 / 116;
}
.dfi:has(use[href*="icon-theme-toggle"]) {
  aspect-ratio: 28 / 25;
}
.dfi:has(use[href*="icon-chart"]) {
  aspect-ratio: 190 / 190;
}
.dfi:has(use[href*="icon-clock"]) {
  aspect-ratio: 155 / 185;
}
.dfi:has(use[href*="icon-dice"]) {
  aspect-ratio: 224 / 195;
}
.dfi:has(use[href*="icon-doodle"]) {
  aspect-ratio: 229 / 144;
}

/* game icons */
.dfi:has(use[href*="icon-game-hangman"]) {
  aspect-ratio: 434 / 309;
}
.dfi:has(use[href*="icon-game-grid-clash"]) {
  aspect-ratio: 350 / 286;
}
.dfi:has(use[href*="icon-game-matchify"]) {
  aspect-ratio: 399 / 247;
}
.dfi:has(use[href*="icon-game-wordify"]) {
  aspect-ratio: 445 / 113;
}
.dfi:has(use[href*="icon-game-emojify"]) {
  aspect-ratio: 517 / 517;
}
.dfi:has(use[href*="icon-game-quick-battle"]) {
  aspect-ratio: 401 / 189;
}
.dfi:has(use[href*="icon-game-fortune-cookie"]) {
  aspect-ratio: 418 / 293;
}

/* countdown icons */
.dfi:has(use[href*="icon-countdown-spring"]) {
  aspect-ratio: 291 / 154;
}
.dfi:has(use[href*="icon-countdown-easter"]) {
  aspect-ratio: 418 / 293;
}
.dfi:has(use[href*="icon-countdown-summer"]) {
  aspect-ratio: 211 / 211;
}
.dfi:has(use[href*="icon-countdown-halloween"]) {
  aspect-ratio: 235 / 206;
}
.dfi:has(use[href*="icon-countdown-autumn"]) {
  aspect-ratio: 291 / 154;
}
.dfi:has(use[href*="icon-countdown-winter"]) {
  aspect-ratio: 180 / 206;
}
.dfi:has(use[href*="icon-countdown-christmas"]) {
  aspect-ratio: 159 / 217;
}
.dfi:has(use[href*="icon-countdown-newyear"]) {
  aspect-ratio: 418 / 293;
}
.dfi:has(use[href*="icon-countdown-valentines"]) {
  aspect-ratio: 418 / 293;
}