import QtQuick
import QtQuick.Templates
import ZShell.Config
import qs.Services

RadioButton {
	id: root

	font.pointSize: Tokens.font.size.normal
	implicitHeight: Math.max(implicitIndicatorHeight, implicitContentHeight)
	implicitWidth: implicitIndicatorWidth + implicitContentWidth + contentItem.anchors.leftMargin

	contentItem: CustomText {
		anchors.left: outerCircle.right
		anchors.leftMargin: 10
		anchors.verticalCenter: parent.verticalCenter
		font.pointSize: root.font.pointSize
		text: root.text
	}
	indicator: Rectangle {
		id: outerCircle

		anchors.verticalCenter: parent.verticalCenter
		border.color: root.checked ? Colors.palette.m3primary : Colors.palette.m3onSurfaceVariant
		border.width: 2
		color: "transparent"
		implicitHeight: 16
		implicitWidth: 16
		radius: Tokens.rounding.full

		Behavior on border.color {
			CAnim {
			}
		}

		StateLayer {
			anchors.margins: -7
			color: root.checked ? Colors.palette.m3onSurface : Colors.palette.m3primary
			z: -1

			onClicked: {
				root.click();
			}
		}

		CustomRect {
			anchors.centerIn: parent
			color: Qt.alpha(Colors.palette.m3primary, root.checked ? 1 : 0)
			implicitHeight: 8
			implicitWidth: 8
			radius: Tokens.rounding.full
		}
	}
}