/*
    New tab icon decorator.
    <a class="tv-with-new-tab-icon"> - text link with the icon after the last word.
    <a class="tv-button tv-with-new-tab-icon">, <a class="wp-block-button__link tv-with-new-tab-icon"> - button with the icon.
    The class is added automatically by blocks/link/link.php to external links in post content
    and can be added manually in templates: then it only draws the icon, write target="_blank" in the markup yourself
    (the filter runs only on post content), and dir="auto" for tv-button so the icon follows the text direction.
    The icon rules target <a> elements only.
*/

/*
    RTL pages: without bidi rules the empty ::after takes the paragraph direction
    and detaches from Latin link text. Both rules are needed (verified in Chromium):
    plaintext on the link resolves its direction from the first strong character
    of the link text, isolate on ::after makes the icon a neutral inside that direction,
    so the icon follows the last word in both Latin and Arabic/Hebrew links.
    The ::after content is a no-break space, not an empty string: an empty isolate at the end
    of a line is reset to the paragraph level by UAX#9 rule L1 and jumps before the first word
    when the link is the last one in a block and its direction is opposite to the page.
    NBSP is not whitespace for L1 and adds no line break opportunity; with font-size 0 it has no width.
*/
a.tv-with-new-tab-icon:not(.tv-button) {
    unicode-bidi: plaintext;
}

a.tv-with-new-tab-icon::after {
    content: '\A0';
    /* empty alt text keeps the NBSP out of the link accessible name; older browsers drop this declaration and use the one above */
    content: '\A0' / '';
    /*
        Non-atomic inline box: it adds no line break opportunity,
        so the icon never wraps away from the last word.
        Zero font-size and line-height put its content box on the baseline.
        Figma 20pt/24pt text-link rows: 28px icon with a 16px glyph and 6px built-in padding
        (the padding is the gap to the text), the glyph bottom sits on the text baseline.
        The box is 28px wide and only as tall as the glyph (16px above the baseline), the 28px mask
        is shifted up by its 6px padding (glyph rows 6..22 fill the box exactly), so the focus outline
        stays flat at the text height. The far side keeps its 6px: the icon side follows the text
        direction (plaintext), while logical properties of ::after follow the page direction.
        --tv-new-tab-icon is a data URI of new-tab-28.svg printed inline by blocks/link/link.php:
        mask images are fetched in CORS mode and a url() to the file fails when static is on another host.
    */
    display: inline;
    unicode-bidi: isolate;
    font-size: 0;
    line-height: 0;
    padding-block: 16px 0;
    padding-inline: 28px 0;
    background-color: currentColor;
    -webkit-mask: var(--tv-new-tab-icon) center -6px / 28px 28px no-repeat;
    mask: var(--tv-new-tab-icon) center -6px / 28px 28px no-repeat;
}

/*
    18px/28px text in post content (Figma text-link 18pt row): 18px icon with a 12px glyph
    and 3px built-in padding, 1px gap between the text and the icon frame,
    the glyph bottom sits on the text baseline; the box is only as tall as the glyph (12px above the baseline),
    the 18px mask is shifted up by its 3px padding.
    Contexts: table cells, captions, quote citations, definition lists and paragraphs of pages
    (posts have 20px/30px paragraphs and 20px list items, they keep the 28px icon).
*/
.entry-content :is(td, th, figcaption, cite, dt, dd) a.tv-with-new-tab-icon:not(.tv-button):not(.wp-block-button__link)::after,
:not(.single-article) > .entry-content p a.tv-with-new-tab-icon:not(.tv-button):not(.wp-block-button__link)::after {
    margin-inline-start: 1px;
    padding-block: 12px 0;
    padding-inline: 18px 0;
    -webkit-mask: var(--tv-new-tab-icon-button) center -3px / 18px 18px no-repeat;
    mask: var(--tv-new-tab-icon-button) center -3px / 18px 18px no-repeat;
}

/*
    tv-button: flex layout, the 18px icon (Figma Square button, --tv-new-tab-icon-button from new-tab-18.svg),
    4px gap, centered; the icon color comes from the base ::after rule.
*/
.tv-button.tv-with-new-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.tv-button.tv-with-new-tab-icon::after {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    -webkit-mask: var(--tv-new-tab-icon-button) center / 18px 18px no-repeat;
    mask: var(--tv-new-tab-icon-button) center / 18px 18px no-repeat;
}

/*
    Gutenberg button: the link keeps its own display, so height, text position and focus outline
    stay the same as without the icon in any locale and font size. The icon uses the inline
    mechanism of text links with the 18px icon: the glyph bottom sits on the baseline
    (box bottom 3px below it, glyph 3..15 of 18), 4px gap between the text and the icon frame
    (Figma Square button), the icon follows the last word when the text wraps.
*/
.wp-block-button__link.tv-with-new-tab-icon::after {
    margin-inline-start: 4px;
    padding-block: 15px 3px;
    padding-inline: 18px 0;
    -webkit-mask: var(--tv-new-tab-icon-button) center / 18px 18px no-repeat;
    mask: var(--tv-new-tab-icon-button) center / 18px 18px no-repeat;
}

/*
    Forced colors (Windows high contrast): background-color: currentColor is forced to Canvas
    and the icon disappears, so the icon is drawn with the system link color.
*/
@media (forced-colors: active) {
    a.tv-with-new-tab-icon::after {
        forced-color-adjust: none;
        background-color: LinkText;
    }
}