button {
    background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
    color: {{ .Theme.Colors.Semantic.Text.Value }};
    border: 1px solid {{ .Theme.Colors.Semantic.Border.Value }};
    border-radius: {{ .Theme.Spacing.Radius }};
    padding: {{ .Theme.Spacing.Padding }};
    transition: all 0.2s ease;
}

button:hover {
    background-color: {{ .Theme.Colors.Semantic.Border.Value }};
}

button:active, 
button:checked {
    background-color: {{ .Theme.Colors.Semantic.Accent.Value }};
    color: {{ .Theme.Colors.Semantic.Background.Value }};
}

button:disabled {
    background-color: {{ .Theme.Colors.Semantic.Background.Value }};
    color: {{ .Theme.Colors.Semantic.Disabled.Value }};
    border-color: {{ .Theme.Colors.Semantic.Disabled.Value }};
}

button.suggested-action {
    background-color: {{ .Theme.Colors.Semantic.Accent.Value }};
    color: {{ .Theme.Colors.Semantic.Background.Value }};
    border-color: {{ .Theme.Colors.Semantic.Accent.Value }};
}

button.destructive-action {
    background-color: {{ .Theme.Colors.Semantic.Warn.Value }};
    color: {{ .Theme.Colors.Semantic.Background.Value }};
    border-color: {{ .Theme.Colors.Semantic.Warn.Value }};
}