$file-preview-controller-text-color: #ffffff;

.dbq-file-preview-controller {
    position: absolute;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    cursor: zoom-in;

    .dbqfpc-header,
    .dbqfpc-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 48px;
        padding: 0;
        gap: 8px;

        button {
            @include button(transparent, $file-preview-controller-text-color, transparent, $color-primary, transparent, transparent);
            outline: 0;

            &.dbqfpc-close-button {
                svg {
                    width: 36px;
                    height: 36px;
                }
            }
        }

        .dbqfpc-toolbar {
            display: flex;
            align-items: center;
            padding: 0 $padding-default;
            color: $file-preview-controller-text-color;
        }
    }

    .dbqfpc-stage {
        height: calc(100% - 96px); // 96 is 48 times 2 to make room for the header and footer
        padding: 16px;
        overflow: hidden;

        @include scrollbar;
    }

    &.dbqfpc-is-zoomed .dbqfpc-stage {
        overflow: auto;
    }

    .dbqfpc-preview-container {
        width: 100%;
        height: 100%;
    }

    .dbqfp-image-preview-container {
        width: 100%;
        height: 100%;
    }

    .dbqfp-image-preview {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain;
        user-select: none;
        transform-origin: center center;
        display: block;
    }

    &.dbqfpc-is-zoomed .dbqfp-image-preview {
        width: auto !important;
        height: auto !important;

        object-fit: unset;
        max-width: none !important;
        max-height: none !important;
    }

    &.dbqfpc-is-zoomed {
        cursor: zoom-out;
    }

    &.dbqfpc-is-panning {
        cursor: grabbing;
    }

    .dbqfpc-stage,
    .dbqfpc-preview-container,
    .dbqfp-image-preview-container,
    .dbqfp-image-preview {
        cursor: inherit;
    }
}