@layer site {
  a:where(.site-icon) {
    /* Set this in your styles */
    --icon-link-color: blue;
    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);
    --site-icon-color: red;
    background-color: var(--site-icon-color);
    width: var(--site-icon-w);
    height: var(--site-icon-h);
    mask-size: cover;

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

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

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

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