import QtQuick
import QtQuick.Controls
import QtQuick.Controls.impl
import ISC

// Checkbox styled to match MapTab's right-rail ReadoutPanel (square accent
// indicator + check icon) instead of the platform-default CheckBox look.
CheckBox {
    id: toggle
    indicator: Rectangle {
        implicitWidth: 18
        implicitHeight: 18
        x: toggle.leftPadding
        y: parent.height / 2 - height / 2
        radius: Theme.radiusXs
        color: toggle.checked ? Theme.primaryAccent : "transparent"
        border.width: Theme.borderThin
        border.color: toggle.checked ? Theme.primaryAccent : Theme.fieldBorder

        Behavior on color { ColorAnimation { duration: Theme.durationFast } }
        Behavior on border.color { ColorAnimation { duration: Theme.durationFast } }

        IconImage {
            anchors.centerIn: parent
            source: "../icons/check.svg"
            width: 12; height: 12
            sourceSize.width: 12
            sourceSize.height: 12
            color: Theme.panelBackground
            opacity: toggle.checked ? 1.0 : 0.0
            Behavior on opacity { NumberAnimation { duration: Theme.durationFast } }
        }
    }

    contentItem: Text {
        text: toggle.text
        color: Theme.headingColor
        font.family: Theme.uiFontFamily
        verticalAlignment: Text.AlignVCenter
        leftPadding: toggle.indicator.width + toggle.spacing
        font.pixelSize: toggle.font.pixelSize || Theme.fontXs
    }
}