@layer site {
    a:where(.site-icon) {
        /* Set this in your styles */
        --icon-link-color: var(--neutral-color);
        background-color: var(--icon-link-color);

        &:hover {
            background-color: color-mix(in srgb, var(--icon-link-color), black 15%);
        }
    }

    :where(.site-icon) {
        /* Set this in your styles */
        --site-icon-size: 1rem;
        --site-icon-w: var(--site-icon-size);
        --site-icon-h: var(--site-icon-size);
        background-color: lightcoral;
        width: var(--site-icon-w);
        height: var(--site-icon-h);
        mask-size: cover;

        &:where(.instagram) {
            mask-image: url(/icons/instagram.svg);
        }

        &:where(.telegram) {
            mask-image: url(/icons/telegram.svg);
        }

        &:where(.whatsapp) {
            mask-image: url(/icons/whatsapp.svg);
        }

        &:where(.location) {
            mask-image: url(/icons/location.svg);
        }

        &:where(.info) {
            mask-image: url(/icons/info.svg);
        }

        &:where(.link-external) {
            mask-image: url(/icons/link-external.svg);
        }
    }

    span.site-icon {
        display: inline-block;
        transform: translate(3px, 1px);
        background-color: var(--text-color);
    }
}