/**
 * Social icons that are not part of the subsetted TypoFontAwesome webfont.
 *
 * The parent theme module TypoModules/TypoFontAwesome only ships a subset of
 * FontAwesome (m/p/a/f/i/l/t/w/Y/x/q/r). Classes without a glyph in that subset
 * — such as .tfa-tiktok — produce an empty <i> and stay invisible in the
 * frontend. Instead of rebuilding the shared parent-theme font we render the
 * missing icons as an SVG mask so they inherit font-size and currentColor
 * exactly like the font glyphs do.
 *
 * Icon artwork: Font Awesome Free 6 "tiktok" (brands), CC BY 4.0,
 * https://fontawesome.com/license/free
 *
 * Ticket: TIS-76
 */

.typo_icon.tfa-tiktok:before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448 209.9a210.1 210.1 0 0 1-122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3v89.9a74.6 74.6 0 1 0 52.2 71.2V0h88a121.2 121.2 0 0 0 1.9 22.2A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448 209.9a210.1 210.1 0 0 1-122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3v89.9a74.6 74.6 0 1 0 52.2 71.2V0h88a121.2 121.2 0 0 0 1.9 22.2A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}