import QtQuick
import QtQuick.Controls

Switch {
    id: root

    property var theme
    implicitWidth: 42
    implicitHeight: 24

    indicator: Rectangle {
        x: root.leftPadding
        y: (root.height - height) / 2
        width: 40
        height: 22
        radius: 11
        color: root.checked && root.enabled
               ? (root.theme ? root.theme.primary : "#89b4fa")
               : (root.theme ? root.theme.surfaceRaised : "#24243a")
        border.color: root.theme ? root.theme.border : "#313244"

        Rectangle {
            x: root.checked ? parent.width - width - 3 : 3
            anchors.verticalCenter: parent.verticalCenter
            width: 16
            height: 16
            radius: 8
            color: root.checked ? (root.theme ? root.theme.background : "#11111b") : (root.theme ? root.theme.mutedText : "#9399b2")
            Behavior on x { NumberAnimation { duration: 120 } }
        }
    }
}