@keyframes FadeInDisplayFlexNone {
    0% { display: none; opacity: 0; }
    1% { display: flex; opacity: 0; }
    100% { opacity: 1; }
}

@keyframes FadeOutDisplayFlexNone {
    0% { display: flex; opacity: 1; }
    99% { display: flex; opacity: 0; }
    100% { display: none; opacity: 0; }
}

.gallery-item {
    position: relative;
    width: 100%;
    border: 1px solid var(--gray-200);
    background-color: rgba(0,0,0,.07);
    .square-tile-content {
        cursor: pointer;
        aspect-ratio: 1; /* Make sure the block is always at least square size (1/1 ratio) */
    }
    > * {
        position: relative;
    }
    a[data-fancybox="gallery"] {
        text-decoration: initial;
    }
    .bg-image-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .gallery-tile-content {
        position: relative;
        display: grid;
        grid-template-rows: auto 1fr auto;
        width: 100%;
        min-height: 100%;
        overflow: hidden;
        align-items: center;
    }
    .gallery-tile-middle {
        display: block; /* Fixes "word-wrap: break-word;" for elements inside */
        width: 100%;
        .description {
            max-width: 100%;
            text-align: center;
            overflow: hidden;
            word-wrap: break-word;
        }
    }
    .gallery-tile-action-overlay {
        align-items: center;
        justify-content: center;
        position: absolute;
        min-width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none; /** Important to keep "display: none" for Symfony Turbo loading="lazy" to work properly */
        animation: FadeOutDisplayFlexNone 500ms ease;
        z-index: 1;
    }
    .file-type-badge {
        color: var(--text-color);
        border: 1px solid var(--gray-200);
        background-color: var(--blue-100);
        padding: .2rem .5rem;
        border-radius: var(--bs-border-radius);
    }
    &.is-hidden-file {
        &:after {
            display: flex;
            align-items: center;
            justify-content: center;
            content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' width='2.5rem' height='2.5rem' viewBox='0 0 640 512'><path fill='white' d='M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2s-6.3 25.5 4.1 33.7l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7l-105.2-82.4c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5zm205.1 160.8l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16h2c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2m9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8l-37.7-29.7c-22.8 29.7-39.1 59.3-48.6 82.2c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1c47 43.8 111.7 80.6 192.5 80.6c47.8 0 89.9-12.9 126.2-32.5zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z'/></svg>");
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            margin: auto;
            text-align: center;
            background-color: rgba(255, 0, 0, .5);
            pointer-events: none;
            opacity: .5;
        }
        &:hover:after {
            content: '';
            opacity: .25;
        }
    }
}

.file-action-overlay-buttons {
    min-width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .15rem;
}

.square-tile-content:hover .gallery-tile-action-overlay {
    display: flex;
    animation: FadeInDisplayFlexNone 500ms ease;
}

body.is-scrolling .square-tile-content {
    /**
     * Prevent unnecessary backend ajax calls when just scrolling (and hovering over file blocks)
     */
    pointer-events: none;
}