import QtQuick as Quick
import QtQuick.Controls
import Fluent

Quick.Item{
    id:control
    property int radius: 4
    property bool shadow: true
    property alias border: d.border
    property var bottomMargin: undefined
    property var topMargin: undefined
    property var leftMargin: undefined
    property var rightMargin: undefined
    property Quick.color color: Theme.dark ? Qt.rgba(42/255,42/255,42/255,1) : Qt.rgba(254/255,254/255,254/255,1)
    property alias gradient : rect_border.gradient
    Quick.Rectangle{
        id:d
        property Quick.color startColor: Qt.lighter(d.border.color,1.25)
        property Quick.color endColor: shadow ? control.border.color : startColor
        visible: false
        border.color: Theme.dark ? Qt.rgba(48/255,48/255,48/255,1) : Qt.rgba(188/255,188/255,188/255,1)
    }
    Quick.Rectangle{
        id:rect_border
        anchors.fill: parent
        radius: control.radius
        gradient: Quick.Gradient {
            Quick.GradientStop { position: 0.0; color: d.startColor }
            Quick.GradientStop { position: 1 - 3/control.height; color: d.startColor }
            Quick.GradientStop { position: 1.0; color: d.endColor}
        }
    }
    Quick.Rectangle{
        id:rect_back
        anchors{
            fill: parent
            margins: control.border.width
            topMargin: control.topMargin
            bottomMargin: control.bottomMargin
            leftMargin: control.leftMargin
            rightMargin: control.rightMargin
        }
        Quick.Behavior on anchors.bottomMargin {
            Quick.NumberAnimation{
                easing.type: Easing.OutCubic
                duration: 167
            }
        }
        radius: control.radius
        color: control.color
    }
}