import QtQuick

Item {
    id: root

    width:  pill.width
    height: pill.height

    BarPill {
        id: pill

        Text {
            text:           NotificationsState.unreadCount > 0 ? "󰂞" : "󰂜"
            color:          NotificationsState.unreadCount > 0 ? Theme.yellow : Theme.subtle
            font.pixelSize: Theme.fontSize
            font.family:    Theme.font

            Behavior on color { ColorAnimation { duration: 150 } }
        }
    }

    // Overlaps the pill corner, so z and sibling anchors are used
    Rectangle {
        visible:             NotificationsState.unreadCount > 0
        width:               Math.max(15, badgeLabel.implicitWidth + 5)
        height:              13
        radius:              7
        color:               Theme.red
        z:                   10
        anchors.top:         pill.top
        anchors.right:       pill.right
        anchors.topMargin:   -3
        anchors.rightMargin: -3

        Text {
            id:               badgeLabel
            anchors.centerIn: parent
            text:             NotificationsState.unreadCount > 9
                              ? "9+" : NotificationsState.unreadCount.toString()
            color:            "white"
            font.pixelSize:   8
            font.family:      Theme.font
            font.bold:        true
        }
    }

    MouseArea {
        anchors.fill: pill
        cursorShape:  Qt.PointingHandCursor
        onClicked:    NotificationsState.togglePanel()
    }
}