<hbox use-toggle="true">
    <style>
        > * + * {
            border-top-left-radius:  0px !important;
            border-bottom-left-radius:  0px !important;
            border-left: 0px !important;
        }
        > *: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.8em;
        }
        @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;
        }
    </style>
    <ui:ComboManager anon-id="fontCombo" flex="1"/>
    <input anon-id="pixelFontSize" type="number" min="5" max="100"/>
    <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>
</hbox>
