/**
 * emoji.css
 * Self-contained emoji rendering stylesheet.
 *
 * Uses the same approach as GitHub: emojis are wrapped in a <g-emoji>
 * custom element that carries its own emoji-only font stack. This isolates
 * the emoji from surrounding non-emoji fonts such as "Google Sans Flex".
 *
 * The stylesheet loads Noto Color Emoji and supports standard Unicode emojis,
 * ZWJ sequences (family, profession, gender/race variants), flags, skin-tone
 * modifiers and non-standard custom image emojis.
 */

/* --------------------------------------------------------------------------
 * Font loading
 * -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Emoji:wght@300..700&display=swap');

/* --------------------------------------------------------------------------
 * Custom element registration (keeps the element displayable in all browsers)
 * -------------------------------------------------------------------------- */
g-emoji {
    display: inline-block;
}

/* --------------------------------------------------------------------------
 * Base emoji class
 * -------------------------------------------------------------------------- */
.g-emoji {
    /* Emoji-only font stack; mirrors GitHub's approach so the glyph is never
       taken from the surrounding text font (e.g. Google Sans Flex). */
    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Segoe UI",
        "Noto Color Emoji",
        "Noto Emoji",
        "Android Emoji",
        "EmojiSymbols",
        "EmojiOne Mozilla",
        sans-serif;

    font-style: normal !important;
    font-weight: 400;
    line-height: 1;
    text-align: center;

    min-width: 1ch;
    vertical-align: -0.075em;

    /* Ask the browser to render the character as an emoji glyph when ambiguous */
    font-variant-emoji: emoji;
    -webkit-font-variant-emoji: emoji;

    /* Prevent line breaks inside an emoji element */
    white-space: nowrap;
}

/* Render the emoji supplied via the data-emoji attribute */
.g-emoji::before {
    content: attr(data-emoji);
}

/* --------------------------------------------------------------------------
 * Rendering engines
 * -------------------------------------------------------------------------- */

/* Use the native OS emoji font stack */
.g-emoji-native {
    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Segoe UI",
        sans-serif;
}

/* Force Noto Color Emoji for maximum cross-platform consistency */
.g-emoji-noto {
    font-family: "Noto Color Emoji", "Noto Emoji", sans-serif;
}

/* --------------------------------------------------------------------------
 * Sizes
 * -------------------------------------------------------------------------- */
.g-emoji-xs  { font-size: 0.75rem; }
.g-emoji-sm  { font-size: 0.875rem; }
.g-emoji-md  { font-size: 1.25rem; }
.g-emoji-lg  { font-size: 2rem; }
.g-emoji-xl  { font-size: 3rem; }
.g-emoji-2xl { font-size: 4rem; }
.g-emoji-3xl { font-size: 6rem; }

/* --------------------------------------------------------------------------
 * Non-standard / custom emoji rendered from an image
 * -------------------------------------------------------------------------- */
.g-emoji-custom {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    vertical-align: middle;
    /* Image source is provided by the --emoji-bg CSS variable */
    background-image: var(--emoji-bg, none);
}

/* When a custom emoji is used, hide the text fallback */
.g-emoji-custom::before {
    content: none;
}

/* --------------------------------------------------------------------------
 * Utility modifiers
 * -------------------------------------------------------------------------- */
.g-emoji-rounded {
    border-radius: 50%;
}

.g-emoji-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.g-emoji-spin {
    animation: g-emoji-spin 2s linear infinite;
}

@keyframes g-emoji-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}