<?php

use Elementor\Controls_Manager;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;

add_action('elementor/element/icon-list/section_text_style/before_section_end', function ($element, $args) {

    $element->add_control(
        'text-style-hover-divider',
        [
            'label' => esc_html__( 'Text Color Gradient Hover', 'motiox' ),
            'type' => Controls_Manager::SWITCHER,
            'separator' => 'before',
        ]
    );

    $element->add_responsive_control(
        'background_gradient_angle',
        [
            'label'      => esc_html__('Gradient Angle', 'motiox'),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => ['deg'],
            'range'      => [
                'deg' => [
                    'min'  => 0,
                    'max'  => 360,
                    'step' => 1,
                ],
            ],
            'selectors'  => [
                '{{WRAPPER}} .elementor-icon-list-item:hover .elementor-icon-list-text' => 'background-image: linear-gradient({{SIZE}}deg, {{background_gradient_start.VALUE}} {{background_gradient_start_position.SIZE}}, {{background_gradient_end.VALUE}} {{background_gradient_end_position.SIZE}});-webkit-background-clip: text;-webkit-text-fill-color: transparent;',

            ],
            'condition' =>[
                'text-style-hover-divider'=>'yes'
            ]
        ]
    );

    $element->add_responsive_control(
        'background_gradient_start',
        [
            'label'     => esc_html__('Start Color', 'motiox'),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .elementor-icon-list-item:hover .elementor-icon-list-text' => 'background-image: linear-gradient({{background_gradient_angle.SIZE}}deg, {{VALUE}} {{background_gradient_start_position.SIZE}}, {{background_gradient_end.VALUE}} {{background_gradient_end_position.SIZE}});-webkit-background-clip: text;-webkit-text-fill-color: transparent;',
            ],
            'condition' =>[
                'text-style-hover-divider'=>'yes'
            ]
        ]
    );

    $element->add_responsive_control(
        'background_gradient_start_position',
        [
            'label'      => esc_html__('Start Color Position (%)', 'motiox'),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => ['%', 'px', 'vw'],
            'range'      => [
                '%'  => [
                    'min'  => 0,
                    'max'  => 100,
                    'step' => 1,
                ],
                'px' => [
                    'min'  => 0,
                    'max'  => 1000,
                    'step' => 1,
                ],
                'vw' => [
                    'min'  => 0,
                    'max'  => 100,
                    'step' => 1,
                ],
            ],
            'selectors'  => [
                '{{WRAPPER}} .elementor-icon-list-item:hover .elementor-icon-list-text' => 'background-image: linear-gradient({{background_gradient_angle.SIZE}}deg, {{background_gradient_start.VALUE}} {{SIZE}}{{UNIT}}, {{background_gradient_end.VALUE}} {{background_gradient_end_position.SIZE}}{{background_gradient_end_position.UNIT}});-webkit-background-clip: text;-webkit-text-fill-color: transparent;',
            ],
            'condition' =>[
                'text-style-hover-divider'=>'yes'
            ]
        ]
    );


    $element->add_responsive_control(
        'background_gradient_end',
        [
            'label'     => esc_html__('End Color', 'motiox'),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .elementor-icon-list-item:hover .elementor-icon-list-text' => 'background-image: linear-gradient({{background_gradient_angle.SIZE}}deg, {{background_gradient_start.VALUE}} {{background_gradient_start_position.SIZE}}, {{VALUE}} {{background_gradient_end_position.SIZE}); -webkit-background-clip: text;-webkit-text-fill-color: transparent;',
            ],
            'condition' =>[
                'text-style-hover-divider'=>'yes'
            ]
        ]
    );

    $element->add_responsive_control(
        'background_gradient_end_position',
        [
            'label'          => esc_html__('End Color Position (%)', 'motiox'),
            'type'           => Controls_Manager::SLIDER,
            'default'        => [
                'unit' => '%',
            ],
            'tablet_default' => [
                'unit' => '%',
            ],
            'mobile_default' => [
                'unit' => '%',
            ],
            'size_units'     => ['%', 'px', 'vw'],
            'range'          => [
                '%'  => [
                    'min' => 1,
                    'max' => 100,
                ],
                'px' => [
                    'min' => 1,
                    'max' => 1000,
                ],
                'vw' => [
                    'min' => 1,
                    'max' => 100,
                ],
            ],
            'selectors'      => [
                '{{WRAPPER}} .elementor-icon-list-item:hover .elementor-icon-list-text' => 'background-image: linear-gradient({{background_gradient_angle.SIZE}}deg, {{background_gradient_start.VALUE}} {{background_gradient_start_position.SIZE}}{{background_gradient_start_position.UNIT}}, {{background_gradient_end.VALUE}} {{SIZE}}{{UNIT}});-webkit-background-clip: text;-webkit-text-fill-color: transparent;',
            ],
            'condition' =>[
                'text-style-hover-divider'=>'yes'
            ]
        ]
    );

},10,2);