<hbox use-toggle="true">
    <style>
        @optionGroup > * + * {
            border-top-left-radius:  0px !important;
            border-bottom-left-radius:  0px !important;
            border-left: 0px !important;
        }
        @optionGroup > *:not(:last-child) {
            border-top-right-radius:  0px !important;
            border-bottom-right-radius:  0px !important;
        }
        @fontCombo {
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
        }
        @pixelFontSize {
            width: 3.2em;
        }
        @lineHeight {
            width: 3.2em;
        }
        @fontCombo {
            flex-basis: 2em;
        }
        @fontCombo .AnonId_buttonDisplay {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        @weightCombo {
            width: 4em !important;
        }
        body .widget_FontEditor[use-toggle="false"] @boldButton,
        body .widget_FontEditor[use-toggle="true"] @weightCombo {
            display: none;
        }
        @optionGroup {
            align-self: flex-end;
            margin-top: 0.2ex;
        }
    </style>
    <vbox flex="1">
        <ui:ComboManager anon-id="fontCombo" flex="1" title="Font family"/>
        <hbox anon-id="optionGroup">
            <input anon-id="pixelFontSize" type="number" min="5" max="100" title="Font size"/>
            <button anon-id="boldButton"><span>B</span></button>
            <ui:ComboManager anon-id="weightCombo" title="Font Weight"></ui:ComboManager>
            <button anon-id="italicButton"><span>I</span></button>
            <input anon-id="lineHeight" type="number" min="0" max="10" step="0.1" title="Line height"/>
        </hbox>
    </vbox>
</hbox>
