/* NotoEmoji webfont — same glyphs the labelsystem renderer emits, so the
 * picker preview matches what prints. Monochrome outlines inherit
 * currentColor, making dark mode automatic without any extra rules.
 * WOFF2-only (~1 MB vs 1.9 MB TTF); regenerate via scripts/build_emoji_webfont.py.
 *
 * unicode-range restricts the browser to using this font ONLY for emoji
 * codepoints. Critically, that excludes U+0020 (space) — NotoEmoji has a
 * space glyph with emoji-sized metrics that would otherwise blow up the
 * spacing in any input we apply NotoEmoji to. It also keeps lazy-loading
 * crisp: browser doesn't download NotoEmoji until an actual emoji
 * codepoint appears. */
@font-face {
    font-family: "NotoEmoji";
    src: url("/static/fonts/NotoEmoji-Regular.woff2") format("woff2");
    font-display: swap;
    unicode-range:
        U+200D, U+20E3, U+FE0E-FE0F,            /* ZWJ, keycap, variation selectors */
        U+2300-27BF,                            /* misc symbols, dingbats, ⭐ neighbours */
        U+2900-29FF, U+2B00-2BFF,               /* arrows, geometric shapes */
        U+3030, U+303D, U+3297, U+3299,         /* CJK-block emoji */
        U+1F000-1FFFF;                          /* the bulk of modern emoji */
}

/* Apply NotoEmoji as the first-choice font on every customize text field so
 * emoji rendered in the input match the NotoEmoji glyphs that actually
 * print. Latin text has no coverage in NotoEmoji (and the unicode-range
 * above gates space + ASCII out), so it falls through to the body font
 * for anything non-emoji. !important because wa-input's shadow-DOM `input`
 * declares `font-family: inherit` via a rule whose cascade position lands
 * above a non-layered ::part() rule otherwise. */
wa-input[data-field-input]::part(input) {
    font-family: "NotoEmoji", var(--wa-font-family-body) !important;
    font-variant-emoji: text;
}

/* Trigger button — icon-only wa-button at the right edge of the heading
 * input's end slot. Zero-out wa-button's inline padding so the button is
 * only as wide as the icon itself, and flex-center the icon inside so it
 * sits dead-centre both axes. Quiet tone so the trigger reads as a
 * secondary affordance against the field's text. */
.emoji-trigger-button::part(base) {
    --padding-inline: 0;
    min-inline-size: auto;
    color: var(--wa-color-text-quiet);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.emoji-trigger-button:hover::part(base),
.emoji-trigger-button:focus-visible::part(base) {
    color: var(--wa-color-text-normal);
}

wa-input[data-field-input]::part(end) {
    padding-inline-end: var(--wa-space-2xs);
}

.emoji-trigger-icon {
    display: block;
    inline-size: 24px;
    block-size: 24px;
    background-color: currentColor;
    -webkit-mask: url("/static/img/emoji-smiley.svg") center/contain no-repeat;
    mask: url("/static/img/emoji-smiley.svg") center/contain no-repeat;
}

/* Popover-over-popover / popover-over-dialog distinction — raise the
 * elevation so the picker reads as floating above the surface behind it.
 * WA's surface-raised auto-adapts in dark mode. Default --max-width is
 * 25rem which isn't enough once the body's own 24px×2 padding is counted
 * against a 22rem content min-width — bumping to 28rem gives the search
 * input room to breathe against the popover's right edge. */
.emoji-picker-popover {
    --max-width: 28rem;
}
.emoji-picker-popover::part(body) {
    background-color: var(--wa-color-surface-raised);
    box-shadow: var(--wa-shadow-l, 0 12px 32px rgba(0, 0, 0, 0.18));
}

/* Inline hint shown above the popular set — tells users there's more
 * available via search rather than by scrolling. Spans the full grid width
 * so it sits neatly above the tile rows. */
.emoji-picker-hint {
    grid-column: 1 / -1;
    color: var(--wa-color-text-quiet);
    font-size: 0.8125rem;
    padding: var(--wa-space-2xs) var(--wa-space-xs);
    border-bottom: 1px solid var(--wa-color-surface-border);
    margin-block-end: var(--wa-space-2xs);
}

/* Results grid — auto-fill with fixed-width cells so a short result set
 * (e.g. 3 matches for "tree") keeps the same tile size as the popular
 * view instead of stretching each tile to 1/3 of the popover width. */
.emoji-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, 36px);
    justify-content: space-between;
    gap: 2px;
    max-height: 18rem;
    overflow-y: auto;
    padding: var(--wa-space-2xs);
    /* Hint at scrollability — the last row fades when content overflows. */
    mask-image: linear-gradient(to bottom, black calc(100% - 1.25rem), transparent);
}

.emoji-tile {
    font-family: "NotoEmoji", system-ui, sans-serif;
    /* Force text-style (monochrome) emoji presentation — browsers default to
     * the OS emoji font for Emoji_Presentation codepoints regardless of
     * font-family, which showed half-Apple, half-Noto glyphs in the grid. */
    font-variant-emoji: text;
    font-size: 24px;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: var(--wa-border-radius-s);
    padding: 6px 0;
    cursor: pointer;
    text-align: center;
    color: inherit;
    inline-size: 36px;
    block-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-tile:hover,
.emoji-tile:focus-visible {
    background: var(--wa-color-neutral-fill-quiet);
}

.emoji-empty {
    grid-column: 1 / -1;
    color: var(--wa-color-text-quiet);
    font-size: 0.875rem;
    text-align: center;
    padding: var(--wa-space-s);
}