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

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

// Small square icon button used in headers and hover toolbars.
export component ToolButton inherits Rectangle {
    in property <image> glyph;
    in property <color> tint: Theme.text-muted;
    in property <bool> active: false;
    callback clicked();

    width: 32px;
    height: 28px;
    border-radius: 4px;
    background: touch.has-hover ? Theme.selected-bg : transparent;

    Icon {
        source: root.glyph;
        icon-size: 18px;
        tint: root.active || touch.has-hover ? Theme.text-header : root.tint;
        x: (parent.width - self.width) / 2;
        y: (parent.height - self.height) / 2;
    }

    touch := TouchArea {
        mouse-cursor: pointer;
        clicked => {
            root.clicked();
        }
    }
}