<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="205" d:DesignHeight="40"
             x:Class="DesertPaintCodex.Views.ReactionUnitView">

    <UserControl.Styles>
        <Style Selector="TextBox">
            <Setter Property="FontSize" Value="14"/>
        </Style>
    </UserControl.Styles>
    
    <StackPanel Orientation="Horizontal" Spacing="4">
        <Border Name="InertBox" Classes="ThinFrame">
            <TextBlock>inert</TextBlock>
        </Border>
        <Border Name="RedBox" Classes="ThinFrame">
            <StackPanel Orientation="Horizontal" Spacing="4">
                <TextBlock Name="RedQty" VerticalAlignment="Center">88</TextBlock>
                <TextBlock VerticalAlignment="Center">R</TextBlock>
                <Path Name="RedArrow" Classes="Red UpArrow" VerticalAlignment="Center"/>
            </StackPanel>
        </Border>
        <Border Name="GreenBox" Classes="ThinFrame">
            <StackPanel Orientation="Horizontal" Spacing="4">
                <TextBlock Name="GreenQty" VerticalAlignment="Center">88</TextBlock>
                <TextBlock VerticalAlignment="Center">G</TextBlock>
                <Path Name="GreenArrow" Classes="Green UpArrow" VerticalAlignment="Center"/>
            </StackPanel>
        </Border>
        <Border Name="BlueBox" Classes="ThinFrame">
            <StackPanel Orientation="Horizontal" Spacing="4">
                <TextBlock Name="BlueQty" VerticalAlignment="Center">88</TextBlock>
                <TextBlock VerticalAlignment="Center">B</TextBlock>
                <Path Name="BlueArrow" Classes="Blue UpArrow" VerticalAlignment="Center"/>
            </StackPanel>
        </Border>
    </StackPanel>
</UserControl>