import Quickshell
import QtQuick.Shapes
import qs.Services
import QtQuick

Item {
    anchors {
        top: parent.top
        bottom: parent.bottom
    }
    width: children[1].width + 16

    Rectangle {
        anchors.fill: parent
        anchors.margins: 4
        anchors.leftMargin: 2
        anchors.rightMargin: 2
        color: hover.hovered ? "#11ffffff" : "#00ffffff" 
        Behavior on color {ColorAnimation {duration: 150}}
        radius: 8
    }
    PercentIndicator {
        x: 8
        anchors.verticalCenter: parent.verticalCenter
        width: 26
        height: width
        percent: Brightness.monitors[0].value / Brightness.monitors[0].max
        Image {
            anchors.centerIn: parent
            width: 20
            height: width
            sourceSize {width: width; height: height}
            source: Quickshell.iconPath("brightnesssettings")
        }
    }
    HoverHandler {id: hover}
    TapHandler {onTapped: {
        background.index = 6
    }}
}