<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <!--
    The phone's own control styles. The desktop head has an equivalent block in its App.axaml and the two
    deliberately do not share one: the palette is shared because a colour must not drift, but a control's
    size is a property of the input device. Every touch target here is at least 44 effective pixels tall,
    which is the number the desktop's 28-pixel rows would fail.

    Classes rather than implicit styles for the buttons, because the shell needs three that differ in
    meaning rather than in degree: the accent one is what the screen wants you to do, the outlined one is
    the alternative, and the red one is the one that costs something.
  -->

  <Style Selector="Button.primary">
    <Setter Property="Height" Value="48" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Background" Value="{StaticResource Accent}" />
    <Setter Property="Foreground" Value="{StaticResource Canvas}" />
    <Setter Property="CornerRadius" Value="6" />
    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="FontWeight" Value="SemiBold" />
  </Style>
  <Style Selector="Button.primary:pressed /template/ ContentPresenter">
    <Setter Property="Background" Value="{StaticResource Accent}" />
    <Setter Property="Opacity" Value="0.82" />
  </Style>

  <!--
    Disabled is drawn as flat and unlit rather than merely dimmed. The design's CONTINUE button on the
    recovery screen is disabled until the checkbox is ticked, and a user who cannot tell it is disabled
    reads the screen as broken rather than as waiting for them.
  -->
  <Style Selector="Button.primary:disabled /template/ ContentPresenter">
    <Setter Property="Background" Value="#1A1F1D" />
    <Setter Property="TextElement.Foreground" Value="{StaticResource TextFaint}" />
  </Style>

  <Style Selector="Button.secondary">
    <Setter Property="Height" Value="48" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderBrush" Value="{StaticResource BorderMid}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Foreground" Value="{StaticResource Text}" />
    <Setter Property="CornerRadius" Value="6" />
    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
    <Setter Property="FontSize" Value="11.5" />
    <Setter Property="FontWeight" Value="SemiBold" />
  </Style>

  <Style Selector="Button.danger">
    <Setter Property="Height" Value="48" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderBrush" Value="{StaticResource DangerSoft}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Foreground" Value="{StaticResource Danger}" />
    <Setter Property="CornerRadius" Value="5" />
    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
    <Setter Property="FontSize" Value="10.5" />
    <Setter Property="FontWeight" Value="SemiBold" />
  </Style>

  <!-- A row in a list: the whole row is the target, and it is 54 tall because a thumb is not a mouse. -->
  <Style Selector="Button.row">
    <Setter Property="MinHeight" Value="54" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="CornerRadius" Value="0" />
    <Setter Property="Padding" Value="16,6" />
  </Style>
  <Style Selector="Button.row:pressed /template/ ContentPresenter">
    <Setter Property="Background" Value="{StaticResource Hover}" />
  </Style>

  <!--
    A category chip. A RadioButton rather than a ToggleButton because the four are exclusive and a screen
    reader should say so; the bullet its default template draws is removed, since the chip's own fill is
    what carries the state.
  -->
  <Style Selector="RadioButton.chip">
    <Setter Property="MinHeight" Value="34" />
    <Setter Property="Padding" Value="12,6" />
    <Setter Property="CornerRadius" Value="17" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderBrush" Value="{StaticResource BorderMid}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Foreground" Value="{StaticResource TextDim}" />
    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
    <Setter Property="FontSize" Value="10" />
    <Setter Property="FontWeight" Value="Medium" />
    <Setter Property="Template">
      <ControlTemplate>
        <Border Name="Chip" Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                CornerRadius="{TemplateBinding CornerRadius}"
                Padding="{TemplateBinding Padding}"
                MinHeight="{TemplateBinding MinHeight}">
          <ContentPresenter Content="{TemplateBinding Content}"
                            HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Border>
      </ControlTemplate>
    </Setter>
  </Style>
  <Style Selector="RadioButton.chip:checked">
    <Setter Property="Background" Value="{StaticResource Accent}" />
    <Setter Property="BorderBrush" Value="{StaticResource Accent}" />
    <Setter Property="Foreground" Value="{StaticResource Canvas}" />
  </Style>

  <Style Selector="TextBox.field">
    <Setter Property="Height" Value="48" />
    <Setter Property="Padding" Value="14,0" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Background" Value="{StaticResource Field}" />
    <Setter Property="BorderBrush" Value="{StaticResource BorderMid}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="CornerRadius" Value="6" />
    <Setter Property="Foreground" Value="{StaticResource Text}" />
    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
    <Setter Property="FontSize" Value="12" />
  </Style>

  <!--
    The live dot, and the class name is the same one the desktop sidebar uses so the two heads cannot
    drift on what green means: a terminal is open on this host right now. Deliberately not reachability —
    nothing pings anything, and a dot meaning "up" would be a claim the application never checks.
  -->
  <Style Selector="Ellipse.dot">
    <Setter Property="Width" Value="7" />
    <Setter Property="Height" Value="7" />
    <Setter Property="Fill" Value="{StaticResource TextGhost}" />
  </Style>
  <Style Selector="Ellipse.dot.live">
    <Setter Property="Fill" Value="{StaticResource Accent}" />
  </Style>

  <!-- Every label, count, address and fingerprint in this design is monospace. See Palette.axaml. -->
  <Style Selector="TextBlock.mono">
    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
    <Setter Property="Foreground" Value="{StaticResource Text}" />
    <Setter Property="FontSize" Value="12" />
  </Style>
  <Style Selector="TextBlock.label">
    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
    <Setter Property="Foreground" Value="{StaticResource TextDim}" />
    <Setter Property="FontSize" Value="9.5" />
    <Setter Property="FontWeight" Value="SemiBold" />
  </Style>
  <Style Selector="TextBlock.detail">
    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
    <Setter Property="Foreground" Value="{StaticResource TextFaint}" />
    <Setter Property="FontSize" Value="10" />
  </Style>
  <Style Selector="TextBlock.body">
    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
    <Setter Property="Foreground" Value="{StaticResource TextDim}" />
    <Setter Property="FontSize" Value="11" />
    <Setter Property="LineHeight" Value="19" />
    <Setter Property="TextWrapping" Value="Wrap" />
  </Style>
  <Style Selector="TextBlock.title">
    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
    <Setter Property="Foreground" Value="{StaticResource Text}" />
    <Setter Property="FontSize" Value="15" />
    <Setter Property="FontWeight" Value="SemiBold" />
  </Style>

  <!--
    A fingerprint, and it is a style rather than four repeated setters because the rule it encodes is a
    product rule: never truncated, and always breakable across lines rather than clipped. Four screens show
    one, and the day one of them clips is the day somebody approves the wrong key.
  -->
  <Style Selector="TextBlock.fingerprint">
    <Setter Property="FontFamily" Value="{StaticResource MonoFont}" />
    <Setter Property="Foreground" Value="{StaticResource Text}" />
    <Setter Property="FontSize" Value="11" />
    <Setter Property="LineHeight" Value="18" />
    <Setter Property="TextWrapping" Value="Wrap" />
  </Style>

</Styles>
