<Styles xmlns="https://github.com/avaloniaui">
  <Design.PreviewWith>
    <Border Padding="20">
      <StackPanel Spacing="10">
        <RadioButton Content="Option 1" Background="Green" />
        <RadioButton Content="Option 2" />
        <RadioButton IsEnabled="False" Content="Option 3" />
        <RadioButton Content="Option 2" />
      </StackPanel>
    </Border>
  </Design.PreviewWith>
  <Style Selector="RadioButton">
    <Setter Property="Background" Value="{DynamicResource RadioButtonBackground}" />
    <Setter Property="Foreground" Value="{DynamicResource RadioButtonForeground}" />
    <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="Template">
      <ControlTemplate TargetType="RadioButton">
        <Border Name="RootBorder"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                CornerRadius="{TemplateBinding CornerRadius}">
          <Grid ColumnDefinitions="20,*">
            <Grid VerticalAlignment="Top"
              Height="32">

              <Ellipse Name="OuterEllipse"
                       Width="20" Height="20"
                       UseLayoutRounding="False"
                       StrokeThickness="{DynamicResource RadioButtonBorderThemeThickness}" />

              <Ellipse Name="CheckOuterEllipse"
                       Width="20" Height="20"
                       UseLayoutRounding="False"
                       StrokeThickness="{DynamicResource RadioButtonBorderThemeThickness}" />

              <Ellipse Name="CheckGlyph"
                       Width="8" Height="8"
                       UseLayoutRounding="False" />
            </Grid>

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

  <!-- Normal State -->
  <Style Selector="RadioButton /template/ Ellipse#OuterEllipse">
    <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseStroke}" />
    <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseFill}" />
  </Style>

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

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

  <!-- PointerOver State -->
  <Style Selector="RadioButton:pointerover /template/ ContentPresenter#PART_ContentPresenter">
    <Setter Property="Foreground" Value="{DynamicResource RadioButtonForegroundPointerOver}" />
  </Style>

  <Style Selector="RadioButton:pointerover /template/ Border#RootBorder">
    <Setter Property="Background" Value="{DynamicResource RadioButtonBackgroundPointerOver}" />
    <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonBorderBrushPointerOver}" />
  </Style>

  <Style Selector="RadioButton:pointerover /template/ Ellipse#OuterEllipse">
    <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseStrokePointerOver}" />
    <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseFillPointerOver}" />
  </Style>

  <Style Selector="RadioButton:pointerover /template/ Ellipse#CheckOuterEllipse">
    <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseCheckedStrokePointerOver}" />
    <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseCheckedFillPointerOver}" />
  </Style>

  <Style Selector="RadioButton:pointerover /template/ Ellipse#CheckGlyph">
    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckGlyphStrokePointerOver}" />
    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckGlyphFillPointerOver}" />
  </Style>


  <!-- Pressed State -->
  <Style Selector="RadioButton:pressed /template/ ContentPresenter#PART_ContentPresenter">
    <Setter Property="Foreground" Value="{DynamicResource RadioButtonForegroundPressed}" />
  </Style>

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

  <Style Selector="RadioButton:pressed /template/ Ellipse#OuterEllipse">
    <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseStrokePressed}" />
    <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseFillPressed}" />
  </Style>

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

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


  <!-- Disabled State -->
  <Style Selector="RadioButton:disabled /template/ ContentPresenter#PART_ContentPresenter">
    <Setter Property="Foreground" Value="{DynamicResource RadioButtonForegroundDisabled}" />
  </Style>

  <Style Selector="RadioButton:disabled /template/ Border#RootBorder">
    <Setter Property="Background" Value="{DynamicResource RadioButtonBackgroundDisabled}" />
    <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonBorderBrushDisabled}" />
  </Style>

  <Style Selector="RadioButton:disabled /template/ Ellipse#OuterEllipse">
    <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseStrokeDisabled}" />
    <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseFillDisabled}" />
  </Style>

  <Style Selector="RadioButton:disabled /template/ Ellipse#CheckOuterEllipse">
    <Setter Property="Stroke" Value="{DynamicResource RadioButtonOuterEllipseCheckedStrokeDisabled}" />
    <Setter Property="Fill" Value="{DynamicResource RadioButtonOuterEllipseCheckedFillDisabled}" />
  </Style>

  <Style Selector="RadioButton:disabled /template/ Ellipse#CheckGlyph">
    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckGlyphFillDisabled}" />
    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckGlyphStrokeDisabled}" />
  </Style>


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

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

  <Style Selector="RadioButton:checked /template/ Ellipse#CheckOuterEllipse">
    <Setter Property="Opacity" Value="1" />
  </Style>
</Styles>
