<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Design.PreviewWith>
        <Panel Background="CornflowerBlue">
            <StackPanel Margin="10" Spacing="15">
                <StackPanel
                    HorizontalAlignment="Center"
                    Orientation="Horizontal"
                    Spacing="5">
                    <ThemeVariantScope RequestedThemeVariant="Light">
                        <Border Background="White" Padding="5">
                            <StackPanel Spacing="10">
                                <RadioButton Content="Option 1" IsChecked="True" />
                                <RadioButton Content="Option 2" />
                                <RadioButton Content="Option 3" />
                                <RadioButton Content="Option 4" />
                            </StackPanel>
                        </Border>
                    </ThemeVariantScope>
                    <ThemeVariantScope RequestedThemeVariant="Dark">
                        <Border Background="Black" Padding="5">
                            <StackPanel Spacing="10">
                                <RadioButton Content="Option 1" />
                                <RadioButton Content="Option 2" IsChecked="True" />
                                <RadioButton Content="Option 3" />
                                <RadioButton Content="Option 4" />
                            </StackPanel>
                        </Border>
                    </ThemeVariantScope>
                </StackPanel>
            </StackPanel>
        </Panel>
    </Design.PreviewWith>

    <Style Selector="RadioButton">
        <Setter Property="Background" Value="{DynamicResource RadioButtonBackground}" />
        <Setter Property="Foreground" Value="{DynamicResource BrandBlack}" />
        <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonBorderBrush}" />
        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
        <Setter Property="Padding" Value="8,0,0,0" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
        <Setter Property="Transitions">
            <Transitions>
                <TransformOperationsTransition Duration="0:0:.075" Property="RenderTransform" />
                <DoubleTransition Duration="0:0:0.15" Property="Opacity" />
            </Transitions>
        </Setter>
        <Setter Property="Template">
            <ControlTemplate TargetType="RadioButton">
                <Border
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="{TemplateBinding CornerRadius}"
                    Name="RootBorder">
                    <StackPanel Orientation="Horizontal">
                        <Grid Height="32" VerticalAlignment="Top">
                            <Ellipse
                                Fill="White"
                                Height="20"
                                Name="OuterEllipse"
                                Stroke="{TemplateBinding Foreground}"
                                StrokeThickness="{DynamicResource RadioButtonBorderThemeThickness}"
                                UseLayoutRounding="False"
                                Width="20" />
                            <Ellipse
                                Fill="{DynamicResource RadioButtonOuterEllipseCheckedFill}"
                                Height="20"
                                Name="CheckOuterEllipse"
                                Opacity="0"
                                Stroke="{DynamicResource RadioButtonOuterEllipseCheckedStroke}"
                                StrokeThickness="{DynamicResource RadioButtonBorderThemeThickness}"
                                UseLayoutRounding="False"
                                Width="20" />
                            <Ellipse
                                Fill="{DynamicResource RadioButtonCheckGlyphFill}"
                                Height="8"
                                Name="CheckGlyph"
                                Opacity="0"
                                Stroke="{DynamicResource RadioButtonCheckGlyphStroke}"
                                UseLayoutRounding="False"
                                Width="8" />
                        </Grid>

                        <ContentPresenter
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            Foreground="{TemplateBinding Foreground}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            Margin="{TemplateBinding Padding}"
                            Name="PART_ContentPresenter"
                            RecognizesAccessKey="True"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter>


        <!--  PointerOver State  -->
        <Style Selector="^:pointerover">
            <Setter Property="Opacity" Value=".75" />

            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                <Setter Property="Foreground" Value="{TemplateBinding Foreground}" />
            </Style>

            <Style Selector="^ /template/ Border#RootBorder">
                <Setter Property="Background" Value="{DynamicResource RadioButtonBackground}" />
                <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonBorderBrush}" />
            </Style>

            <Style Selector="^ /template/ Ellipse#OuterEllipse">
                <Setter Property="Stroke" Value="{Binding $parent[RadioButton].Foreground}" />
                <Setter Property="Fill" Value="White" />
            </Style>

            <Style Selector="^ /template/ Ellipse#CheckOuterEllipse">
                <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseCheckedStroke}" />
                <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseCheckedFill}" />
            </Style>

            <Style Selector="^ /template/ Ellipse#CheckGlyph">
                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckGlyphStroke}" />
                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckGlyphFill}" />
            </Style>
        </Style>


        <!--  Pressed State  -->
        <Style Selector="^:pressed">
            <Setter Property="RenderTransform" Value="scale(0.98)" />

            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                <Setter Property="Foreground" Value="{TemplateBinding Foreground}" />
            </Style>

            <Style Selector="^ /template/ Border#RootBorder">
                <Setter Property="Background" Value="{DynamicResource RadioButtonBackgroundPressed}" />
                <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonBorderBrushPressed}" />
            </Style>

            <Style Selector="^ /template/ Ellipse#OuterEllipse">
                <Setter Property="Stroke" Value="{Binding $parent[RadioButton].Foreground}" />
                <Setter Property="Fill" Value="White" />
            </Style>

            <Style Selector="^ /template/ Ellipse#CheckOuterEllipse">
                <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseCheckedStrokePressed}" />
                <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseCheckedFillPressed}" />
            </Style>

            <Style Selector="^ /template/ Ellipse#CheckGlyph">
                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckGlyphStrokePressed}" />
                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckGlyphFillPressed}" />
            </Style>
        </Style>


        <!--  Disabled State  -->
        <Style Selector="^:disabled">
            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                <Setter Property="Foreground" Value="{Binding $parent[RadioButton].Foreground}" />
            </Style>

            <Style Selector="^ /template/ Border#RootBorder">
                <Setter Property="Background" Value="{Binding $parent[RadioButton].Background}" />
                <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonBorderBrush}" />
            </Style>

            <Style Selector="^ /template/ Ellipse#OuterEllipse">
                <Setter Property="Stroke" Value="{Binding $parent[RadioButton].Foreground}" />
                <Setter Property="Fill" Value="White" />
            </Style>

            <Style Selector="^ /template/ Ellipse#CheckOuterEllipse">
                <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseCheckedStroke}" />
                <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseCheckedFill}" />
            </Style>

            <Style Selector="^ /template/ Ellipse#CheckGlyph">
                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckGlyphStroke}" />
                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckGlyphFill}" />
            </Style>

            <Style Selector="^:unchecked">
                <Style Selector="^ /template/ Ellipse#CheckGlyph">
                    <Setter Property="Opacity" Value="0" />
                </Style>

                <Style Selector="^ /template/ Ellipse#OuterEllipse">
                    <Setter Property="Opacity" Value="1" />
                </Style>

                <Style Selector="^ /template/ Ellipse#CheckOuterEllipse">
                    <Setter Property="Opacity" Value="0" />
                </Style>
            </Style>
        </Style>


        <!--  Checked State  -->
        <Style Selector="^:checked">
            <Style Selector="^ /template/ Ellipse#CheckGlyph">
                <Setter Property="Opacity" Value="1" />
            </Style>

            <Style Selector="^ /template/ Ellipse#OuterEllipse">
                <Setter Property="Opacity" Value="0" />
            </Style>

            <Style Selector="^ /template/ Ellipse#CheckOuterEllipse">
                <Setter Property="Opacity" Value="1" />
            </Style>
        </Style>

    </Style>
</Styles>