<!-- ToDo (ronso0)
      make inline <Style> accept <Variable> -->
<!-- A hotcue button. The only variable that needs to be specified is "number" -->
<Template>

  <WidgetGroup>
    <MinimumSize>26,26</MinimumSize>
    <MaximumSize>26,26</MaximumSize>
    <SizePolicy>me,f</SizePolicy>
    <Layout>horizontal</Layout>
    <Style>
      #HotcueButton[displayValue="0"] {
        image: url(skin:/palemoon/buttons/btn__<Variable name="number"/>.svg) no-repeat center center;
      }
      #HotcueButton[displayValue="1"] {
        image: url(skin:/<Variable name="BtnScheme"/>/buttons/btn__1_active.svg) no-repeat center center;
      }
    </Style>
    <Children>
      <HotcueButton>
        <TooltipId>hotcue</TooltipId>
        <ObjectName>HotcueButton</ObjectName>
        <MinimumSize>26,26</MinimumSize>
        <MaximumSize>26,26</MaximumSize>
        <SizePolicy>me,f</SizePolicy>
        <Group><Variable name="Group"/></Group>
        <Hotcue><Variable name="number"/></Hotcue>
        <NumberStates>2</NumberStates>
        <State>
          <Number>0</Number>
          <Unpressed scalemode="STRETCH">skin:/<Variable name="BtnScheme"/>/buttons/btn_<Variable name="BtnType"/>_square.svg</Unpressed>
          <Pressed scalemode="STRETCH">skin:/<Variable name="BtnScheme"/>/buttons/btn_<Variable name="BtnType"/>_square_active.svg</Pressed>
        </State>
        <State>
          <Number>1</Number>
          <Unpressed scalemode="STRETCH">skin:/<Variable name="BtnScheme"/>/buttons/btn_<Variable name="BtnType"/>_square_set.svg</Unpressed>
          <Pressed scalemode="STRETCH">skin:/<Variable name="BtnScheme"/>/buttons/btn_<Variable name="BtnType"/>_square_active.svg</Pressed>
        </State>
      </HotcueButton>
    </Children>
  </WidgetGroup>

    <!--SetVariable name="bttnn">skin:/<Variable name="BtnScheme"/>/buttons/btn__<Variable name="number"/>.svg</SetVariable>
  <WidgetGroup>
    <Style>
      #HotcueButton[displayValue="0"] {
        image: url(<Variable name="bttnn"/>) no-repeat center center;
      }
      #HotcueButton[displayValue="1"] {
        image: url(skin:/<Variable name="BtnScheme"/>/buttons/btn__1_active.svg) no-repeat center center;
      }
    </Style>
    <MinimumSize>260,26</MinimumSize>
    <MaximumSize>260,26</MaximumSize>
    <SizePolicy>me,f</SizePolicy>
    <Layout>horizontal</Layout>
    <Children>
      <HotcueButton>
        <TooltipId>hotcue</TooltipId>
        <ObjectName>HotcueButton</ObjectName>
        <MinimumSize>260,26</MinimumSize>
        <MaximumSize>260,26</MaximumSize>
        <SizePolicy>me,f</SizePolicy>
        <Group><Variable name="Group"/></Group>
        <Hotcue><Variable name="number"/></Hotcue>
        <NumberStates>2</NumberStates>
        <State>
          <Number>0</Number>
          <Unpressed scalemode="STRETCH">skin:/<Variable name="BtnScheme"/>/buttons/btn_<Variable name="BtnType"/>_square.svg</Unpressed>
          <Pressed scalemode="STRETCH">skin:/<Variable name="BtnScheme"/>/buttons/btn_<Variable name="BtnType"/>_square_active.svg</Pressed>
        </State>
        <State>
          <Number>1</Number>
          <Unpressed scalemode="STRETCH">skin:/<Variable name="BtnScheme"/>/buttons/btn_<Variable name="BtnType"/>_square_set.svg</Unpressed>
          <Pressed scalemode="STRETCH">skin:/<Variable name="BtnScheme"/>/buttons/btn_<Variable name="BtnType"/>_square_active.svg</Pressed>
          <Text><Variable name="bttnn"/></Text>
        </State>
      </HotcueButton>
    </Children>
  </WidgetGroup-->
</Template>
