/*
Mailto Link Text Replacement

Replace mailto link rendered text with virtual text from data-attributes

Styleguide Tools.Mixins.MailtoTextReplace
*/

@import url("../components/c-button.selectors.css");

/* To replace actual link text with generated link text */
/* !!!: A user can not navigate to such a link with tab key */
/* TODO: Deprecate this (or fix accessibility issue) */
%x-mailto-text-replace {
    &:not(:--c-button) {
        /* FAQ: Using `display: none` would hide pseudo element text */
        visibility: hidden; /* to hide actual link text */
        font-size: 0; /* to remove space of hidden text */
        /* CAVEAT: The `font-size: 0` causes underline to be too high */
        /* HACK: So push underline down */
        text-underline-offset: 0.3rem;

        &::before {
            display: inline;
            content: attr(data-user) "@" attr(data-domain);
            font-size: initial; /* to restore font size */
            visibility: visible; /* to restore visibility */
        }
    }
}