/// TEMPORARY AI GENERATED FRONTEND \\\
///   NOT TO BE USED IN PRODUCTION  \\\

import { Theme } from "../theme.slint";

// Red mention counter ("3", "99+").
export component Badge inherits Rectangle {
    in property <int> count;

    visible: count > 0;
    height: 16px;
    width: max(16px, label.preferred-width + 10px);
    border-radius: 8px;
    background: Theme.danger;

    label := Text {
        text: root.count > 99 ? "99+" : "\{root.count}";
        color: white;
        font-size: 11px;
        font-weight: 700;
        horizontal-alignment: center;
        vertical-alignment: center;
    }
}