import { Theme } from "theme.slint";

export component GradientIcon inherits Rectangle {
    in property <image> icon;

    background: Theme.gradient-main;
    border-radius: Theme.radius;
    drop-shadow-offset-x: Theme.shadow-primary-x;
    drop-shadow-offset-y: Theme.shadow-primary-y;
    drop-shadow-blur: Theme.shadow-primary-blur;
    drop-shadow-color: touch.has-hover ? Theme.shadow-color : transparent;
    horizontal-stretch: 0;

    animate drop-shadow-color { duration: 300ms; }

    touch := TouchArea { }

    Image {
        width: 24px;
        height: 24px;
        source: icon;
        colorize: white;
    }
}