/*
 * Local adjustments on top of the Tabler Icons and Tabler Flags stylesheets
 * from importmap.php. Load this after both of them.
 */

/*
 * Vertical centring. Tabler Icons 3 splits the font into subsets, each limited
 * by unicode-range, and none of them covers the space character. Browsers take
 * a line's height and baseline from the first face in the family that covers
 * U+0020, so with none they fall back to the default text font, whose metrics
 * put every glyph about 0.06em too high (3.5px in a 56px .avatar). This extra
 * face covers only the space, so the line metrics come from the icon font
 * again. "core" is the subset almost every page loads anyway.
 */
@font-face {
    font-family: "tabler-icons";
    font-style: normal;
    font-weight: 400;
    src: url("../vendor/@tabler/icons-webfont/dist/fonts/tabler-icons.core-p_IlBod.woff2") format("woff2");
    unicode-range: U+0020;
}

/*
 * Font icons inside an avatar. Tabler's ".avatar .icon" sizes the icon box to
 * --tblr-avatar-icon-size (24px, up to 48px on .avatar-xl), which an SVG fills,
 * but a font icon keeps the 20px .icon font-size with line-height: 1, so its
 * line sits at the top of the taller box. Make the line as tall as the box so
 * the glyph is centred in it, at the size it already has.
 */
.avatar .icon.ti {
    line-height: var(--tblr-avatar-icon-size);
}

/*
 * Filled icons. Since Tabler Icons 3 they live in a separate font, and the
 * upstream tabler-icons-filled.css can't be loaded next to the outline set:
 * it redefines .ti itself, which would switch every icon on the page to the
 * filled font. importmap.php still requires it, only so its fonts get
 * downloaded into assets/vendor; it is never linked. Only the glyphs the app
 * uses are mapped here, and they all live in the "core" subset.
 */
@font-face {
    font-family: "tabler-icons-filled";
    font-style: normal;
    font-weight: 400;
    src: url("../vendor/@tabler/icons-webfont/dist/fonts/tabler-icons-filled.core-4_qF181.woff2") format("woff2");
}

.ti.ti-star-filled {
    font-family: "tabler-icons-filled" !important;
}

.ti-star-filled:before {
    content: "\f6a6";
}

/*
 * Flags 1.7 default to a fixed 2.5rem x 2rem box. The app shows flags inline
 * next to country names, so keep them sized to the surrounding text as before,
 * at the 5:4 ratio of the artwork. Mirrored in
 * templates/app/invoice/pdf/print.head.html.twig.
 */
.flag {
    width: 1.25em;
    height: 1em;
    vertical-align: -3px;
}