.gallery-overlay {
    position: fixed;
    inset: 0;
    z-index: 300000;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #c7d1db;
    background: #22272b;
    outline: none;

    &[hidden] {
        display: none;
    }

    &.gallery-zoomable .gallery-stage {
        margin-bottom: 0;
    }

    &.gallery-controls-hidden {
        .gallery-header,
        .gallery-footer,
        .gallery-zoom-level,
        .gallery-arrow {
            opacity: 0;
            pointer-events: none;
        }
    }

    .gallery-header {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 56px;
        padding: 8px 24px;
        transition: opacity 0.2s ease-out;
    }

    .gallery-header-left {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .gallery-file-icon {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;

        svg {
            width: 32px;
            height: 32px;
        }
    }

    .gallery-file-text {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .gallery-file-name {
        margin: 0;
        font-size: 14px;
        font-weight: 500;
        color: #c7d1db;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gallery-file-meta {
        font-size: 14px;
        font-weight: 500;
        color: #c7d1db;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gallery-header-right {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        gap: 4px;
    }

    .gallery-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        font-weight: 500;
        color: #c7d1db;
        background: transparent;
        border: 0;
        border-radius: 3px;
        cursor: pointer;

        &:hover {
            background: #a1bdd914;
        }

        &:active {
            background: #a6c5e229;
        }

        &:focus-visible {
            outline: 2px solid var(--ds-border-focused);
            outline-offset: 2px;
        }

        &:disabled {
            background: transparent;
            opacity: 0.4;
            cursor: default;
        }

        &[hidden] {
            display: none;
        }
    }

    .gallery-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        transition:
            opacity 0.2s ease-out,
            background 0.1s ease-out;

        &.gallery-arrow-left {
            left: 16px;
        }

        &.gallery-arrow-right {
            right: 16px;
        }
    }

    .gallery-stage {
        position: relative;
        flex: 1;
        min-height: 0;
        margin: 0 72px 56px;
    }

    .gallery-slide-media {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: safe center;
        justify-content: safe center;
        overflow: auto;

        &[hidden] {
            display: none;
        }
    }

    .gallery-media {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .gallery-image {
        display: block;
        box-sizing: border-box;
        max-width: none;
        max-height: none;
        object-fit: initial;
        transition:
            width 0.12s ease,
            height 0.12s ease;

        &.gallery-image-drawio {
            padding: 12px;
            background: #ffffff;
        }

        &.gallery-image-loading {
            display: none;
        }
    }

    .gallery-spinner {
        width: 48px;
        height: 48px;
        animation: gallery-spin 0.8s linear infinite;

        circle {
            fill: none;
            stroke: #c7d1db;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-dasharray: 12 32;
        }
    }

    .gallery-audio {
        width: min(480px, 90%);
    }

    .gallery-iframe-host {
        position: absolute;
        inset: 0;

        &[hidden] {
            display: none;
        }
    }

    .gallery-iframe {
        display: none;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 4px;

        &.gallery-iframe-active {
            display: block;
        }
    }

    .gallery-footer {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: 48px;
        padding: 0 24px 8px;
        transition: opacity 0.2s ease-out;

        &[hidden] {
            display: none;
        }
    }

    .gallery-zoom-level {
        position: absolute;
        right: 24px;
        bottom: 8px;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        font-size: 14px;
        font-weight: 400;
        color: #c7d1db;
        transition: opacity 0.2s ease-out;

        &[hidden] {
            display: none;
        }
    }

    .gallery-fallback-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 32px 48px;
        color: #c7d1db;
        background: var(--ds-surface-overlay);
        border-radius: 8px;
        box-shadow: var(--ds-shadow-overlay);

        .gallery-fallback-icon svg {
            width: 48px;
            height: 48px;
        }

        .gallery-fallback-name {
            max-width: 360px;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .gallery-fallback-size {
            font-size: 12px;
            color: #c7d1db;
        }

        .gallery-fallback-download {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 8px;
            padding: 6px 12px;
            color: var(--ds-text-inverse);
            background: var(--ds-background-brand-bold, #0c66e4);
            border: none;
            border-radius: 4px;
            cursor: pointer;

            &:hover {
                background: var(--ds-background-brand-bold-hovered, #0055cc);
            }
        }
    }
}

@keyframes gallery-spin {
    to {
        transform: rotate(360deg);
    }
}