<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ui="using:FluentAvalonia.UI.Controls"
        xmlns:controls="clr-namespace:GalaxyBudsClient.Interface.Controls">

    <Design.PreviewWith>
        <Border Padding="20" Width="700" Height="150">
            <controls:SettingsGroup>
                <ui:SettingsExpanderItem Content="Item A" ActionIconSource="Pin" IsClickEnabled="True" />
                <ui:SettingsExpanderItem Content="Item B">
                    <ui:SettingsExpanderItem.Footer>
                        <Button Content="FooterButton" />
                    </ui:SettingsExpanderItem.Footer>
                </ui:SettingsExpanderItem>
            </controls:SettingsGroup>
        </Border>
    </Design.PreviewWith>

    <Styles.Resources>
        <ResourceDictionary>
            <!-- Settings expander -->
            <Thickness x:Key="SettingsExpanderPadding">16</Thickness>

            <!-- Settings group -->
            <ControlTheme x:Key="{x:Type controls:SettingsGroup}" TargetType="controls:SettingsGroup">
                <Setter Property="Background" Value="{DynamicResource ExpanderBackground}" />
                <Setter Property="BorderBrush" Value="{DynamicResource ExpanderContentBorderBrush}" />
                <Setter Property="BorderThickness" Value="1,1,1,1" />
                <Setter Property="Padding" Value="{DynamicResource SettingsExpanderPadding}" />
                <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
                <Setter Property="ItemsPanel">
                    <ItemsPanelTemplate>
                        <StackPanel Spacing="1" />
                    </ItemsPanelTemplate>
                </Setter>
                <Setter Property="Template">
                    <ControlTemplate>
                        <StackPanel>
                            <Border Name="Border" BackgroundSizing="InnerBorderEdge"
                                         Background="{TemplateBinding Background}"
                                         BorderBrush="{TemplateBinding BorderBrush}"
                                         BorderThickness="{TemplateBinding BorderThickness}"
                                         CornerRadius="{TemplateBinding CornerRadius}"
                                         ClipToBounds="True">
                                <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
                            </Border>
                        </StackPanel>
                    </ControlTemplate>
                </Setter>
            </ControlTheme>
        </ResourceDictionary>
    </Styles.Resources>

    <!-- For SettingsGroups we have to set the CornerRadius for the top edges of the first child to match the top of the group -->
    <Style
        Selector="controls|SettingsGroup > ui|SettingsExpanderItem.First /template/ Border#Root">
        <Setter Property="CornerRadius"
                Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource TopCornerRadiusFilterConverter}}" />
    </Style>
    <Style
        Selector="controls|SettingsGroup > ui|SettingsExpanderItem.Last /template/ Border#Root">
        <Setter Property="CornerRadius"
                Value="{Binding Source={StaticResource ControlCornerRadius}, Converter={StaticResource BottomCornerRadiusFilterConverter}}" />
    </Style>
    <Style
        Selector="controls|SettingsGroup > ui|SettingsExpanderItem.SingleItem /template/ Border#Root">
        <Setter Property="CornerRadius" Value="{Binding Source={StaticResource ControlCornerRadius}}" />
    </Style>

</Styles>