/**
 * 2026-09-25 JC
**/
	
@import url('/rsrc/js/library/fontawesome/pro-plus-7.2.0/css/all.css');
@import url('/rsrc/js/library/fontawesome/pro-plus-7.2.0/css/sharp-solid.css');
@import url('/rsrc/js/library/fontawesome/pro-plus-7.2.0/css/duotone.css');       
	
.wm_recImgLink {
	position: relative;
}

/* 1. Target both at once to ensure they stack perfectly */
.wm_recImgLink.imgLoading::before,
.wm_recImgLink.imgLoading::after {
	/* FontAwesome variables: */
	--_fa-family: var(--fa-family, var(--fa-style-family, 'Font Awesome 7 Pro'));
    font-family: var(--_fa-family);

    color: #333333;

    position: absolute;
    z-index: 1;
    padding: 0.25rem;
    font-size: 24px;
    width: 44px;
    height: 44px;
    /* To center the icons:*/
    display: flex;
    justify-content: center;
    align-items: center;
    /* To center the pseudo-elements onto the a / img box: */
    inset: 0;
    margin: auto;
    
    /* --- FYI: other ways to do it: --- */
    /* Centered on the middle of the image (if size (w/h) not fixed but dynamic, it works even if fixed but can generate a little blurry effect): */
  		/*
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease-in;
    */		    
    
    /* Other position: Top-Left corner with a little space: */
  		/*
  		top: 0.5rem;
  		left: 0.5rem;
  		*/
}

/* 2. Apply the "Badge" look to only ONE of them (usually before) */
.wm_recImgLink.imgLoading::before {
    background-color: #fff;
    border-radius: 50%;
    opacity: 0.5;
    /* Note: FontAwesome uses 'content' for the primary layer here */
    --fa-family: var(--fa-family-duotone);
	
	--fa: "\e4bb";
	content: var(--fa) / "";
}

/* 3. The ::after handles the second layer of the icon */
a.wm_recImgLink.imgLoading::after {
    background-color: transparent; /* Ensure no double background */
     opacity: 0.25;
    /* FontAwesome uses 'content' for the secondary layer here */
    --fa-family: var(--fa-family-duotone);

	--fa--fa: "\e4bb\e4bb";
	content: var(--fa--fa) / "";
}

.wm_recImgLink.imgLoading:hover::before {
    opacity: 0.75;
    filter: brightness(1.2);
  		transition: filter 0.2s ease;
}

.wm_recImgLink.imgLoading:hover::after {
    opacity: 0.5;
}