<hbox>
    <style>
        vbox > * + label {
            margin-top: 1em;
        }
        vbox > label + * {
            margin-top: 0.3em;
        }

        @pageTree {
            width: 20em;
            height: 27em;
            margin-right: 2em;
            border: solid 1px darken(@app_bg, 10%);
        }

        @optionPane > .widget_ComboManager @buttonDisplay {
            width: 18em;
        }
        @warningBox {
            color: #da8500;
            padding-top: 1em;
            white-space: normal;
            width: 20em;
        }
        @warningBox > i {
            @iconify();
            margin-right: 1em;
        }

        @warningBox[disabled] {
            display: none;
        }
        @warningContent {
            font-size: 0.9em;
        }

        .NoExtraOptions @optionEditorTitle,
        .NoExtraOptions @optionEditorPane {
            display: none;
        }

        @optionEditorTitle {
            font-weight: bold;
            margin-top: 1em;
        }

        @optionEditorPane > hbox {
            align-items: center;
            margin-top: 0.3em;
        }
        @optionEditorPane > hbox > .Label {
            width: 9em;
            margin-left: 0.8em;
        }
        @optionEditorPane button {
            height: 1.65em;
            line-height: 1.65em;
        }
        @optionPane.ForcedExporter > @exporterLabel,
        @optionPane.ForcedExporter > @exporterCombo {
            display: none;
        }
        @copyBgLinksBox {
            max-height: 2em;
            margin-top: 1em;
        }
        @copyBgLinksBox > label {
            min-width: 18em;
        }

    </style>
    <vbox>
        <label>Select pages:</label>
        <ui:Tree anon-id="pageTree" />
    </vbox>
    <vbox anon-id="optionPane">
        <label anon-id="exporterLabel">Output type:</label>
        <ui:ComboManager anon-id="exporterCombo" />
        <label>Template:</label>
        <ui:ComboManager anon-id="templateCombo" />
        <hbox class="InputRow" anon-id="copyBgLinksBox" flex="1">
            <input type="checkBox" anon-id="copyBgLinks" checked="true"/>
            <label for="copyBgLinks">Copy links from background pages</label>
        </hbox>
        <hbox anon-id="warningBox">
            <i>warning</i>
            <div flex="1" anon-id="warningContent"></div>
        </hbox>
        <label anon-id="optionEditorTitle">Options:</label>
        <vbox anon-id="optionEditorPane"></vbox>
    </vbox>
</hbox>
