.safi-image-gallery-wrap {
    position: absolute;
    z-index: 9999;
    top: 0;
    bottom: 0;
    // right: calc(100% + 1px);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    box-shadow: -20px 0px 30px 0px #1e1d1e80;
    background-color: $col-dark;

    // &.panel-image-gallery {
    //     position: fixed;
    //     inset: 5px;
    //     top: calc(5px + var(--safi-header-height));
    //     // width: calc(100% - 10px);
    //     width: calc(100% - var(--safi-sidebar-width) - 11px);
    //     height: calc(100% - 10px - var(--safi-header-height));
    // }

    &.panel-image-gallery {
        position: fixed;
        inset: 5px;
        width: calc(100% - 10px - var(--safi-sidebar-width));
        height: calc(100% - 10px);
    }

}

.safi-image-galleries {
    display: flex;
    gap: 1px;
    /* background-color: #4e4d4e; */
    position: absolute;
    left: calc(var(--safi-sidebar-width) + 1px);
    right: 0;
    top: 0;
    bottom: 0;
}

.safi-image-gallery {
    background-color: $col-dark;
    height: 100%;
    width: 100%;
}

.safi-image-gallery-images {
    height: calc(100% - 60px);
    overflow-y: auto;
}

.safi-image-gallery-header {
    height: 60px;
    // background-color: $col-dark-sidebar;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    box-sizing: border-box;
    color: white;

    h3 {
        color: white;
    }

    a {
        color: $col-accent-light;

        &:hover {
            color: $col-accent;
        }
    }
}

#safi-image-zoom {
    z-index: 1;
    cursor: zoom-out;
    // transition: all 0.3s ease-in-out;
    pointer-events: none;
    visibility: hidden;
    // transform: scale(1.2);
    background-color: #000000aa;
    backdrop-filter: blur(4px);

    &.--show {
        pointer-events: all;
        visibility: visible;
    }

    img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
}

#safi-preview-wrap{
    .safi-image-gallery-wrap.panel-image-gallery {
        left: calc(var(--safi-sidebar-width) + 5px);
    }
}