.fof-file-manager-modal {
    .fof-modal-buttons {
        @media screen and (min-width: 768px) {
            position: absolute;
            right: 10px;
            top: 22px;
            z-index: 1;
        }

        @media screen and (max-width: 768px) {
            left: unset;
            right: 0;
        }

        // Show full content on desktop
        @media screen and (min-width: 767px) {
            .Button.fof-upload-button {
                width: auto;
                padding: 8px 13px;

                @media screen and (min-width: 767px) {
                    margin-right: 10px;
                }

                .Button-icon {
                    margin-right: 7px;
                }

                .Button-label {
                    display: inline-block;
                }
            }
        }

        // Hide attach button label
        @media screen and (max-width: 767px) {
            .fof-upload-button:not(.uploading) {
                .Button-icon {
                    margin: 0;
                }

                .Button-label {
                    display: none;
                }
            }
        }
    }

    .fof-drag-and-drop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--control-bg-fade-90);
        z-index: 5;
        transition: opacity 150ms ease-in-out;
        pointer-events: none;
        opacity: 0;

        .fof-drag-and-drop-release {
            position: absolute;
            top: 50%;
            text-align: center;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            font-size: 30px;

            > i {
                display: block;
                margin-bottom: 20px;
                font-size: 75px;
            }
        }
    }

    .Modal-content.fof-upload-dragging,
    .Modal-content.fof-upload-dropping {
        .fof-drag-and-drop {
            opacity: 1;
        }
    }

    .Modal-body {
        max-height: 500px;
        overflow: auto;
    }

    .Modal-footer {
        text-align: right;

        .Button {
            margin-left: 10px;
        }
    }

    // Full screen on mobile devices: the header and footer keep their natural
    // height and the file list takes whatever is left, so the footer stays on
    // screen whatever the header holds. dvh follows the browser's toolbars,
    // where 100vh is the viewport with them hidden (iOS Safari).
    @media screen and (max-width: 767px) {
        .Modal-content {
            display: flex;
            flex-direction: column;
            height: 100vh;
            height: 100dvh;
        }

        .Modal-header,
        .Modal-alert,
        .Modal-footer {
            flex-shrink: 0;
        }

        .Modal-body {
            flex: 1 1 auto;
            min-height: 0;
            max-height: none;
            overscroll-behavior: contain;
        }

        .Modal-footer {
            padding-bottom: ~"calc(20px + env(safe-area-inset-bottom, 0px))";
        }
    }
}

.LibrarySelection {
    display: grid;
    // 2 cols
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: -25px; // Padding of Modal-header
    margin-left: -25px;
    margin-right: -25px;
    padding-top: 25px;

    // The phone Modal-header has no padding to cancel out
    @media screen and (max-width: 767px) {
        gap: 10px;
        margin: 0;
        padding: 10px 15px;
    }
}


[data-theme^=light] {
  --control-bg-fade-90: fade(@control-bg-light, 90%);
}
[data-theme^=dark] {
  --control-bg-fade-90: fade(@control-bg-dark, 90%);
}