/*********************************************************
    Lazy loading - Airws
*********************************************************/

div:has([data-airws-src]) {
    position: relative;
}

@keyframes airws-l3 {
    to {
        transform: rotate(360deg)
    }
}

/*
.airws-lazy-loading-active {
    opacity: 0;
}

.airws-lazy-loaded {
    opacity: 1;
}*/

.airws-lazy-load-error {
    opacity: 0;
}

.airws-lazy-load-failed {
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
}

.airws-lazy-loading-active[data-airws-src] {
    filter: blur(10px);
    /* opacity: 0; */
    /* transform: scale(0.95); */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    transition-delay: .5s;
}

.airws-lazy-loaded[data-airws-src] {
    filter: blur(0);
    /* opacity: 1; */
    /* transform: scale(1); */
}

.airws-lazy-container {
    position: relative;
    overflow: hidden;
}

.airws-lazy-container:not(.airws-lazy-loaded):after {
    content: '';
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 50px !important;
    height: 50px !important;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--siniy);
    --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: airws-l3 1s infinite linear;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
    z-index: 10;
}

.airws-lazy-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}