/*
 * Filename: _orientbox.scss
 * FullPath: modules/projects/fl.ui/src/styles/ui/_orientbox.scss
 * Reason for changes: Restore Veela viewport import (typo viewrt→interact/viewport) and fix stray brace after merge mess.
 */
@use "../interact/viewport" as *;

//
@layer layout {

    //
    .ui-orientbox {
        @include init-cs-size;
        @include compute_os_conditions;
        @include compute_cs_size_to_os;
        @include compute_from_os_to_cs;

        //
        & {
            --cs-size-x: 100cqi;
            --cs-size-y: 100cqb;

            //
            position: relative;
            container-type: size !important;
            contain: strict !important;
            background-color: transparent;
            inset: 0px;

            //
            grid-column: 1 / -1;
            grid-row: 1 / -1;
            place-self: start;

            //
            min-inline-size: 0px;
            min-block-size: 0px;
            inline-size: stretch;
            block-size: stretch;
            pointer-events: none;

            //
            zoom: max(var(--zoom, 1), 0.125);
            font-size: 16px;

            //
            writing-mode: horizontal-tb !important;
            direction: ltr !important;

            //
            /* WHY: IME must overlay — do not cap to shrinking `--vv-height` / `100dvb`. */
            max-inline-size: min(100%, min(100cqi, 100lvi), var(--lv-width, 100lvi)) !important;
            max-block-size: min(100%, min(100cqb, 100lvb), var(--lv-height, 100lvb)) !important;

            //
            /*outline-color: oklch(from var(--on-surface-color) l c h / 0.1);
            outline-width: 1px;
            outline-style: solid;
            outline-offset: -1px;*/

            //
            border-radius: var(--radius-lg);
        }

        //
        & {
            //
            --zoom: max(var(--scaling, 1), 0.125);
            --zpx: calc(1px / max(var(--zoom, 1), 0.125));
            --ppx: calc(1px / max(var(--pixel-ratio, 1), 0.125));
        }

        //
        & > :where(*),
        & :where(ui-frame, .u2-grid-item, ui-modal, [is="ui-orientbox"], [is="ui-gridbox"], [is="ui-orientbox"] > :where(*), [is="ui-gridbox"] > :where(*), .ui-gridlayout, .ui-gridlayout > :where(*))
        {
            @include compute_os_conditions;
            @include compute_cs_size_to_os;
            @include compute_from_os_to_cs;
        }

        //
        .center-self {
            @include use-inset;
            @include centered-with-offset();
        }

        //
        .fixed { @include use-inset; position: fixed !important; }
        .absolute { @include use-inset; position: absolute !important; }
    }

    //
    .native-portrait-optimized {
        @include oriented(--in-swap-cond, 0, 1);
    }
}