/*
  Idea borrowed from Gwern https://www.gwern.net/static/css/default.css
*/


/*
    https://github.com/leungwensen/svg-icon
    TODO icons here? https://github.com/leungwensen/svg-icon/tree/master/dist/svg/simple
    https://leungwensen.github.io/svg-icon/#simple

    these look kinda cool too? https://evil-icons.io/
*/


/* sadly, that doesn't work for svg within url */
/* svg path { fill: #ff0000; } */

/*
   https://stackoverflow.com/a/46904983/706389 the mask-image trick seems to be reasonable way of coloring icons...
   not sure if base64 encoding worth it?
   one minor annoyance is that link underlining doesn't cover the icon. Gwern gets around it by using image for underlining.
*/


/* background-repeat: no-repeat; */
/* background-size: 0.75em; */
/* background-position: right 1px top; */

/*
   ugh. sadly pseudoelements can't be nested...
   https://stackoverflow.com/questions/9007546/nesting-pseudo-elements-inside-pseudo-elements/9007628#9007628
*/

main a[href$=".pdf"]::after {
    content: "";
    opacity: 0.85;

    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;

    width: 0.85em;
    height: 0.75em;
    display: inline-block;
    vertical-align: top;

    margin-left: 0.1em;

    -webkit-mask-image: url('../images/links/file-pdf.svg');
            mask-image: url('../images/links/file-pdf.svg');

    background-color: var(--link-color);
}
main a[href$=".pdf"]:visited::after {
    background-color: var(--visited-link-color);
}
main a[href*="wikipedia.org/wiki/"]::after {
    content: "";
    opacity: 0.85;

    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;

    width: 0.85em;
    height: 0.75em;
    display: inline-block;
    vertical-align: top;

    margin-left: 0.1em;

    -webkit-mask-image: url('../images/links/wikipedia.svg');
            mask-image: url('../images/links/wikipedia.svg');

    background-color: var(--link-color);
}
main a[href*="wikipedia.org/wiki/"]:visited::after {
    background-color: var(--visited-link-color);
}
main a[href*="github.com"]::after {
    content: "";
    opacity: 0.85;

    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;

    width: 0.85em;
    height: 0.75em;
    display: inline-block;
    vertical-align: top;

    margin-left: 0.1em;

    -webkit-mask-image: url('../images/links/github.svg');
            mask-image: url('../images/links/github.svg');

    background-color: var(--link-color);
}
main a[href*="github.com"]:visited::after {
    background-color: var(--visited-link-color);
}
main a[href*="reddit.com"]::after {
    content: "";
    opacity: 0.85;

    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;

    width: 0.85em;
    height: 0.75em;
    display: inline-block;
    vertical-align: top;

    margin-left: 0.1em;

    -webkit-mask-image: url('../images/links/reddit.svg');
            mask-image: url('../images/links/reddit.svg');

    background-color: var(--link-color);
}
main a[href*="reddit.com"]:visited::after {
    background-color: var(--visited-link-color);
}
main a[href*="stackexchange.com"]::after {
    content: "";
    opacity: 0.85;

    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;

    width: 0.85em;
    height: 0.75em;
    display: inline-block;
    vertical-align: top;

    margin-left: 0.1em;

    -webkit-mask-image: url('../images/links/stack-exchange.svg');
            mask-image: url('../images/links/stack-exchange.svg');

    background-color: var(--link-color);
}
main a[href*="stackexchange.com"]:visited::after {
    background-color: var(--visited-link-color);
}
main a[href*="youtube.com"]::after ,
main a[href*="youtu.be"]::after {
    content: "";
    opacity: 0.85;

    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;

    width: 0.85em;
    height: 0.75em;
    display: inline-block;
    vertical-align: top;

    margin-left: 0.1em;

    -webkit-mask-image: url('../images/links/youtube.svg');
            mask-image: url('../images/links/youtube.svg');

    background-color: var(--link-color);
}
main a[href*="youtube.com"]:visited::after ,
main a[href*="youtu.be"]:visited::after {
    background-color: var(--visited-link-color);
}
main a[href$=".png"]::after ,
main a[href$=".jpg"]::after {
    content: "";
    opacity: 0.85;

    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;

    width: 0.85em;
    height: 0.75em;
    display: inline-block;
    vertical-align: top;

    margin-left: 0.1em;

    -webkit-mask-image: url('../images/links/image.svg');
            mask-image: url('../images/links/image.svg');

    background-color: var(--link-color);
}
main a[href$=".png"]:visited::after ,
main a[href$=".jpg"]:visited::after {
    background-color: var(--visited-link-color);
}