<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:converters="using:Avalonia.Controls.Converters"
        x:CompileBindings="True">

  <Styles.Resources>
    <converters:EnumValueEqualsConverter x:Key="EnumValueEquals" />
    <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadius" Corner="TopLeft" />
    <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadius" Corner="BottomRight" />
  </Styles.Resources>

  <Style Selector="ColorSpectrum">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate>
          <Panel x:Name="PART_LayoutRoot"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Stretch">
            <Panel x:Name="PART_SizingPanel"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   ClipToBounds="True">
              <Rectangle x:Name="PART_SpectrumRectangle"
                         IsHitTestVisible="False"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         IsVisible="{TemplateBinding Shape, Converter={StaticResource EnumValueEquals}, ConverterParameter='Box'}"
                         RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadius}}"
                         RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadius}}" />
              <Rectangle x:Name="PART_SpectrumOverlayRectangle"
                         IsHitTestVisible="False"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         IsVisible="{TemplateBinding Shape, Converter={StaticResource EnumValueEquals}, ConverterParameter='Box'}"
                         RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadius}}"
                         RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadius}}" />
              <Ellipse x:Name="PART_SpectrumEllipse"
                       IsHitTestVisible="False"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch"
                       IsVisible="{TemplateBinding Shape, Converter={StaticResource EnumValueEquals}, ConverterParameter='Ring'}" />
              <Ellipse x:Name="PART_SpectrumOverlayEllipse"
                       IsHitTestVisible="False"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch"
                       IsVisible="{TemplateBinding Shape, Converter={StaticResource EnumValueEquals}, ConverterParameter='Ring'}" />
              <Canvas x:Name="PART_InputTarget"
                      Background="Transparent"
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch">
                <!-- Note: ToolTip.VerticalOffset is for touch devices to keep the tip above fingers -->
                <Panel x:Name="PART_SelectionEllipsePanel"
                       ToolTip.VerticalOffset="-10"
                       ToolTip.Placement="Top">
                  <Ellipse x:Name="FocusEllipse"
                           Margin="-2"
                           StrokeThickness="2"
                           IsHitTestVisible="False"
                           HorizontalAlignment="Stretch"
                           VerticalAlignment="Stretch" />
                  <Ellipse x:Name="SelectionEllipse"
                           StrokeThickness="2"
                           IsHitTestVisible="False"
                           HorizontalAlignment="Stretch"
                           VerticalAlignment="Stretch" />
                  <ToolTip.Tip>
                    <!-- Set in code-behind -->
                  </ToolTip.Tip>
                </Panel>
              </Canvas>
              <Rectangle x:Name="BorderRectangle"
                         IsHitTestVisible="False"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         IsVisible="{TemplateBinding Shape, Converter={StaticResource EnumValueEquals}, ConverterParameter='Box'}"
                         RadiusX="{TemplateBinding CornerRadius, Converter={StaticResource TopLeftCornerRadius}}"
                         RadiusY="{TemplateBinding CornerRadius, Converter={StaticResource BottomRightCornerRadius}}" />
              <Ellipse x:Name="BorderEllipse"
                       IsHitTestVisible="False"
                       HorizontalAlignment="Stretch"
                       VerticalAlignment="Stretch"
                       IsVisible="{TemplateBinding Shape, Converter={StaticResource EnumValueEquals}, ConverterParameter='Ring'}" />
            </Panel>
          </Panel>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- Normal -->
  <!-- Separating this allows easier customization in applications -->
  <Style Selector="ColorSpectrum /template/ Ellipse#BorderEllipse,
                   ColorSpectrum /template/ Rectangle#BorderRectangle">
    <Setter Property="Stroke" Value="{DynamicResource SystemControlForegroundListLowBrush}" />
    <Setter Property="StrokeThickness" Value="1" />
  </Style>

  <!-- Focus -->
  <Style Selector="ColorSpectrum /template/ Ellipse#FocusEllipse">
    <Setter Property="IsVisible" Value="False" />
  </Style>
  <Style Selector="ColorSpectrum:focus-visible /template/ Ellipse#FocusEllipse">
    <Setter Property="IsVisible" Value="True" />
  </Style>

  <!-- Selector Color -->
  <Style Selector="ColorSpectrum /template/ Ellipse#FocusEllipse">
    <Setter Property="Stroke" Value="{DynamicResource SystemControlBackgroundChromeWhiteBrush}" />
  </Style>
  <Style Selector="ColorSpectrum /template/ Ellipse#SelectionEllipse">
    <Setter Property="Stroke" Value="{DynamicResource SystemControlBackgroundChromeBlackHighBrush}" />
  </Style>
  <Style Selector="ColorSpectrum:light-selector /template/ Ellipse#FocusEllipse">
    <Setter Property="Stroke" Value="{DynamicResource SystemControlBackgroundChromeBlackHighBrush}" />
  </Style>
  <Style Selector="ColorSpectrum:light-selector /template/ Ellipse#SelectionEllipse">
    <Setter Property="Stroke" Value="{DynamicResource SystemControlBackgroundChromeWhiteBrush}" />
  </Style>

  <Style Selector="ColorSpectrum:pointerover /template/ Ellipse#SelectionEllipse">
    <Setter Property="Opacity" Value="0.7" />
  </Style>
  <Style Selector="ColorSpectrum:pointerover:light-selector /template/ Ellipse#SelectionEllipse">
    <Setter Property="Opacity" Value="0.8" />
  </Style>

  <!-- Selector Size -->
  <Style Selector="ColorSpectrum /template/ Panel#PART_SelectionEllipsePanel">
    <Setter Property="Width" Value="16" />
    <Setter Property="Height" Value="16" />
  </Style>
  <Style Selector="ColorSpectrum:large-selector /template/ Panel#PART_SelectionEllipsePanel">
    <Setter Property="Width" Value="48" />
    <Setter Property="Height" Value="48" />
  </Style>

</Styles>
