/**
 * @file
 * Use the US flag for English in the GTranslate language switcher.
 *
 * GTranslate draws every flag from a single sprite and derives each language's
 * offset from the order of the language list in GTranslateBlock::build(). English
 * is declared first, so it always lands on cell (0,0) -- which in the shipped
 * sprites (16.png / 24.png / 32.png) is the UK flag.
 *
 * The module also ships alt_flags.png and alt_flagsa.png: a 3x3 sprite of 100px
 * cells whose first column is the US flag, with one row per flag size. So the
 * fix is to repoint English's background-image at that sprite -- no change to
 * the contrib module is needed.
 *
 *   alt_flags(a).png offsets by configured GTranslate flag size:
 *     16px -> 0 0        (the module default, used below)
 *     24px -> 0 -100px
 *     32px -> 0 -200px
 *
 * The "a" variant is the muted resting flag (pairs with 16a.png); the plain
 * variant is the brighter hover flag (pairs with 16.png).
 *
 * !important is required throughout: GTranslate sets background-position in an
 * inline style attribute and background-image in an inline <style> block, so an
 * important author declaration is the only thing that reliably wins.
 */

/**
 * "Flags" and "Flags + dropdown" looks.
 */
.gtranslate a.gtflag[title="English"] {
    background-image: url("../../../contrib/gtranslate/gtranslate-files/alt_flagsa.png") !important;
    background-position: 0 0 !important;
}

.gtranslate a.gtflag[title="English"]:hover {
    background-image: url("../../../contrib/gtranslate/gtranslate-files/alt_flags.png") !important;
    background-position: 0 0 !important;
}

/**
 * "Dropdown with flags" look.
 *
 * Matching on the inline offset rather than the title is deliberate: the flag
 * span that GTranslate's JS clones into div.selected carries no title, and
 * English is the only language positioned at "-0px -0px".
 */
.gtranslate .switcher span.gflag[style*="-0px -0px"] {
    background-image: url("../../../contrib/gtranslate/gtranslate-files/alt_flags.png") !important;
    background-position: 0 0 !important;
}
