import QtQuick
import QtQuick.Controls

Slider {
    id: root

    property var theme
    implicitHeight: 24

    background: Rectangle {
        x: root.leftPadding
        y: root.topPadding + root.availableHeight / 2 - height / 2
        width: root.availableWidth
        height: 4
        radius: 2
        color: root.theme ? root.theme.surfaceRaised : "#24243a"

        Rectangle {
            width: root.visualPosition * parent.width
            height: parent.height
            radius: 2
            color: root.theme ? root.theme.primary : "#89b4fa"
        }
    }

    handle: Rectangle {
        x: root.leftPadding + root.visualPosition * (root.availableWidth - width)
        y: root.topPadding + root.availableHeight / 2 - height / 2
        width: 14
        height: 14
        radius: 7
        color: root.theme ? root.theme.primary : "#89b4fa"
        border.color: root.theme ? root.theme.background : "#11111b"
        border.width: 2
    }
}