How to style TabStrip - specifically :pointerover and the tab strip height

[CameO73]

I'm currently wrestling with a TabStrip and am running into 2 issues:

1. when I hover over a tab, the background becomes transparent
2. I can't seem to change the height without it having an impact on the "selected bar" at the bottom

This is how it looks right now:

Regarding my first point, this is how it looks when I hover over any of the tabs:

I would love to be able to make that a little more subtle, e.g. by changing the opacity of the background. But nothing I tried seems to work (not even setting the fore- or background color). Check below for what I've tried.

Regarding my second point, this is how it looks when I change the MaxHeight of the TabStripItem to e.g. 16:

As you can see the "selected bar" is now over the tab item -- and I really like to have that one below the tab itself.

My AXAML looks like this:

 <TabStrip Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="0" Padding="0"
           ItemsSource="{Binding History}" SelectedItem="{Binding SelectedHistoryItem, Mode=TwoWay}">
     
     <TabStrip.ItemTemplate>
         <DataTemplate DataType="m:ServiceHealthHistory">
             <TabItem Background="{Binding Status, Converter={StaticResource ServiceHealthColorConverter}}" 
                      Margin="0" Padding="0" Header="" MinHeight="0"/>
         </DataTemplate>
     </TabStrip.ItemTemplate>
     
     <TabStrip.ItemsPanel>
         <ItemsPanelTemplate>
             <UniformGrid Rows="1" />
         </ItemsPanelTemplate>
     </TabStrip.ItemsPanel>
     
     <TabStrip.Styles>
        
         <Style Selector="TabStripItem">
             <Setter Property="Padding" Value="2,0,0,0"/>
             <Setter Property="Margin" Value="0"/>
             <Setter Property="MinHeight" Value="0"/>
             <Setter Property="MaxHeight" Value="42"/>
         </Style>
         
         <Style Selector="TabStripItem:pointerover">
             <Setter Property="Opacity" Value="0.75" />
             <Setter Property="Background" Value="MediumVioletRed" />
             <Setter Property="Foreground" Value="MediumVioletRed" />
         </Style>

     </TabStrip.Styles>
     
 </TabStrip>

[CameO73]

I've made a simple example project showing the problems: https://github.com/CameO73/TabStripTest.
I'm starting to get the feeling that these issues are maybe due to the way I'm generating these tabs from collection. If that's the case, can somebody please tell me what the correct way would be to generate these tabs?

[CameO73]

I've fixed my issue. I had a completely wrong idea about the DataTemplate and made it much harder on myself.
I've described my working solution here: https://stackoverflow.com/questions/79531102/how-to-style-avalonia-tabstrip-specifically-pointerover-and-the-tab-strip-hei/79531679#79531679

TLDR: just provide the tab contents you want instead of creating a TabItem

        <DataTemplate DataType="models:ServiceHealthHistory">
            <Panel Height="16">
                <Rectangle Fill="{Binding Status}"/>
            </Panel>
        </DataTemplate>