Hover And Click showing white rectangle ComboBox

Question

so i have been trying to get combo box design for a while now

I have gone 99% there but having a issue with the combo box hover effects its not working as expected

here is what I have currently
<!-- ComboBox Base Style -->

    <Style TargetType="ComboBox">

        <Setter Property="SnapsToDevicePixels" Value="True"/>

        <Setter Property="OverridesDefaultStyle" Value="True"/>

        <Setter Property="Background" Value="{StaticResource MediumBlue}"/>

        <Setter Property="Foreground" Value="{StaticResource TextWhite}"/>

        <Setter Property="BorderBrush" Value="{StaticResource BorderColor}"/>

        <Setter Property="BorderThickness" Value="1"/>

        <Setter Property="Height" Value="34"/>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="ComboBox">

                    <Grid>

                        <Border x:Name="OuterBorder"

                        Background="{TemplateBinding Background}"

                        BorderBrush="{TemplateBinding BorderBrush}"

                        BorderThickness="{TemplateBinding BorderThickness}"

                        CornerRadius="6">

                            <Grid>

                                <ContentPresenter x:Name="ContentSite"

                                          Content="{TemplateBinding SelectionBoxItem}"

                                          ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"

                                          Margin="10,0,30,0"

                                          VerticalAlignment="Center"

                                          HorizontalAlignment="Left"

                                          IsHitTestVisible="False"/>

                                <Path x:Name="Arrow"

                              Data="M 0 0 L 4 4 L 8 0 Z"

                              Fill="{StaticResource TextWhite}"

                              HorizontalAlignment="Right"

                              VerticalAlignment="Center"

                              Margin="0 0 10 0"

                              Width="8"

                              Height="4"/>

                            </Grid>

                        </Border>

                        <!-- Clickable Layer -->

                        <ToggleButton x:Name="ToggleButton"

                              Background="Transparent"

                              BorderThickness="0"

                              Focusable="False"

                              IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"

                              ClickMode="Press"

                              HorizontalAlignment="Stretch"

                              VerticalAlignment="Stretch"

                              Cursor="Hand"/>

                        <!-- Dropdown Popup -->

                        <Popup Name="Popup"

                       Placement="Bottom"

                       IsOpen="{TemplateBinding IsDropDownOpen}"

                       AllowsTransparency="True"

                       Focusable="False"

                       PopupAnimation="Slide">

                            <Grid MaxHeight="300" MinWidth="{TemplateBinding ActualWidth}">

                                <Border Background="{StaticResource MediumBlue}"

                                BorderBrush="{StaticResource BorderColor}"

                                BorderThickness="1"

                                CornerRadius="4"

                                Padding="4">

                                    <ScrollViewer>

                                        <StackPanel IsItemsHost="True"

                                            KeyboardNavigation.DirectionalNavigation="Contained"/>

                                    </ScrollViewer>

                                </Border>

                            </Grid>

                        </Popup>

                    </Grid>

                    <!-- Visual Triggers -->

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsMouseOver" Value="True">

                            <Setter TargetName="OuterBorder" Property="Background" Value="{StaticResource LightBlue}"/>

                        </Trigger>

                        <Trigger Property="IsDropDownOpen" Value="True">

                            <Setter TargetName="OuterBorder" Property="Background" Value="{StaticResource LightBlue}"/>

                            <Setter TargetName="OuterBorder" Property="BorderBrush" Value="{StaticResource AccentBlue}"/>

                        </Trigger>

                        <Trigger Property="IsEnabled" Value="False">

                            <Setter TargetName="OuterBorder" Property="Background" Value="#2A2D3E"/>

                            <Setter TargetName="Arrow" Property="Fill" Value="darkblue"/>

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <!-- ComboBoxItem Style -->

    <Style TargetType="ComboBoxItem">

        <Setter Property="Background" Value="Transparent"/>

        <Setter Property="Foreground" Value="{StaticResource TextWhite}"/>

        <Setter Property="Padding" Value="8,4"/>

        <Setter Property="HorizontalContentAlignment" Value="Left"/>

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

        <Setter Property="SnapsToDevicePixels" Value="True"/>

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="ComboBoxItem">

                    <Border x:Name="Border"

                    Background="{TemplateBinding Background}"

                    SnapsToDevicePixels="True">

                        <ContentPresenter HorizontalAlignment="Left"

                                  VerticalAlignment="Center"

                                  Margin="4,2"/>

                    </Border>

                    <ControlTemplate.Triggers>

                        <Trigger Property="IsHighlighted" Value="True">

                            <Setter TargetName="Border" Property="Background" Value="{StaticResource LightBlue}"/>

                            <Setter Property="Foreground" Value="{StaticResource TextWhite}"/>

                        </Trigger>

                        <Trigger Property="IsSelected" Value="True">

                            <Setter TargetName="Border" Property="Background" Value="{StaticResource AccentBlue}"/>

                            <Setter Property="Foreground" Value="{StaticResource TextWhite}"/>

                        </Trigger>

                        <Trigger Property="IsEnabled" Value="False">

                            <Setter Property="Foreground" Value="Gray"/>

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>  

and please see below a image of what I am getting when trying to hover over

I have 99% of it done I cant understand why the hover wont update with the
controltemplate triggers

any help would be very much appreciated
elfenliedtopfan5