<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:clr="clr-namespace:System;assembly=mscorlib"
    xmlns:controls="clr-namespace:GitHub.UI"
    xmlns:sharedConverters="clr-namespace:GitHub.Shared.Converters">

    <Style x:Key="OcticonCircleButton" TargetType="{x:Type controls:OcticonCircleButton}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="{DynamicResource GHBlueLinkButtonTextBrush}" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Padding" Value="6,0,0,0" />

        <Setter Property="FocusVisualStyle" Value="{DynamicResource NegativeMarginFocusVisual}" />

        <Setter Property="IconForeground" Value="{DynamicResource GHBlueLinkButtonIconBrush}" />

        <Setter Property="ActiveBackground" Value="{DynamicResource GitHubAccentBrush}" />
        <Setter Property="ActiveForeground" Value="#FFFFFFFF" />
        <Setter Property="PressedBackground" Value="#20000000" />

        <Setter Property="Icon" Value="mark_github" />
        <Setter Property="Height" Value="30" />

        <Setter Property="HorizontalContentAlignment" Value="Right" />
        <Setter Property="VerticalContentAlignment" Value="Center" />

        <Setter Property="IconRotationAngle" Value="0" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">

                    <ControlTemplate.Triggers>
                        <Trigger Property="HorizontalContentAlignment" Value="Right">
                            <Setter Property="Grid.Column" Value="2" TargetName="contentPresenter" />
                            <Setter Property="ColumnDefinition.Width" Value="0" TargetName="leftColumn" />
                            <Setter Property="ColumnDefinition.Width" Value="*" TargetName="rightColumn" />
                        </Trigger>
                        <Trigger Property="HorizontalContentAlignment" Value="Left">
                            <Setter Property="Grid.Column" Value="0" TargetName="contentPresenter" />
                            <Setter Property="ColumnDefinition.Width" Value="*" TargetName="leftColumn" />
                            <Setter Property="ColumnDefinition.Width" Value="0" TargetName="rightColumn" />
                        </Trigger>
                        <Trigger Property="HorizontalContentAlignment" Value="Center">
                            <Setter Property="Grid.Column" Value="1" TargetName="contentPresenter" />
                            <Setter Property="ColumnDefinition.Width" Value="0" TargetName="leftColumn" />
                            <Setter Property="ColumnDefinition.Width" Value="0" TargetName="rightColumn" />
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True" />
                                <Condition Property="IsPressed" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Foreground" Value="{DynamicResource GHBlueLinkButtonHoverBrush}" />
                        </MultiTrigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Foreground" Value="{DynamicResource GHBlueLinkButtonPressedBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>

                    <ControlTemplate.Resources>
                        <QuinticEase x:Key="easing" />
                        <clr:TimeSpan x:Key="animationTime">0:0:0.2</clr:TimeSpan>
                        <Duration x:Key="animationDuration">0:0:0.2</Duration>

                        <clr:TimeSpan x:Key="borderFadeOutBeginTime">0:0:0.10</clr:TimeSpan>
                        <Duration x:Key="borderFadeOutDuration">0:0:0.0</Duration>

                        <sharedConverters:ThicknessConverter x:Key="ThicknessToDouble" />
                    </ControlTemplate.Resources>

                    <Grid HorizontalAlignment="Stretch" Background="{TemplateBinding Background}">

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <DoubleAnimation
                                                To="0"
                                                Duration="{StaticResource animationDuration}"
                                                EasingFunction="{StaticResource easing}"
                                                Storyboard.TargetName="invertedClip"
                                                Storyboard.TargetProperty="(EllipseGeometry.RadiusX)" />
                                        <DoubleAnimation
                                                To="0"
                                                Duration="{StaticResource animationDuration}"
                                                EasingFunction="{StaticResource easing}"
                                                Storyboard.TargetName="invertedClip"
                                                Storyboard.TargetProperty="(EllipseGeometry.RadiusY)" />
                                        <DoubleAnimation
                                                To="1"
                                                Duration="0"
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(UIElement.Opacity)" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation
                                                To="0.5"
                                                Duration="{StaticResource animationDuration}"
                                                EasingFunction="{StaticResource easing}"
                                                Storyboard.TargetName="invertedClip"
                                                Storyboard.TargetProperty="(EllipseGeometry.RadiusX)" />
                                        <DoubleAnimation
                                                To="0.5"
                                                Duration="{StaticResource animationDuration}"
                                                EasingFunction="{StaticResource easing}"
                                                Storyboard.TargetName="invertedClip"
                                                Storyboard.TargetProperty="(EllipseGeometry.RadiusY)" />
                                        <DoubleAnimation
                                                To="0"
                                                BeginTime="{StaticResource borderFadeOutBeginTime}"
                                                Duration="{StaticResource borderFadeOutDuration}"
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(UIElement.Opacity)" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimation
                                                To="0.5"
                                                Duration="{StaticResource animationDuration}"
                                                EasingFunction="{StaticResource easing}"
                                                Storyboard.TargetName="invertedClip"
                                                Storyboard.TargetProperty="(EllipseGeometry.RadiusX)" />
                                        <DoubleAnimation
                                                To="0.5"
                                                Duration="{StaticResource animationDuration}"
                                                EasingFunction="{StaticResource easing}"
                                                Storyboard.TargetName="invertedClip"
                                                Storyboard.TargetProperty="(EllipseGeometry.RadiusY)" />

                                        <DoubleAnimation
                                                To="0"
                                                BeginTime="{StaticResource borderFadeOutBeginTime}"
                                                Duration="{StaticResource borderFadeOutDuration}"
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(UIElement.Opacity)" />
                                        <DoubleAnimation
                                                To="1" Duration="0"
                                                Storyboard.TargetName="pressedEllipse"
                                                Storyboard.TargetProperty="(UIElement.Opacity)" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation
                                            To="0.3" Duration="0"
                                            Storyboard.TargetProperty="(UIElement.Opacity)" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Unfocused" />
                                <VisualState x:Name="Focused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="leftColumn" />
                            <ColumnDefinition Width="{Binding Path=Height, RelativeSource={RelativeSource TemplatedParent}}" />
                            <ColumnDefinition x:Name="rightColumn" />
                        </Grid.ColumnDefinitions>

                        <controls:FixedAspectRatioPanel
                            x:Name="octiconPanel"
                            VerticalAlignment="Stretch"
                            Grid.Column="1"
                            IsHitTestVisible="True"
                            Background="Transparent">

                            <Ellipse
                                x:Name="border"
                                Stroke="{Binding Path=IconForeground, RelativeSource={RelativeSource TemplatedParent}}"
                                StrokeThickness="{Binding Path=BorderThickness, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource ThicknessToDouble}}"
                                IsHitTestVisible="False" />

                            <Grid IsHitTestVisible="True">

                                <Viewbox x:Name="icon"
                                    SnapsToDevicePixels="True"
                                    Visibility="{Binding Path=ShowSpinner,
                                        RelativeSource={RelativeSource TemplatedParent},
                                        Converter={sharedConverters:BooleanToInverseHiddenVisibilityConverter}}"
                                    Width="{Binding Path=IconSize,
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                    Height="{Binding Path=IconSize,
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                    Stretch="Uniform">
                                    <Path
                                            x:Name="octicon"
                                            Height="16"
                                            Stretch="None"
                                            Fill="{Binding Path=IconForeground,
                                                RelativeSource={RelativeSource TemplatedParent}}"
                                            Data="{Binding Path=(Path.Data),
                                                RelativeSource={RelativeSource TemplatedParent}}"
                                            RenderTransformOrigin="0.5,0.5">
                                        <Path.RenderTransform>
                                            <RotateTransform Angle="{Binding Path=IconRotationAngle,
                                                RelativeSource={RelativeSource TemplatedParent}}" />
                                        </Path.RenderTransform>
                                    </Path>
                                </Viewbox>

                                <Grid>
                                    <Grid.Resources>
                                        <controls:BindingProxy x:Key="scale" Data="{Binding Path=ActualWidth,
                                            RelativeSource={RelativeSource AncestorType={x:Type Grid}}, FallbackValue=0}" />
                                    </Grid.Resources>
                                    <Grid.Clip>
                                        <EllipseGeometry x:Name="invertedClip">
                                            <EllipseGeometry.Transform>
                                                <TransformGroup>
                                                    <TranslateTransform X="0.5" Y="0.5"></TranslateTransform>
                                                    <ScaleTransform
                                                        ScaleX="{Binding Path=Data, Source={StaticResource scale}}"
                                                        ScaleY="{Binding Path=Data, Source={StaticResource scale}}" />
                                                </TransformGroup>
                                            </EllipseGeometry.Transform>
                                        </EllipseGeometry>
                                    </Grid.Clip>

                                    <Ellipse x:Name="activeEllipse"
                                        Fill="{Binding Path=ActiveBackground,
                                            RelativeSource={RelativeSource TemplatedParent}}"
                                        StrokeThickness="0" />

                                    <Ellipse x:Name="pressedEllipse"
                                        Fill="{Binding Path=PressedBackground,
                                            RelativeSource={RelativeSource TemplatedParent}}"
                                        Opacity="0"
                                        StrokeThickness="0" />

                                    <Viewbox
                                        SnapsToDevicePixels="True"
                                        Width="{Binding Path=IconSize,
                                            RelativeSource={RelativeSource TemplatedParent}}"
                                        Height="{Binding Path=IconSize,
                                            RelativeSource={RelativeSource TemplatedParent}}"
                                        Stretch="Uniform">
                                        <Path
                                                Height="16"
                                                Stretch="None"
                                                Fill="{Binding Path=ActiveForeground,
                                                    RelativeSource={RelativeSource TemplatedParent}}"
                                                Data="{Binding Path=(Path.Data),
                                                    RelativeSource={RelativeSource TemplatedParent}}"
                                                RenderTransformOrigin="0.5,0.5">
                                            <Path.RenderTransform>
                                                <RotateTransform Angle="{Binding Path=IconRotationAngle,
                                                    RelativeSource={RelativeSource TemplatedParent}}" />
                                            </Path.RenderTransform>
                                        </Path>
                                    </Viewbox>
                                </Grid>
                            </Grid>
                        </controls:FixedAspectRatioPanel>

                        <ContentPresenter
                            x:Name="contentPresenter"
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                            Content="{TemplateBinding Content}"
                            ContentStringFormat="{TemplateBinding ContentStringFormat}"
                            RecognizesAccessKey="True"
                            Focusable="False"
                            Grid.Column="2" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style BasedOn="{StaticResource OcticonCircleButton}" TargetType="{x:Type controls:OcticonCircleButton}" />
</ResourceDictionary>
