/* website/assets/reactions.css -- GENERATED, DO NOT EDIT.
 *
 * Regenerate with: python3 docs/reactions-icon-candidates/build_web_sprite.py
 * (which also rebuilds reactions-sprite.webp beside this file).
 *
 * The crayon reaction icons the app uses, as one sprite sheet. Sizes are
 * in em so a caller picks the size with font-size; the 7x6 grid is
 * addressed with percentage background-position, which scales with the box.
 */

.rx {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.22em;
    background-repeat: no-repeat;
    background-size: 700% 600%;
    background-image: url(/assets/reactions-sprite.webp?v=66b7e1977c);
}

/* Overlapping run of the top icons, for a drawing card's byline.
 * Overlap and paint order match ReactionStackIcons in the app:
 * spacing -0.35 of the icon, first icon on top. */
.rx-stack {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    isolation: isolate;
}
.rx-stack .rx { position: relative; margin-right: -0.4em; }
.rx-stack .rx:last-child { margin-right: 0; }
.rx-stack .rx:nth-child(1) { z-index: 3; }
.rx-stack .rx:nth-child(2) { z-index: 2; }
.rx-stack .rx:nth-child(3) { z-index: 1; }

/* One icon plus its count, for the /d/ breakdown. */
.rx-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.55rem;
}
.rx-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    white-space: nowrap;
}

.rx-heart { background-position: 0 0; }
.rx-laugh { background-position: calc(100% * 1 / 6) 0; }
.rx-fire { background-position: calc(100% * 2 / 6) 0; }
.rx-wow { background-position: calc(100% * 3 / 6) 0; }
.rx-clap { background-position: calc(100% * 4 / 6) 0; }
.rx-aww { background-position: calc(100% * 5 / 6) 0; }
.rx-question { background-position: 100% 0; }
.rx-exclaim { background-position: 0 calc(100% * 1 / 5); }
.rx-mindblown { background-position: calc(100% * 1 / 6) calc(100% * 1 / 5); }
.rx-chefkiss { background-position: calc(100% * 2 / 6) calc(100% * 1 / 5); }
.rx-cool { background-position: calc(100% * 3 / 6) calc(100% * 1 / 5); }
.rx-lightbulb { background-position: calc(100% * 4 / 6) calc(100% * 1 / 5); }
.rx-hearteyes { background-position: calc(100% * 5 / 6) calc(100% * 1 / 5); }
.rx-crylaugh { background-position: 100% calc(100% * 1 / 5); }
.rx-star { background-position: 0 calc(100% * 2 / 5); }
.rx-trophy { background-position: calc(100% * 1 / 6) calc(100% * 2 / 5); }
.rx-party { background-position: calc(100% * 2 / 6) calc(100% * 2 / 5); }
.rx-hundred { background-position: calc(100% * 3 / 6) calc(100% * 2 / 5); }
.rx-eyes { background-position: calc(100% * 4 / 6) calc(100% * 2 / 5); }
.rx-rainbow { background-position: calc(100% * 5 / 6) calc(100% * 2 / 5); }
.rx-rocket { background-position: 100% calc(100% * 2 / 5); }
.rx-thinking { background-position: 0 calc(100% * 3 / 5); }
.rx-masterpiece { background-position: calc(100% * 1 / 6) calc(100% * 3 / 5); }
.rx-sparkles { background-position: calc(100% * 2 / 6) calc(100% * 3 / 5); }
.rx-goldstar { background-position: calc(100% * 3 / 6) calc(100% * 3 / 5); }
.rx-ribbon { background-position: calc(100% * 4 / 6) calc(100% * 3 / 5); }
.rx-gem { background-position: calc(100% * 5 / 6) calc(100% * 3 / 5); }
.rx-sculpture { background-position: 100% calc(100% * 3 / 5); }
.rx-puzzle { background-position: 0 calc(100% * 4 / 5); }
.rx-hourglass { background-position: calc(100% * 1 / 6) calc(100% * 4 / 5); }
.rx-brain { background-position: calc(100% * 2 / 6) calc(100% * 4 / 5); }
.rx-detective { background-position: calc(100% * 3 / 6) calc(100% * 4 / 5); }
.rx-snort { background-position: calc(100% * 4 / 6) calc(100% * 4 / 5); }
.rx-duck { background-position: calc(100% * 5 / 6) calc(100% * 4 / 5); }
.rx-pretzel { background-position: 100% calc(100% * 4 / 5); }
.rx-sparkleheart { background-position: 0 100%; }
.rx-salute { background-position: calc(100% * 1 / 6) 100%; }
.rx-muscle { background-position: calc(100% * 2 / 6) 100%; }
.rx-facepalm { background-position: calc(100% * 3 / 6) 100%; }
.rx-skull { background-position: calc(100% * 4 / 6) 100%; }
.rx-poop { background-position: calc(100% * 5 / 6) 100%; }
.rx-like { background-position: 100% 100%; }