<box anon-id="collapseablePanel">
    <style>
        body .widget_CollapseablePanel {
            background: @app_bg;
            position: relative;
            border-top: solid 1px lighten(@app_bg, 5%);
        }
        @contentContainer > * {
            display: none;
            flex: 1;
        }
        @contentContainer {
            padding: 0.5em;
            box-sizing: border-box;
            min-width: 0px;
            overflow: hidden;
        }
        body .widget_CollapseablePanel[closed='true'] @contentContainer {
            display: none;
        }
        @contentContainer > *[active='true'] {
            display: block;
        }
        @contentContainer > vbox[active='true'],
        @contentContainer > hbox[active='true'] {
            display: flex;
        }
        body * > * + .widget_CollapseablePanel @controlContainer {
            order: 1;
        }
        body * > * + .widget_CollapseablePanel @contentContainer {
            order: 0;
        }

        body .widget_CollapseablePanel[orient='horizontal'] {
            border-right: solid 1px darken(@app_bg, 10%);
        }
        body * > * + .widget_CollapseablePanel[orient='horizontal'] {
            border-left: solid 1px lighten(@app_bg, 5%);
        }
        body .widget_CollapseablePanel[orient='horizontal'] @titleContainer {
            width: 2.65em;
            padding-top: 0.25em;
        }
        body * > * + .widget_CollapseablePanel[orient='horizontal'] @titleContainer {
            padding-left: 0.25em;
        }
        body * > .widget_CollapseablePanel[orient='horizontal']:first-child @titleContainer {
            padding-right: 0.25em;
        }

        @titleContainer .TitleElement {
            width: 2.4em;
            box-sizing: content-box;
            cursor: pointer;
        }
        body * > .widget_CollapseablePanel[orient='horizontal']:first-child @titleContainer .TitleElement {
            padding-left: 0.25em;
        }
        body * > * + .widget_CollapseablePanel[orient='horizontal'] @titleContainer .TitleElement {
            padding-right: 0.25em;
        }

        body .widget_CollapseablePanel[orient='horizontal'] @titleContainer .TitleElement button {
            transform-origin: 0 0px;
            float: left;
        }
        body .widget_CollapseablePanel[orient='horizontal'] @titleContainer .TitleElement + .TitleElement {
            margin-top: 0.25em;
        }
        @titleContainer .TitleElement button {
            white-space: nowrap;
            text-overflow: ellipsis;
            box-shadow: none;
            text-transform: none;
            padding: 0em 0.8em;
            line-height: normal;
            cursor: inherit;
        }
        @titleContainer .TitleElement button i {
        }
        @titleContainer .TitleElement button > * + * {
            margin-left: 0.5em;
        }
        @titleContainer .TitleElement:hover button {
            background: lighten(@selected_button_bg, 18%);
        }
        @titleContainer .TitleElement[active='true'] button {
            background: @selected_button_bg;
        }

        @titleContainer {
            flex-direction: row;
        }
        body .widget_CollapseablePanel[orient='horizontal'] @titleContainer {
            flex-direction: column;
        }

        @splitter {
            position: absolute;
        }
        body .widget_CollapseablePanel[orient='horizontal'] @splitter {
            top: 0px;
            bottom: 0px;
            width: 16px;
            cursor: ew-resize;
        }
        body .widget_CollapseablePanel[orient='horizontal']:first-child @splitter {
            right: -8px;
        }
        body * > * + .widget_CollapseablePanel[orient='horizontal'] @splitter {
            left: -8px;
        }
        body .widget_CollapseablePanel[orient='horizontal'] @splitter div {
            position: absolute;
            top: 0px;
            bottom: 0px;
            width: 2px;
            left: 7px;
            background: rgba(0, 0, 0, 0.02);
        }
        body .widget_CollapseablePanel[orient='horizontal'] @splitter:hover div {
            width: 4px;
            left: 6px;
        }
        body .widget_CollapseablePanel[orient='horizontal'] @splitter:active div {
            background: rgba(0, 0, 0, 0.1);
        }
        body .widget_CollapseablePanel[closed='true'] @splitter {
            display: none;
        }
        @pinButton {
            margin: 0.4em;
            padding: 0.3em;
            text-align: center;
            height: auto;
            opacity: 0.5;
            transition: opacity 0.3s ease;
        }
        @pinButton:hover {
            opacity: 1;
        }
        @pinButton i {
            font-size: 1em;
            opacity: 0.6;
            transform: rotate(30deg);
        }
        @pinButton:not(:hover) {
            border-color: transparent;
            background: transparent;
        }
        body .widget_CollapseablePanel:not([float='true']) @pinButton {
            background: darken(@app_bg, 10%);
        }
        body .widget_CollapseablePanel:not([float='true']) @pinButton i {
            opacity: 1;
            transform: rotate(0);
        }
        body .widget_CollapseablePanel[closed='true'] @pinButton {
            display: none;
        }

        body .widget_CollapseablePanel[controls-location='top'][closed='false'] {
            flex-direction: column;
        }
        body .widget_CollapseablePanel[controls-location='top'][closed='false'] @controlContainer {
            flex-direction: row;
        }
        body .widget_CollapseablePanel[controls-location='top'][closed='false'] @titleContainer {
            flex-direction: row;
        }
        body .widget_CollapseablePanel[controls-location='top'][closed='false'] .TitleElement {
            width: auto !important;
            height: auto !important;
            margin-top: 0px !important;
            flex: 1 0 2em;
            display: flex;
            flex-direction: row;
            overflow: hidden;
        }
        body .widget_CollapseablePanel[controls-location='top'][closed='false'] @titleContainer button {
            transform: none !important;
            float: none !important;
            flex: 1 0 2em;
            overflow: hidden;
        }
        body .widget_CollapseablePanel[controls-location='top'][closed='false'] @titleContainer button span {
            text-overflow: ellipsis;
            overflow: hidden;
        }
        body .widget_CollapseablePanel[controls-location='top'][closed='false'] @pinButton {
        }
        body .widget_CollapseablePanel[controls-location='top'][closed='false'] @pinContainer {
            margin-top: 0.25em;
            align-items: center;
        }
    </style>
    <vbox anon-id="controlContainer">
        <box flex="1" anon-id="titleContainer"></box>
        <hbox style="justify-content: center;" anon-id="pinContainer"><button anon-id="pinButton" title="Pin panel"><i class="mdi mdi-pin"></i></button></hbox>
    </vbox>
    <hbox anon-id="contentContainer" flex="1">
    </hbox>
    <div anon-id="splitter"><div></div></div>
</box>
