<!--
Description:
  An horizontally expanding filler that draws the horizontal border in
  between two effect slots. It contains an 'arrow' placed below/above
  effect toggle that indicates how a signal flows through the effect unit.
  It's used for left and right oriented effect units.
  Top and bottom half of this spacer (arrow and straight dividers) change
  colors depending on if the effect above or below or none is focused.
  The unfocused effect slot is painted #333. If focused, it turns transparent
  and the black effect unit background is visible.
Variables:
  widthLeft     : distance between arrow and left border
  widthRight    : distance between arrow and right border
  FxRack_FxUnit :
  FxTop         : Effect slot above separator
  FxBottom      : Effect slot below separator
-->
<Template>
  <WidgetGroup>
    <Layout>horizontal</Layout>
    <Size>-1me,17f</Size>
    <Children>
      <WidgetGroup><!-- Left-hand separator -->
        <Layout>vertical</Layout>
        <Size><Variable name="widthLeft"/>,-1min</Size>
        <Children>
          <WidgetGroup>
            <ObjectName>FxFlow_focus_background</ObjectName>
            <SizePolicy>me,me</SizePolicy>
            <Connection>
              <ConfigKey>[<Variable name="FxRack_FxUnit"/>],focused_effect</ConfigKey>
              <Transform><IsEqual><Variable name="FxTop"/></IsEqual></Transform>
              <BindProperty>highlight</BindProperty>
            </Connection>
          </WidgetGroup>

          <WidgetGroup>
            <Size>-1me,1f</Size>
          </WidgetGroup>

          <WidgetGroup>
            <ObjectName>FxFlow_focus_background</ObjectName>
            <SizePolicy>me,me</SizePolicy>
            <Connection>
              <ConfigKey>[<Variable name="FxRack_FxUnit"/>],focused_effect</ConfigKey>
              <Transform><IsEqual><Variable name="FxBottom"/></IsEqual></Transform>
              <BindProperty>highlight</BindProperty>
            </Connection>
          </WidgetGroup>
        </Children>
      </WidgetGroup><!-- /Left-hand separator -->

      <WidgetGroup>
        <ObjectName>FxFlow_maxi_focus_separator<Variable name="FxTop"/>-<Variable name="FxBottom"/></ObjectName>
        <Size>30f,17f</Size>
        <Connection>
          <ConfigKey>[<Variable name="FxRack_FxUnit"/>],focused_effect</ConfigKey>
          <BindProperty>highlight</BindProperty>
        </Connection>
      </WidgetGroup>

      <WidgetGroup><!-- Left-hand separator -->
        <Layout>vertical</Layout>
        <Size><Variable name="widthRight"/>,-1min</Size>
        <Children>
          <WidgetGroup>
            <ObjectName>FxFlow_focus_background</ObjectName>
            <SizePolicy>me,me</SizePolicy>
            <Connection>
              <ConfigKey>[<Variable name="FxRack_FxUnit"/>],focused_effect</ConfigKey>
              <Transform><IsEqual><Variable name="FxTop"/></IsEqual></Transform>
              <BindProperty>highlight</BindProperty>
            </Connection>
          </WidgetGroup>

          <WidgetGroup>
            <Size>-1me,1f</Size>
          </WidgetGroup>

          <WidgetGroup>
            <ObjectName>FxFlow_focus_background</ObjectName>
            <SizePolicy>me,me</SizePolicy>
            <Connection>
              <ConfigKey>[<Variable name="FxRack_FxUnit"/>],focused_effect</ConfigKey>
              <Transform><IsEqual><Variable name="FxBottom"/></IsEqual></Transform>
              <BindProperty>highlight</BindProperty>
            </Connection>
          </WidgetGroup>
        </Children>
      </WidgetGroup><!-- /Left-hand separator -->
    </Children>
  </WidgetGroup>
</Template>
