/*	
--------------------------------------------------
BSN CSS
-------------------------------------------------- 
*/

:root {
    --halftone-size: 8px;
    --halftone-rotation: 50;
    --halftone-color-dot-size: calc(var(--halftone-size)* var(--halftone-bleed));    
    --halftone-bleed: 0.35;
    --halftone-separate-k: 4;
}

/*#region BSN Grayscale*/

.bl-grayscale-25 * img {
    filter: brightness(1.3) grayscale(0.25);
}
.bl-grayscale-50 * img {
    filter: brightness(1.3) grayscale(0.5);
}
.bl-grayscale-75 * img {
    filter: brightness(1.3) grayscale(0.75);
}
.bl-grayscale-100 * img {
    filter: brightness(1.3) grayscale(1);
}
/*#endregion*/

/*#region BSN Halftone*/
.bl-halftone:not(.bl-grayscale-25, .bl-grayscale-50, .bl-grayscale-75, .bl-grayscale-100) * img {
    filter: brightness(1.3);
}

.bl-halftone {
    filter: brightness(calc(0.5 + var(--halftone-bleed)* 0.3 - var(--halftone-separate-k)* 0.02)) blur(calc(var(--halftone-size)* 0.1)) contrast(100) blur(0.6px);
    overflow: hidden;
}

.bl-halftone-ink::after {
    content: "";
    position: absolute;
    inset: -100%;
    background-size: var(--halftone-size) var(--halftone-size);
    background-blend-mode: multiply;
    mix-blend-mode: screen;
    overflow: hidden;
    transform: rotate(30deg);
    background-image: radial-gradient(var(--halftone-color-dot-size) at 25% 25%, #000, #666, #ccc, #fff), radial-gradient(var(--halftone-color-dot-size) at 75% 75%, #000, #fff);
}

/*#endregion*/