check, radio {
    margin: 0 {{ .Theme.Spacing.Margin }};
    min-height: 18px;
    min-width: 18px;
    border: 1px solid {{ .Theme.Colors.Semantic.Border.Value }};
    border-radius: {{ .Theme.Spacing.Radius }};
    background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
    color: transparent;
    -gtk-icon-source: none;
    transition: all 0.2s ease;
}

radio {
    border-radius: 50%;
}

check:checked {
    background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
    border-color: {{ .Theme.Colors.Semantic.Accent.Value }};
    background-image: 
        linear-gradient(45deg, transparent 45%, {{ .Theme.Colors.Semantic.Accent.Value }} 45%, {{ .Theme.Colors.Semantic.Accent.Value }} 55%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, {{ .Theme.Colors.Semantic.Accent.Value }} 45%, {{ .Theme.Colors.Semantic.Accent.Value }} 55%, transparent 55%);
    background-size: 70% 70%;
    background-repeat: no-repeat;
    background-position: center;
}

radio:checked {
    background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
    border-color: {{ .Theme.Colors.Semantic.Accent.Value }};
    background-image: radial-gradient(circle, {{ .Theme.Colors.Semantic.Accent.Value }} 35%, transparent 40%);
}

check:indeterminate {
    background-color: {{ .Theme.Colors.Semantic.SurfaceAlt.Value }};
    border-color: {{ .Theme.Colors.Semantic.Accent.Value }};
    background-image: linear-gradient(to right, {{ .Theme.Colors.Semantic.Accent.Value }}, {{ .Theme.Colors.Semantic.Accent.Value }});
    background-size: 60% 2px;
    background-repeat: no-repeat;
    background-position: center;
}

check:disabled,
radio:disabled {
    background-color: {{ .Theme.Colors.Semantic.Background.Value }};
    border-color: {{ .Theme.Colors.Semantic.Disabled.Value }};
    color: transparent;
    background-image: none;
}