/*
 * Language bar (fragments/publicLayout :: flags): one link per language with the flag (.flag-icon, flag-icon.css)
 * and the language code (.wr-flag-code, hidden in the standard set). This file is the standard set of the app.
 * Another set is a stylesheet in this folder (<set>.css, compact: <set>-compact.css), imported by the house style
 * stylesheet of the company or installation (StyleKey.PUB_FLAGS / FRONT_FLAGS, CompanyStyleService.flagImport).
 * Text colour: white on the photo (phone pages), the text colour on the white panel of the pages without login.
 * --wr-flags-active-text: text on a filled (active) item, which has the text colour as background: the colour behind
 * the bar (the colour layer over the photo, or the panel).
 * --wr-flags-tint: colour of the pills, borders and the filled item: the text colour on the photo, the brand colour of
 * the house style on the white panel.
 */
.wr-flags {
    color: var(--wr-public-text, #ffffff);
    --wr-flags-tint: var(--wr-public-text, #ffffff);
    --wr-flags-active-text: var(--wr-overlay-color, #00448b);
}

.wr-front-panel .wr-flags, .wr-flags.wr-flags-panel {
    color: var(--wr-text, #212529);
    --wr-flags-tint: var(--wr-brand, #0161bd);
    --wr-flags-active-text: var(--wr-front-panel, #ffffff);
}

.wr-flags .wr-flag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: inherit;
    line-height: 1;
    text-decoration: none;
}

/* flag-icon.css sizes them in em, which grows inside a flex row */
.wr-flags .flag-icon {
    width: 2rem;
    height: 1.5rem;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4);
}

.wr-flags .wr-flag-code {
    display: none;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
}