/* The pictures of the medals and the badge tiers (medal.js draws them as inline SVG; nothing here paints the picture itself, the colours are inside
   the svg). This file only places them: a wrapper that pops, the sizes in the celebration overlay, the little count marks. */

.medal-svg, .tier-svg { display: inline-block; flex: none; vertical-align: middle; max-width: 100%; height: auto; }
.medal-svg[width], .tier-svg[width] { height: auto; }
.mdl-wrap { display: inline-flex; line-height: 0; }
.mdl-wrap.mdl-pop { animation: mdl-pop .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes mdl-pop { from { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } to { transform: scale(1); opacity: 1; } }

/* the celebration overlay: 96 px on a phone, up to 160 px on a projector (the emoji box of the other events keeps its own size) */
.cel-emoji.cel-medal { font-size: 0; line-height: 0; display: flex; justify-content: center; }
.cel-emoji.cel-medal .medal-svg, .cel-emoji.cel-medal .tier-svg { width: clamp(96px, 12vw, 160px); height: auto; }

/* a count of medals: the small rosette in front of a number */
.medal-mark { vertical-align: -0.2em; margin-inline-end: 4px; }

/* the tier next to its name, and the badge wall: the ring is the tier svg itself */
.tier-chip .tier-svg, .tier-legend .tier-svg { margin-inline-end: 2px; }
.badge-ring .ring.has-tier { border: 0; background: none; box-shadow: none; width: auto; height: auto; line-height: 0; }

/* the projector's feed */
.feed-icon .medal-svg, .feed-icon .tier-svg { width: 1.5em; height: 1.5em; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
  .mdl-wrap.mdl-pop { animation: none; }
}

/* the roster card of the teacher page: the mark and the number */
.pc-medals { display: inline-flex; align-items: center; gap: 2px; }