import QtQuick 2.12
import QtQuick.Controls 2.12

import Utils 1.0

TabButton {
    id: control

    contentItem: Text {
        text: control.text
        font.pixelSize: 18
        font.weight: Font.Bold
        opacity: enabled ? 1.0 : 0.3
        color: control.checked ? Palette.selectedTextColor : Palette.textColor
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Item {
        implicitWidth: 150
        implicitHeight: 58

        Rectangle {
            property bool selected: control.checked

            height: 2
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            color: Palette.alternativeBackgroundColor
            visible: selected

//            Behavior on selected {
//                PropertyAnimation {
//                    properties: "selected";
//                    easing.type: Easing.OutElastic;
//                    easing.amplitude: 0.2;
//                    easing.period: 0.2
//                }
//            }
        }
    }
}