<?php

namespace AtomicSlider\Traits;

use Elementor\Plugin;
use AtomicSlider\Utils;
use Elementor\Repeater;
use Elementor\Icons_Manager;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Text_Stroke;

defined( 'ABSPATH' ) || die();

trait Global_Widget_Controls {

	/**
	 * Register Group of Date controls
	 */
	protected function register_date_controls() {

		$this->add_control(
			'show_date',
			[
				'label'     => esc_html__('Date', 'atomic-slider'),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'yes',
				'separator' => 'before'
			]
		);

		$this->add_control(
			'human_diff_time',
			[
				'label'     => esc_html__('Human Different Time', 'atomic-slider'),
				'type'      => Controls_Manager::SWITCHER,
				'condition' => [
					'show_date' => 'yes'
				]
			]
		);

		$this->add_control(
			'human_diff_time_short',
			[
				'label'       => esc_html__('Time Short Format', 'atomic-slider'),
				'description' => esc_html__('This will work for Hours, Minute and Seconds', 'atomic-slider'),
				'type'        => Controls_Manager::SWITCHER,
				'condition'   => [
					'human_diff_time' => 'yes',
					'show_date'       => 'yes'
				]
			]
		);

		$this->add_control(
			'show_time',
			[
				'label'     => esc_html__('Show Time', 'atomic-slider'),
				'type'      => Controls_Manager::SWITCHER,
				'condition' => [
					'human_diff_time' => '',
					'show_date'       => 'yes'
				]
			]
		);
	}

	/**
	 * Register Reading Time controls
	 */
	protected function register_reading_time_controls() {

		$this->add_control(
			'show_reading_time',
			[
				'label'     => esc_html__('Reading Time', 'atomic-slider'),
				'type'      => Controls_Manager::SWITCHER,
				'separator' => 'before',
			]
		);
		$this->add_control(
			'avg_reading_speed',
			[
				'label'       => esc_html__('Reading Speed', 'atomic-slider'),
				'description' => esc_html__('the average reading speed of most adults is around 200 to 250 words per minute', 'atomic-slider'),
				'type'        => Controls_Manager::NUMBER,
				'min'           => 0,
				'default'       => 200,
				'condition'   => [
					'show_reading_time'       => 'yes'
				]
			]
		);

		/**
		 * Global asa_link_new_tab control
		 */
		$this->register_asa_link_new_tab_controls();
		$this->add_control(
			'hr_link',
			[
				'type'      => Controls_Manager::DIVIDER,
			]
		);
	}

	/**
	 * Register Group of Title controls
	 */
	protected function register_title_controls() {

		$this->add_control(
			'show_title',
			[
				'label'   => esc_html__('Title', 'atomic-slider'),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'title_tags',
			[
				'label'     => __('Title HTML Tag', 'atomic-slider'),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'h3',
				'options'   => atomicslider_title_tags(),
				'condition' => [
					'show_title' => 'yes'
				]
			]
		);
	}
	/**
	 * Register Group of Text controls
	 */
	protected function register_text_controls() {
		$this->add_control(
			'show_excerpt',
			[
				'label'   => esc_html__('Show Text', 'atomic-slider'),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
				'separator' => 'before'
			]
		);

		$this->add_control(
			'excerpt_length',
			[
				'label'       => esc_html__('Text Limit', 'atomic-slider'),
				'description' => esc_html__('It\'s just work for main content, but not working with excerpt. If you set 0 so you will get full main content.', 'atomic-slider'),
				'type'        => Controls_Manager::NUMBER,
				'default'     => 20,
				'condition'   => [
					'show_excerpt' => 'yes'
				],
			]
		);

		$this->add_control(
            'ellipsis',
            [
                'label' => esc_html__('Ellipsis', 'atomic-slider'),
                'type' => Controls_Manager::TEXT,
                'condition' => [
                    'show_excerpt' => 'yes',
					'excerpt_length!' => [0, ''],
                ],
				'ai' => [
                    'active' => false,
                ],
            ]
        );

		$this->add_control(
			'strip_shortcode',
			[
				'label'     => esc_html__('Strip Shortcode', 'atomic-slider'),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'yes',
				'condition' => [
					'show_excerpt' => 'yes',
				],
			]
		);
	}

	protected function register_asa_link_new_tab_controls() {
		$this->add_control(
			'asa_link_new_tab',
			[ 
				'label'              => esc_html__( 'Link Open in a New Tab', 'atomic-slider' ),
				'type'               => Controls_Manager::SWITCHER,
				'separator'          => 'before',
				'frontend_available' => true,
			]
		);
	}

	protected function register_title_animation_controls() {
		$this->add_control(
			'title_style',
			[
				'label'   => esc_html__('Style', 'atomic-slider'),
				'type'    => Controls_Manager::SELECT,
				'default' => '',
				'options' => [
					''               => esc_html__('Default', 'atomic-slider'),
					'style-1'        => esc_html__('Style 1', 'atomic-slider'),
					'style-2'        => esc_html__('Style 2', 'atomic-slider'),
					'style-3'        => esc_html__('Style 3', 'atomic-slider'),
					'style-4'        => esc_html__('Style 4', 'atomic-slider'),
					'style-5'        => esc_html__('Style 5', 'atomic-slider'),
				],
			]
		);
	}

	/**
	 * Register Group of pagination controls
	 */
	protected function register_pagination_controls() {

		$this->start_controls_section(
			'section_style_pagination',
			[
				'label'     => esc_html__('Pagination', 'atomic-slider'),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'show_pagination' => 'yes',
				],
			]
		);

		$this->add_responsive_control(
			'pagination_alignment',
			[
				'label'   => __('Alignment', 'atomic-slider'),
				'type'    => Controls_Manager::CHOOSE,
				'options' => [
					'left'   => [
						'title' => __('Left', 'atomic-slider'),
						'icon'  => 'eicon-text-align-left',
					],
					'center'   => [
						'title' => __('Center', 'atomic-slider'),
						'icon'  => 'eicon-text-align-center',
					],
					'flex-end'  => [
						'title' => __('Right', 'atomic-slider'),
						'icon'  => 'eicon-text-align-right',
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-pagination-wrap .asa-pagination' => 'justify-content: {{VALUE}};',
				],
			]
		);

		$this->start_controls_tabs('tabs_pagination_style');

		$this->start_controls_tab(
			'tab_pagination_normal',
			[
				'label' => esc_html__('Normal', 'atomic-slider'),
			]
		);

		$this->add_control(
			'pagination_color',
			[
				'label'     => esc_html__('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} ul.asa-pagination li a, {{WRAPPER}} ul.asa-pagination li span' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'      => 'pagination_background',
				'selector'  => '{{WRAPPER}} ul.asa-pagination li a',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'pagination_border',
				'label'    => esc_html__('Border', 'atomic-slider'),
				'selector' => '{{WRAPPER}} ul.asa-pagination li a',
			]
		);

		$this->add_responsive_control(
			'pagination_radius',
			[
				'label'     => esc_html__('Border Radius', 'atomic-slider'),
				'type'      => Controls_Manager::DIMENSIONS,
				'selectors' => [
					'{{WRAPPER}} ul.asa-pagination li a' => 'border-radius: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
				],
			]
		);

		$this->add_responsive_control(
			'pagination_padding',
			[
				'label'     => esc_html__('Padding', 'atomic-slider'),
				'type'      => Controls_Manager::DIMENSIONS,
				'selectors' => [
					'{{WRAPPER}} ul.asa-pagination li a' => 'padding: {{TOP}}px {{RIGHT}}px {{BOTTOM}}px {{LEFT}}px;',
				],
			]
		);

		$this->add_responsive_control(
			'pagination_offset',
			[
				'label'     => esc_html__('Offset', 'atomic-slider'),
				'type'      => Controls_Manager::SLIDER,
				'selectors' => [
					'{{WRAPPER}} .asa-pagination' => 'margin-top: {{SIZE}}px;',
				],
			]
		);

		$this->add_responsive_control(
			'pagination_space',
			[
				'label'     => esc_html__('Spacing', 'atomic-slider'),
				'type'      => Controls_Manager::SLIDER,
				'selectors' => [
					'{{WRAPPER}} .asa-pagination'     => 'margin-left: -{{SIZE}}px;',
					'{{WRAPPER}} .asa-pagination > *' => 'padding-left: {{SIZE}}px;',
				],
			]
		);

		$this->add_responsive_control(
			'pagination_arrow_size',
			[
				'label'     => esc_html__('Arrow Size', 'atomic-slider'),
				'type'      => Controls_Manager::SLIDER,
				'selectors' => [
					'{{WRAPPER}} ul.asa-pagination li a i' => 'font-size: {{SIZE}}px;',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'pagination_typography',
				'label'    => esc_html__('Typography', 'atomic-slider'),
				'selector' => '{{WRAPPER}} ul.asa-pagination li a, {{WRAPPER}} ul.asa-pagination li span',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_pagination_hover',
			[
				'label' => esc_html__('Hover', 'atomic-slider'),
			]
		);

		$this->add_control(
			'pagination_hover_color',
			[
				'label'     => esc_html__('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} ul.asa-pagination li a:hover' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'pagination_hover_border_color',
			[
				'label'     => esc_html__('Border Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} ul.asa-pagination li a:hover' => 'border-color: {{VALUE}};',
				],
				'condition' => [
					'pagination_border_border!' => ''
				]
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'pagination_hover_background',
				'types'    => ['classic', 'gradient'],
				'selector' => '{{WRAPPER}} ul.asa-pagination li a:hover',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_pagination_active',
			[
				'label' => esc_html__('Active', 'atomic-slider'),
			]
		);

		$this->add_control(
			'pagination_active_color',
			[
				'label'     => esc_html__('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} ul.asa-pagination li.asa-active a' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'pagination_active_border_color',
			[
				'label'     => esc_html__('Border Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} ul.asa-pagination li.asa-active a' => 'border-color: {{VALUE}};',
				],
				'condition' => [
					'pagination_border_border!' => ''
				]
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'pagination_active_background',
				'selector' => '{{WRAPPER}} ul.asa-pagination li.asa-active a',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();
	}

	protected function register_style_controls_filter() {
		$this->start_controls_section(
			'section_design_filter',
			[ 
				'label'     => esc_html__( 'Filter Bar', 'atomic-slider' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 
					'show_filter_bar' => 'yes',
				],
			]
		);

		$this->add_control(
			'filter_alignment',
			[ 
				'label'     => esc_html__( 'Alignment', 'atomic-slider' ),
				'type'      => Controls_Manager::CHOOSE,
				'default'   => 'center',
				'options'   => [ 
					'left'   => [ 
						'title' => esc_html__( 'Left', 'atomic-slider' ),
						'icon'  => 'eicon-text-align-left',
					],
					'center' => [ 
						'title' => esc_html__( 'Center', 'atomic-slider' ),
						'icon'  => 'eicon-text-align-center',
					],
					'right'  => [ 
						'title' => esc_html__( 'Right', 'atomic-slider' ),
						'icon'  => 'eicon-text-align-right',
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .uk-grid-filters-wrapper' => 'text-align: {{VALUE}}',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[ 
				'name'     => 'typography_filter',
				'label'    => esc_html__( 'Typography', 'atomic-slider' ),
				'selector' => '{{WRAPPER}} .uk-grid-filters li a',
			]
		);

		$this->add_control(
			'filter_spacing',
			[ 
				'label'     => esc_html__( 'Bottom Space', 'atomic-slider' ),
				'type'      => Controls_Manager::SLIDER,
				'selectors' => [ 
					'{{WRAPPER}} .uk-grid-filters-wrapper' => 'margin-bottom: {{SIZE}}{{UNIT}}',
				],
			]
		);

		$this->start_controls_tabs( 'tabs_style_desktop' );

		$this->start_controls_tab(
			'filter_tab_desktop',
			[ 
				'label' => __( 'Desktop', 'atomic-slider' )
			]
		);

		$this->add_control(
			'desktop_filter_normal',
			[ 
				'label' => esc_html__( 'NORMAL', 'atomic-slider' ),
				'type'  => Controls_Manager::HEADING,
			]
		);

		$this->add_control(
			'color_filter',
			[ 
				'label'     => esc_html__( 'Text Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'separator' => 'before',
				'selectors' => [ 
					'{{WRAPPER}} .uk-grid-filters li a' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'desktop_filter_background',
			[ 
				'label'     => esc_html__( 'Background', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .uk-grid-filters li' => 'background-color: {{VALUE}}',
				],
			]
		);

		$this->add_responsive_control(
			'desktop_filter_padding',
			[ 
				'label'      => __( 'Padding', 'atomic-slider' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .uk-grid-filters li ' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				]
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[ 
				'name'        => 'desktop_filter_border',
				'placeholder' => '1px',
				'default'     => '1px',
				'selector'    => '{{WRAPPER}} .uk-grid-filters li'
			]
		);

		$this->add_responsive_control(
			'desktop_filter_radius',
			[ 
				'label'      => __( 'Radius', 'atomic-slider' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .uk-grid-filters li' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				]
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[ 
				'name'     => 'desktop_filter_shadow',
				'selector' => '{{WRAPPER}} .uk-grid-filters li'
			]
		);

		$this->add_control(
			'filter_item_spacing',
			[ 
				'label'     => esc_html__( 'Space Between', 'atomic-slider' ),
				'type'      => Controls_Manager::SLIDER,
				'selectors' => [ 
					'{{WRAPPER}} .uk-grid-filters > li.uk-grid-filter:not(:last-child)'  => 'margin-right: calc({{SIZE}}{{UNIT}}/2)',
					'{{WRAPPER}} .uk-grid-filters > li.uk-grid-filter:not(:first-child)' => 'margin-left: calc({{SIZE}}{{UNIT}}/2)',
				],
			]
		);

		$this->add_control(
			'desktop_filter_hover',
			[ 
				'label'     => esc_html__( 'HOVER', 'atomic-slider' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'color_filter_hover',
			[ 
				'label'     => esc_html__( 'Text Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'separator' => 'before',
				'selectors' => [ 
					'{{WRAPPER}} .uk-grid-filters li:hover a' => 'color: {{VALUE}}; border-bottom-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'desktop_hover_filter_background',
			[ 
				'label'     => esc_html__( 'Background', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .uk-grid-filters li:hover' => 'background-color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'desktop_hover_filter_border_color',
			[ 
				'label'     => esc_html__( 'Border Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .uk-grid-filters li:hover' => 'border-color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'desktop_filter_active',
			[ 
				'label'     => esc_html__( 'ACTIVE', 'atomic-slider' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'color_filter_active',
			[ 
				'label'     => esc_html__( 'Text Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'separator' => 'before',
				'selectors' => [ 
					'{{WRAPPER}} .uk-grid-filters li.asa-active a' => 'color: {{VALUE}}; border-bottom-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'desktop_active_filter_background',
			[ 
				'label'     => esc_html__( 'Background', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .uk-grid-filters li.asa-active' => 'background-color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'desktop_active_filter_border_color',
			[ 
				'label'     => esc_html__( 'Border Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .uk-grid-filters li.asa-active' => 'border-color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'desktop_active_filter_radius',
			[ 
				'label'      => __( 'Radius', 'atomic-slider' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .uk-grid-filters li.asa-active' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				]
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[ 
				'name'     => 'desktop_active_filter_shadow',
				'selector' => '{{WRAPPER}} .uk-grid-filters li.asa-active'
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'filter_tab_mobile',
			[ 
				'label' => __( 'Mobile', 'atomic-slider' )
			]
		);

		$this->add_control(
			'filter_mbtn_width',
			[ 
				'label'     => __( 'Button Width(%)', 'atomic-slider' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min' => 2,
						'max' => 100
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .asa-button' => 'width: {{SIZE}}%;'
				]
			]
		);

		$this->add_responsive_control(
			'filter_mbtn_padding',
			[ 
				'label'      => __( 'Padding', 'atomic-slider' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .asa-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				]
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[ 
				'name'     => 'filter_mbtn_border',
				'label'    => esc_html__( 'Border', 'atomic-slider' ),
				'selector' => '{{WRAPPER}} .asa-button',
			]
		);

		$this->add_responsive_control(
			'filter_mbtn_border_radius',
			[ 
				'label'      => __( 'Border Radius', 'atomic-slider' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .asa-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				]
			]
		);

		$this->add_control(
			'filter_mbtn_color',
			[ 
				'label'     => __( 'Button Text Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .asa-button' => 'color: {{VALUE}};'
				]
			]
		);

		$this->add_control(
			'filter_mbtn_background',
			[ 
				'label'     => __( 'Button Background', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .asa-button' => 'background-color: {{VALUE}};'
				]
			]
		);

		$this->add_control(
			'filter_mbtn_dropdown_color',
			[ 
				'label'     => __( 'Text Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .asa-dropdown-nav li a' => 'color: {{VALUE}};'
				]
			]
		);

		$this->add_control(
			'filter_mbtn_dropdown_background',
			[ 
				'label'     => __( 'Dropdown Background', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .asa-dropdown' => 'background-color: {{VALUE}};'
				]
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[ 
				'name'     => 'filter_mbtn_dropdown_typography',
				'label'    => esc_html__( 'Typography', 'atomic-slider' ),
				'selector' => '{{WRAPPER}} .asa-dropdown-nav li',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();
	}

	// Global controls for Advanced Image Gallery and ACF Slider
	protected function register_aig_controls() {
		$this->start_controls_section(
			'section_custom_gallery_layout',
			[
				'label'     => esc_html__('Gallery Layout', 'atomic-slider'),
			]
		);

		$this->add_control(
			'grid_type',
			[
				'label'   => esc_html__('Gallery Mode', 'atomic-slider'),
				'type'    => Controls_Manager::CHOOSE,
				'options' => [
					'normal' => [
						'title' => esc_html__('Normal', 'atomic-slider'),
						'icon'  => 'eicon-gallery-grid',
					],
					'masonry' => [
						'title' => esc_html__('Masonry', 'atomic-slider'),
						'icon'  => 'eicon-gallery-masonry',
					],
					'justified' => [
						'title' => esc_html__('Justified', 'atomic-slider'),
						'icon'  => 'eicon-gallery-justified',
					],
				],
				'default' => 'normal',
				'condition' => [
					'_skin' => '',
				],
			]
		);



		$this->add_responsive_control(
			'item_ratio',
			[
				'label'   => esc_html__('Image Height', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 265,
				],
				'range' => [
					'px' => [
						'min'  => 50,
						'max'  => 500,
						'step' => 5,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-advanced-image-gallery-thumbnail img' => 'height: {{SIZE}}px',
				],
				'conditions' => [
					'relation' => 'and',
					'terms' => [
						[
							'name'     => '_skin',
							'operator' => 'in',
							'value'    => ['', 'asa-carousel']
						],
						[
							'name'     => 'grid_type',
							'operator' => '==',
							'value'    => 'normal'
						],
					]
				]
			]
		);

		$this->add_control(
			'gallery_item_height',
			[
				'label'   => esc_html__('Image Height', 'atomic-slider'),
				'description'   => esc_html__('Some times image height not exactly same because of auto row adjustment.', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 260,
				],
				'range' => [
					'px' => [
						'min'  => 50,
						'max'  => 500,
						'step' => 5,
					],
				],
				'condition' => [
					'grid_type' => 'justified'
				]
			]
		);

		$this->add_responsive_control(
			'columns',
			[
				'label'          => esc_html__('Columns', 'atomic-slider'),
				'type'           => Controls_Manager::SELECT,
				'default'        => '4',
				'tablet_default' => '3',
				'mobile_default' => '1',
				'options'        => [
					'1' => '1',
					'2' => '2',
					'3' => '3',
					'4' => '4',
					'5' => '5',
					'6' => '6',
				],
				'condition' => [
					'_skin' => ''
				]
			]
		);

		$this->add_responsive_control(
			'carousel_columns',
			[
				'label'          => esc_html__('Columns', 'atomic-slider'),
				'type'           => Controls_Manager::SELECT,
				'default'        => '4',
				'tablet_default' => '3',
				'mobile_default' => '1',
				'options'        => [
					'1' => '1',
					'2' => '2',
					'3' => '3',
					'4' => '4',
					'5' => '5',
					'6' => '6',
				],
				'condition' => [
					'_skin' => 'asa-carousel'
				]
			]
		);

		$this->add_responsive_control(
			'row_column_gap',
			[
				'label'   => esc_html__('Item Gap', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min'  => 0,
						'max'  => 100,
						'step' => 5,
					],
				],
				'condition' => [
					'grid_type' => 'justified'
				],
			]
		);

		$this->add_responsive_control(
			'item_gap',
			[
				'label'   => esc_html__('Column Gap', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 0,
				],
				'range' => [
					'px' => [
						'min'  => 0,
						'max'  => 100,
						'step' => 5,
					],  
				],
				'selectors' => [
					'{{WRAPPER}} .asa-advanced-image-gallery.uk-grid'     => is_rtl() ? 'margin-right: -{{SIZE}}px' : 'margin-left: -{{SIZE}}px',
					'{{WRAPPER}} .asa-advanced-image-gallery.uk-grid > *' => is_rtl() ? 'padding-right: {{SIZE}}px' : 'padding-left: {{SIZE}}px',
				],
				'condition' => [
					'_skin!' => 'asa-hidden',
					'grid_type!' => 'justified'
				],
			]
		);

		$this->add_responsive_control(
			'row_gap',
			[
				'label'   => esc_html__('Row Gap', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 0,
				],
				'range' => [
					'px' => [
						'min'  => 0,
						'max'  => 100,
						'step' => 5,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-advanced-image-gallery.uk-grid'     => 'margin-top: -{{SIZE}}px',
					'{{WRAPPER}} .asa-advanced-image-gallery.uk-grid > *' => 'margin-top: {{SIZE}}px',
				],
				'condition' => [
					'_skin' => '',
					'grid_type!' => 'justified'
				],
			]
		);

		$this->add_control(
			'show_lightbox',
			[
				'label'     => esc_html__('Show Lightbox', 'atomic-slider'),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'yes',
				// 'separator' => 'before',
			]
		);

		$this->add_control(
			'link_type',
			[
				'label'   => esc_html__('Link Type', 'atomic-slider'),
				'type'    => Controls_Manager::SELECT,
				'default' => 'icon',
				'options' => [
					'icon'  => esc_html__('Icon', 'atomic-slider'),
					'text'  => esc_html__('Text', 'atomic-slider'),
					'image' => esc_html__('Image', 'atomic-slider'),
				],
				'condition' => [
					'show_lightbox' => 'yes',
					'_skin!'		=> 'asa-hidden',
				]
			]
		);

		$this->add_control(
			'asa_gallery_link_icon',
			[
				'label'       => esc_html__('Link Icon', 'atomic-slider'),
				'type'        => Controls_Manager::ICONS,
				'condition' => [
					'show_lightbox' => 'yes',
					'link_type'		=> 'icon',
					'_skin!'		=> 'asa-hidden',
				],
				'skin' => 'inline',
				'label_block' => false
			]
		);

		$this->add_control(
			'asa_gallery_link_text',
			[
				'label'       => esc_html__('Link Text', 'atomic-slider'),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__('ZOOM', 'atomic-slider'),
				'condition' => [
					'show_lightbox' => 'yes',
					'link_type'		=> 'text',
					'_skin!'		=> 'asa-hidden',
				],
				'label_block' => false
			]
		);

		$this->add_control(
			'show_caption',
			[
				'label'       => esc_html__('Show Caption', 'atomic-slider'),
				'description' => esc_html__('Make sure you set the caption in gallery images when you insert.', 'atomic-slider'),
				'type'        => Controls_Manager::SWITCHER,
				'separator'   => 'before',
				'condition' => ['_skin!' => 'asa-hidden'],
			]
		);

		$this->add_control(
			'caption_all_time',
			[
				'label'     => esc_html__('Caption all Time', 'atomic-slider'),
				'type'      => Controls_Manager::SWITCHER,
				'condition' => [
					'show_caption' => 'yes',
					'_skin!' => 'asa-hidden',
				]
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_layout_additional',
			[
				'label'     => esc_html__('Additional', 'atomic-slider'),
				'tab'       => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'overlay_content_alignment',
			[
				'label'   => esc_html__('Overlay Content Alignment', 'atomic-slider'),
				'type'    => Controls_Manager::CHOOSE,
				'options' => [
					'left' => [
						'title' => esc_html__('Left', 'atomic-slider'),
						'icon'  => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__('Center', 'atomic-slider'),
						'icon'  => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__('Right', 'atomic-slider'),
						'icon'  => 'eicon-text-align-right',
					],
				],
				'default' => 'center',
				'selectors' => [
					'{{WRAPPER}} .asa-advanced-image-gallery .asa-overlay' => 'text-align: {{VALUE}}',
				],
				'condition' => [
					'show_lightbox' => 'yes',
					'show_caption'  => 'yes',
				],
			]
		);

		$this->add_control(
			'overlay_content_position',
			[
				'label'       => esc_html__('Overlay Content Vertical Position', 'atomic-slider'),
				'type'        => Controls_Manager::CHOOSE,
				'options'     => [
					'top' => [
						'title' => esc_html__('Top', 'atomic-slider'),
						'icon'  => 'eicon-v-align-top',
					],
					'middle' => [
						'title' => esc_html__('Middle', 'atomic-slider'),
						'icon'  => 'eicon-v-align-middle',
					],
					'bottom' => [
						'title' => esc_html__('Bottom', 'atomic-slider'),
						'icon'  => 'eicon-v-align-bottom',
					],
				],
				'selectors_dictionary' => [
					'top'    => 'flex-start',
					'middle' => 'center',
					'bottom' => 'flex-end',
				],
				'default'   => 'middle',
				'selectors' => [
					'{{WRAPPER}} .asa-advanced-image-gallery .asa-overlay' => 'justify-content: {{VALUE}}',
				],
				'condition' => [
					'show_lightbox' => 'yes',
					'show_caption'  => 'yes',
				],
				'separator' => 'after',
			]
		);

		$this->add_control(
			'caption_position',
			[
				'label'     => esc_html__('Caption Position', 'atomic-slider'),
				'type'      => Controls_Manager::SELECT,
				'default'   => '',
				'options'   => atomicslider_position(),
				'condition' => [
					'show_caption'     => 'yes',
					'caption_all_time' => 'yes',
				],
			]
		);

		$this->add_control(
			'advanced_spotlite_mode',
			[
				'label' => esc_html__('Spotlite Mode', 'atomic-slider'),
				'type'  => Controls_Manager::SWITCHER,
			]
		);

		$this->add_control(
			'tilt_show',
			[
				'label' => esc_html__('Tilt Effect', 'atomic-slider'),
				'type'  => Controls_Manager::SWITCHER,
				'render_type' => 'template',
				'condition' => [
					'_skin!'            => 'asa-hidden',
					'caption_all_time!' => 'yes',
				],
			]
		);

		$this->add_control(
			'tilt_scale',
			[
				'label' => esc_html__('Tilt Scale', 'atomic-slider'),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 2,
						'step' => 0.1,
					],
				],
				'condition' => [
					'tilt_show' => 'yes',
					'caption_all_time!' => 'yes',
				],
				'separator' => 'after',
			]
		);


		$this->add_control(
			'lightbox_link_type',
			[
				'label'   => esc_html__('Lightbox Link Type', 'atomic-slider'),
				'type'    => Controls_Manager::SELECT,
				'default' => 'simple_text',
				'options' => [
					'simple_text' => esc_html__('Text', 'atomic-slider'),
					'link_icon'   => esc_html__('Icon', 'atomic-slider'),
					'link_image'  => esc_html__('Image', 'atomic-slider'),
				],
				'condition' => ['_skin' => 'asa-hidden'],
			]
		);

		$this->add_control(
			'link_image',
			[
				'label'   => esc_html__('Link Image', 'atomic-slider'),
				'type'    => Controls_Manager::MEDIA,
				'default' => [
					'url' => Utils::get_placeholder_image_src(),
				],
				'condition' => ['lightbox_link_type' => 'link_image'],
			]
		);

		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			[
				'name'      => 'link_image_size',
				'condition' => ['lightbox_link_type' => 'link_image'],
			]
		);

		$this->add_control(
			'gallery_link_text',
			[
				'label'       => esc_html__('Link Text', 'atomic-slider'),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__('Open Gallery', 'atomic-slider'),
				'placeholder' => esc_html__('Link Text', 'atomic-slider'),
				'condition'   => ['_skin' => 'asa-hidden', 'lightbox_link_type' => 'simple_text'],
			]
		);

		$this->add_control(
			'gallery_link_icon',
			[
				'label'       => esc_html__('Link Icon', 'atomic-slider'),
				'type'        => Controls_Manager::ICONS,
				'fa4compatibility' => 'icon',
				'default' => [
					'value' => 'fas fa-plus',
					'library' => 'fa-solid',
				],
				'conditions' => [
					'terms' => [
						[
							'name'     => '_skin',
							'value'    => 'asa-hidden',
						],
						[
							'name'     => 'lightbox_link_type',
							'value'    => 'link_icon',
						],
					],
				],
			]
		);

		$this->add_responsive_control(
			'gallery_link_align',
			[
				'label'   => esc_html__('Alignment', 'atomic-slider'),
				'type'    => Controls_Manager::CHOOSE,
				'options' => [
					'left' => [
						'title' => esc_html__('Left', 'atomic-slider'),
						'icon'  => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__('Center', 'atomic-slider'),
						'icon'  => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__('Right', 'atomic-slider'),
						'icon'  => 'eicon-text-align-right',
					],
				],
				'prefix_class' => 'elementor-align%s-',
				'condition' => ['_skin' => 'asa-hidden'],
				'separator' => 'after',
			]
		);

		$this->add_control(
			'lightbox_animation',
			[
				'label'   => esc_html__('Lightbox Animation', 'atomic-slider'),
				'type'    => Controls_Manager::SELECT,
				'default' => 'slide',
				'options' => [
					'slide' => esc_html__('Slide', 'atomic-slider'),
					'fade'  => esc_html__('Fade', 'atomic-slider'),
					'scale' => esc_html__('Scale', 'atomic-slider'),
				],
				'condition' => [
					'show_lightbox' => 'yes',
				]
			]
		);

		$this->add_control(
			'lightbox_autoplay',
			[
				'label'   => esc_html__('Lightbox Autoplay', 'atomic-slider'),
				'type'    => Controls_Manager::SWITCHER,
				'condition' => [
					'show_lightbox' => 'yes',
				]
			]
		);

		$this->add_control(
			'lightbox_pause',
			[
				'label'   => esc_html__('Lightbox Pause on Hover', 'atomic-slider'),
				'type'    => Controls_Manager::SWITCHER,
				'condition' => [
					'show_lightbox' => 'yes',
					'lightbox_autoplay' => 'yes'
				],

			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_content_carousel_settins',
			[
				'label'     => esc_html__('Carousel Settings', 'atomic-slider'),
				'condition' => [
					'_skin' => 'asa-carousel',
				],
			]
		);

		$this->add_control(
			'autoplay',
			[
				'label'   => esc_html__('Auto Play', 'atomic-slider'),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'autoplay_interval',
			[
				'label'     => esc_html__('Autoplay Interval', 'atomic-slider'),
				'type'      => Controls_Manager::NUMBER,
				'default'   => 7000,
				'condition' => [
					'autoplay' => 'yes',
				],
			]
		);

		$this->add_control(
			'pause_on_hover',
			[
				'label'   => esc_html__('Pause on Hover', 'atomic-slider'),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'loop',
			[
				'label'   => esc_html__('Loop', 'atomic-slider'),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'center_slide',
			[
				'label' => esc_html__('Center Slide', 'atomic-slider'),
				'type'  => Controls_Manager::SWITCHER,
			]
		);

		$this->add_control(
			'slide_sets',
			[
				'label' => esc_html__('Slide Sets', 'atomic-slider'),
				'type'  => Controls_Manager::SWITCHER,
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_content_navigation',
			[
				'label'     => esc_html__('Navigation', 'atomic-slider'),
				'condition' => [
					'_skin' => 'asa-carousel',
				],
			]
		);

		$this->add_control(
			'navigation',
			[
				'label'   => esc_html__('Navigation', 'atomic-slider'),
				'type'    => Controls_Manager::SELECT,
				'default' => 'arrows',
				'options' => [
					'both'   => esc_html__('Arrows and Dots', 'atomic-slider'),
					'arrows' => esc_html__('Arrows', 'atomic-slider'),
					'dots'   => esc_html__('Dots', 'atomic-slider'),
					'none'   => esc_html__('None', 'atomic-slider'),
				],
				'prefix_class' => 'asa-navigation-type-',
				'render_type'  => 'template',
			]
		);

		$this->add_control(
			'both_position',
			[
				'label'     => esc_html__('Arrows and Dots Position', 'atomic-slider'),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'center',
				'options'   => atomicslider_navigation_position(),
				'condition' => [
					'navigation' => 'both',
				],
			]
		);

		$this->add_control(
			'arrows_position',
			[
				'label'     => esc_html__('Arrows Position', 'atomic-slider'),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'center',
				'options'   => atomicslider_navigation_position(),
				'condition' => [
					'navigation' => 'arrows',
				],
			]
		);

		$this->add_control(
			'dots_position',
			[
				'label'     => esc_html__('Dots Position', 'atomic-slider'),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'bottom-center',
				'options'   => atomicslider_pagination_position(),
				'condition' => [
					'navigation' => 'dots',
				],
			]
		);

		$this->add_control(
			'nav_arrows_icon',
			[
				'label'   => esc_html__('Arrows Icon', 'atomic-slider'),
				'type'    => Controls_Manager::SELECT,
				'default' => '0',
				'options' => [
					'0' => esc_html__('Default', 'atomic-slider'),
					'1' => esc_html__('Style 1', 'atomic-slider'),
					'2' => esc_html__('Style 2', 'atomic-slider'),
					'3' => esc_html__('Style 3', 'atomic-slider'),
					'4' => esc_html__('Style 4', 'atomic-slider'),
					'5' => esc_html__('Style 5', 'atomic-slider'),
					'6' => esc_html__('Style 6', 'atomic-slider'),
					'7' => esc_html__('Style 7', 'atomic-slider'),
					'8' => esc_html__('Style 8', 'atomic-slider'),
					'9' => esc_html__('Style 9', 'atomic-slider'),
					'10' => esc_html__('Style 10', 'atomic-slider'),
					'11' => esc_html__('Style 11', 'atomic-slider'),
					'12' => esc_html__('Style 12', 'atomic-slider'),
					'13' => esc_html__('Style 13', 'atomic-slider'),
					'14' => esc_html__('Style 14', 'atomic-slider'),
					'15' => esc_html__('Style 15', 'atomic-slider'),
					'16' => esc_html__('Style 16', 'atomic-slider'),
					'17' => esc_html__('Style 17', 'atomic-slider'),
					'18' => esc_html__('Style 18', 'atomic-slider'),
					'circle-1' => esc_html__('Style 19', 'atomic-slider'),
					'circle-2' => esc_html__('Style 20', 'atomic-slider'),
					'circle-3' => esc_html__('Style 21', 'atomic-slider'),
					'circle-4' => esc_html__('Style 22', 'atomic-slider'),
					'square-1' => esc_html__('Style 23', 'atomic-slider'),
				],
				'condition' => [
					'navigation' => ['both', 'arrows'],
				],
			]
		);

		$this->add_control(
			'hide_arrow_on_mobile',
			[
				'label'     => __('Hide Arrow on Mobile ?', 'atomic-slider'),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'yes',
			]
		);

		$this->end_controls_section();


		$this->start_controls_section(
			'section_design_layout',
			[
				'label'     => esc_html__('Items', 'atomic-slider'),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => ['_skin!' => 'asa-hidden'],
			]
		);

		$this->start_controls_tabs('tabs_item_controls');

		$this->start_controls_tab(
			'tab_item_style',
			[
				'label' => __('Normal', 'atomic-slider')
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'        => 'item_border',
				'label'       => esc_html__('Border', 'atomic-slider'),
				'placeholder' => '1px',
				'default'     => '1px',
				'selector'    => '{{WRAPPER}} .asa-advanced-image-gallery-thumbnail',
			]
		);

		$this->add_control(
			'item_border_radius',
			[
				'label'      => esc_html__('Border Radius', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%'],
				'selectors'  => [
					'{{WRAPPER}} .asa-advanced-image-gallery-item .asa-advanced-image-gallery-inner, {{WRAPPER}} .asa-advanced-image-gallery-thumbnail, {{WRAPPER}} .asa-advanced-image-gallery .asa-overlay, {{WRAPPER}} .asa-slider-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'image_spotlite_divider',
			[
				'type'    => Controls_Manager::DIVIDER,
				'condition' => [
					'advanced_spotlite_mode' => 'yes',
				],
			]
		);

		$this->add_control(
			'spotlite_mode_heading',
			[
				'label'     => esc_html__('Spotlite Mood', 'atomic-slider'),
				'type'      => Controls_Manager::HEADING,
				'condition' => [
					'advanced_spotlite_mode' => 'yes',
				],
			]
		);

		$this->add_control(
			'spotlite_mode_color',
			[
				'label'     => esc_html__('Outer Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-spotlite-mode:hover .asa-advanced-image-gallery-item:not(:hover):after' => 'background-color: {{VALUE}};',
				],
				'condition' => [
					'advanced_spotlite_mode' => 'yes',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_item_overlay_style',
			[
				'label' => __('Overlay', 'atomic-slider')
			]
		);

		$this->add_control(
			'overlay_animation',
			[
				'label'   => esc_html__('Animation', 'atomic-slider'),
				'type'    => Controls_Manager::SELECT,
				'default' => 'fade',
				'options' => atomicslider_transition_options(),
			]
		);

		$this->add_control(
			'overlay_blur_effect',
			[
				'label' => esc_html__('Glassmorphism', 'atomic-slider'),
				'type'  => Controls_Manager::SWITCHER,
				'description' => sprintf(__('This feature will not work in the Firefox browser untill you enable browser compatibility so please %1s look here %2s', 'atomic-slider'), '<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility" target="_blank">', '</a>'),

			]
		);

		$this->add_control(
			'overlay_blur_level',
			[
				'label'       => __('Blur Level', 'atomic-slider'),
				'type'        => Controls_Manager::SLIDER,
				'range'       => [
					'px' => [
						'min'  => 0,
						'step' => 1,
						'max'  => 50,
					]
				],
				'default'     => [
					'size' => 5
				],
				'selectors'   => [
					'{{WRAPPER}} .asa-advanced-image-gallery-item .asa-overlay-default' => 'backdrop-filter: blur({{SIZE}}px); -webkit-backdrop-filter: blur({{SIZE}}px);'
				],
				'condition' => [
					'overlay_blur_effect' => 'yes'
				]
			]
		);

		$this->add_control(
			'overlay_background',
			[
				'label'     => esc_html__('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-advanced-image-gallery-item .asa-overlay' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'overlay_gap',
			[
				'label' => esc_html__('Gap', 'atomic-slider'),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 50,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-advanced-image-gallery-item .asa-overlay' => 'margin: {{SIZE}}px',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_caption',
			[
				'label'     => esc_html__('Caption', 'atomic-slider'),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'show_caption' => 'yes',
				],
			]
		);

		$this->add_control(
			'caption_color',
			[
				'label'     => esc_html__('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-advanced-image-gallery-item-caption' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'      => 'caption_background',
				'separator' => 'before',
				'selector'  => '{{WRAPPER}} .asa-advanced-image-gallery-item-caption'
			]
		);

		$this->add_responsive_control(
			'caption_padding',
			[
				'label'      => esc_html__('Padding', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'separator'  => 'before',
				'size_units' => ['px', 'em', '%'],
				'selectors'  => [
					'{{WRAPPER}} .asa-advanced-image-gallery-item-caption' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				]
			]
		);

		$this->add_responsive_control(
			'caption_margin',
			[
				'label'      => esc_html__('Margin', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors'  => [
					'{{WRAPPER}} .asa-advanced-image-gallery-item-caption' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
				]
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'        => 'caption_border',
				'placeholder' => '1px',
				'default'     => '1px',
				'selector'    => '{{WRAPPER}} .asa-advanced-image-gallery-item-caption'
			]
		);

		$this->add_control(
			'caption_radius',
			[
				'label'      => esc_html__('Radius', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'separator'  => 'after',
				'size_units' => ['px', '%'],
				'selectors'  => [
					'{{WRAPPER}} .asa-advanced-image-gallery-item-caption' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;'
				]
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'caption_shadow',
				'selector' => '{{WRAPPER}} .asa-advanced-image-gallery-item-caption'
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'caption_typography',
				'label'    => esc_html__('Typography', 'atomic-slider'),
				'selector' => '{{WRAPPER}} .asa-advanced-image-gallery-item-caption',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_button',
			[
				'label'     => esc_html__('Link Style', 'atomic-slider'),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'show_lightbox' => 'yes',
					'link_type!'    => 'image',
				],
			]
		);

		$this->start_controls_tabs('tabs_button_style');

		$this->start_controls_tab(
			'tab_button_normal',
			[
				'label' => esc_html__('Normal', 'atomic-slider'),
			]
		);

		$this->add_control(
			'button_text_color',
			[
				'label'     => esc_html__('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-advanced-image-gallery-item-link span, {{WRAPPER}} .asa-advanced-image-gallery-item-link, {{WRAPPER}} .asa-advanced-image-gallery-skin-hidden .asa-hidden-gallery-button' => 'color: {{VALUE}};',
					'{{WRAPPER}} .asa-advanced-image-gallery-item-link svg, {{WRAPPER}} .asa-advanced-image-gallery-skin-hidden .asa-hidden-gallery-button svg' => 'fill: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'background_color',
			[
				'label'     => esc_html__('Background Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-advanced-image-gallery-item-link' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'        => 'border',
				'label'       => esc_html__('Border', 'atomic-slider'),
				'placeholder' => '1px',
				'default'     => '1px',
				'selector'    => '{{WRAPPER}} .asa-advanced-image-gallery-item-link',
				'separator'   => 'before',
			]
		);

		$this->add_responsive_control(
			'button_border_radius',
			[
				'label'      => esc_html__('Border Radius', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%'],
				'selectors'  => [
					'{{WRAPPER}} .asa-advanced-image-gallery-item-link, {{WRAPPER}} .asa-advanced-image-gallery-skin-hidden .asa-hidden-gallery-button img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'button_padding',
			[
				'label'      => esc_html__('Padding', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors'  => [
					'{{WRAPPER}} .asa-advanced-image-gallery-item-link' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'      => 'typography',
				'label'     => esc_html__('Typography', 'atomic-slider'),
				'selector'  => '{{WRAPPER}} .asa-advanced-image-gallery-item-link, {{WRAPPER}} .asa-advanced-image-gallery-item-link span',
				'condition' => [
					'show_lightbox' => 'yes',
					'lightbox_link_type!' => 'link_image',
				]
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'button_box_shadow',
				'selector' => '{{WRAPPER}} .asa-advanced-image-gallery-item-link',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_button_hover',
			[
				'label' => esc_html__('Hover', 'atomic-slider'),
			]
		);

		$this->add_control(
			'hover_color',
			[
				'label'     => esc_html__('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-advanced-image-gallery-item-link:hover span, {{WRAPPER}} .asa-advanced-image-gallery-item-link:hover, {{WRAPPER}} .asa-advanced-image-gallery-skin-hidden .asa-hidden-gallery-button:hover' => 'color: {{VALUE}};',
					'{{WRAPPER}} .asa-advanced-image-gallery-item-link:hover svg, {{WRAPPER}} .asa-advanced-image-gallery-skin-hidden .asa-hidden-gallery-button:hover svg' => 'fill: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'button_background_hover_color',
			[
				'label'     => esc_html__('Background Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-advanced-image-gallery-item-link:hover' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'button_hover_border_color',
			[
				'label'     => esc_html__('Border Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'condition' => [
					'border_border!' => '',
				],
				'selectors' => [
					'{{WRAPPER}} .asa-advanced-image-gallery-item-link:hover' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'button_hover_animation',
			[
				'label' => esc_html__('Animation', 'atomic-slider'),
				'type'  => Controls_Manager::HOVER_ANIMATION,
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_navigation',
			[
				'label'      => esc_html__('Navigation', 'atomic-slider'),
				'tab'        => Controls_Manager::TAB_STYLE,
				'conditions' => [
					'terms' => [
						[
							'name'     => '_skin',
							'value'    => 'asa-carousel',
						],
						[
							'name'     => 'navigation',
							'operator' => '!=',
							'value'    => 'none',
						],
					],
				],
			]
		);

		$this->add_control(
			'arrows_heading',
			[
				'label'     => esc_html__('Arrows', 'atomic-slider'),
				'type'      => Controls_Manager::HEADING,
				'condition' => [
					'navigation' => ['arrows', 'both'],
				],
			]
		);

		$this->add_control(
			'arrows_color',
			[
				'label'     => esc_html__('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-navigation-prev i,
					{{WRAPPER}} .asa-navigation-next i' => 'color: {{VALUE}}',
				],
				'condition' => [
					'navigation' => ['arrows', 'both'],
				],
			]
		);

		$this->add_control(
			'arrows_hover_color',
			[
				'label'     => esc_html__('Hover Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-navigation-prev:hover i,
					{{WRAPPER}} .asa-navigation-next:hover i' => 'color: {{VALUE}}',
				],
				'condition' => [
					'navigation' => ['arrows', 'both'],
				],
			]
		);

		$this->add_control(
			'arrows_background',
			[
				'label'     => esc_html__('Background Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-navigation-prev,
					{{WRAPPER}} .asa-navigation-next' => 'background-color: {{VALUE}}',
				],
				'condition' => [
					'navigation' => ['arrows', 'both'],
				],
			]
		);

		$this->add_control(
			'arrows_hover_background',
			[
				'label'     => esc_html__('Hover Background Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-navigation-prev:hover,
					{{WRAPPER}} .asa-navigation-next:hover' => 'background-color: {{VALUE}}',
				],
				'condition' => [
					'navigation' => ['arrows', 'both'],
				],
			]
		);

		$this->add_control(
			'arrows_size',
			[
				'label' => esc_html__('Size', 'atomic-slider'),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 20,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-navigation-prev i,
					{{WRAPPER}} .asa-navigation-next i' => 'font-size: {{SIZE || 25}}{{UNIT}};',
				],
				'condition' => [
					'navigation' => ['arrows', 'both'],
				],
			]
		);

		$this->add_control(
			'arrows_space',
			[
				'label' => esc_html__('Space Between Arrows', 'atomic-slider'),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-navigation-prev' => 'margin-right: {{SIZE}}px;',
					'{{WRAPPER}} .asa-navigation-next' => 'margin-left: {{SIZE}}px;',
				],
				'condition' => [
					'navigation!' => ['dots', 'progressbar', 'none'],
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'      => 'arrows_border',
				'selector'  => '{{WRAPPER}} .asa-navigation-prev,
				{{WRAPPER}} .asa-navigation-next',
				'condition' => [
					'navigation' => ['arrows', 'both'],
				],
			]
		);

		$this->add_responsive_control(
			'border_radius',
			[
				'label'      => esc_html__('Border Radius', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%'],
				'selectors'  => [
					'{{WRAPPER}} .asa-navigation-prev,
					{{WRAPPER}} .asa-navigation-next' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition' => [
					'navigation' => ['arrows', 'both'],
				],
			]
		);

		$this->add_responsive_control(
			'arrows_padding',
			[
				'label'      => esc_html__('Padding', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors'  => [
					'{{WRAPPER}} .asa-navigation-prev,
					{{WRAPPER}} .asa-navigation-next' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'arrows_box_shadow',
				'selector' => '{{WRAPPER}} .asa-navigation-prev,
				{{WRAPPER}} .asa-navigation-next',
				'condition' => [
					'navigation' => ['arrows', 'both'],
				],
			]
		);

		$this->add_control(
			'hr_1',
			[
				'type' => Controls_Manager::DIVIDER,
				'condition' => [
					'navigation' => ['dots', 'both'],
				],
			]
		);

		$this->add_control(
			'dots_heading',
			[
				'label'     => esc_html__('Dots', 'atomic-slider'),
				'type'      => Controls_Manager::HEADING,
				'condition' => [
					'navigation' => ['dots', 'both'],
				],
			]
		);

		$this->add_control(
			'dots_color',
			[
				'label'     => esc_html__('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider-dotnav a' => 'background-color: {{VALUE}}',
				],
				'condition' => [
					'navigation' => ['dots', 'both'],
				],
			]
		);

		$this->add_control(
			'active_dot_color',
			[
				'label'     => esc_html__('Active Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider-dotnav.asa-active a' => 'background-color: {{VALUE}}',
				],
				'condition' => [
					'navigation' => ['dots', 'both'],
				],
			]
		);

		$this->add_control(
			'dots_size',
			[
				'label' => esc_html__('Size', 'atomic-slider'),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 5,
						'max' => 20,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider-dotnav a' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'navigation' => ['dots', 'both'],
				],
			]
		);

		$this->add_control(
			'hr_05',
			[
				'type' => Controls_Manager::DIVIDER,
			]
		);

		$this->add_control(
			'navi_offset_heading',
			[
				'label'     => __('Offset', 'atomic-slider'),
				'type'      => Controls_Manager::HEADING,
			]
		);

		$this->add_control(
			'hr_6',
			[
				'type' => Controls_Manager::DIVIDER,
			]
		);

		$this->add_responsive_control(
			'arrows_ncx_position',
			[
				'label'   => esc_html__('Horizontal Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 0,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'conditions'   => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'arrows',
						],
						[
							'name'     => 'arrows_position',
							'operator' => '!=',
							'value'    => 'center',
						],
					],
				],
				'selectors' => [
					'{{WRAPPER}}' => '--asa-swiper-carousel-arrows-ncx: {{SIZE}}px;'
				],
			]
		);

		$this->add_responsive_control(
			'arrows_ncy_position',
			[
				'label'   => esc_html__('Vertical Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 40,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors' => [
					'{{WRAPPER}}' => '--asa-swiper-carousel-arrows-ncy: {{SIZE}}px;'
				],
				'conditions'   => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'arrows',
						],
						[
							'name'     => 'arrows_position',
							'operator' => '!=',
							'value'    => 'center',
						],
					],
				],
			]
		);

		$this->add_responsive_control(
			'arrows_acx_position',
			[
				'label'   => esc_html__('Horizontal Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => -60,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-navigation-prev' => 'left: {{SIZE}}px;',
					'{{WRAPPER}} .asa-navigation-next' => 'right: {{SIZE}}px;',
				],
				'conditions' => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'arrows',
						],
						[
							'name'  => 'arrows_position',
							'value' => 'center',
						],
					],
				],
			]
		);

		$this->add_responsive_control(
			'dots_nnx_position',
			[
				'label'   => esc_html__('Horizontal Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 0,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'conditions'   => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'dots',
						],
						[
							'name'     => 'dots_position',
							'operator' => '!=',
							'value'    => '',
						],
					],
				],
				'selectors' => [
					'{{WRAPPER}}' => '--asa-swiper-carousel-dots-nnx: {{SIZE}}px;'
				],
			]
		);

		$this->add_responsive_control(
			'dots_nny_position',
			[
				'label'   => esc_html__('Vertical Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 30,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors' => [
					'{{WRAPPER}}' => '--asa-swiper-carousel-dots-nny: {{SIZE}}px;'
				],
				'conditions'   => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'dots',
						],
						[
							'name'     => 'dots_position',
							'operator' => '!=',
							'value'    => '',
						],
					],
				],
			]
		);

		$this->add_responsive_control(
			'both_ncx_position',
			[
				'label'   => esc_html__('Horizontal Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 0,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'conditions'   => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'both',
						],
						[
							'name'     => 'both_position',
							'operator' => '!=',
							'value'    => 'center',
						],
					],
				],
				'selectors' => [
					'{{WRAPPER}}' => '--asa-swiper-carousel-both-ncx: {{SIZE}}px;'
				],
			]
		);

		$this->add_responsive_control(
			'both_ncy_position',
			[
				'label'   => esc_html__('Vertical Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 40,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors' => [
					'{{WRAPPER}}' => '--asa-swiper-carousel-both-ncy: {{SIZE}}px;'
				],
				'conditions'   => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'both',
						],
						[
							'name'     => 'both_position',
							'operator' => '!=',
							'value'    => 'center',
						],
					],
				],
			]
		);

		$this->add_responsive_control(
			'both_cx_position',
			[
				'label'   => esc_html__('Arrows Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => -60,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-navigation-prev' => 'left: {{SIZE}}px;',
					'{{WRAPPER}} .asa-navigation-next' => 'right: {{SIZE}}px;',
				],
				'conditions' => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'both',
						],
						[
							'name'  => 'both_position',
							'value' => 'center',
						],
					],
				],
			]
		);

		$this->add_responsive_control(
			'both_cy_position',
			[
				'label'   => esc_html__('Dots Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 30,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-dots-container' => 'transform: translateY({{SIZE}}px);',
				],
				'conditions' => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'both',
						],
						[
							'name'  => 'both_position',
							'value' => 'center',
						],
					],
				],
			]
		);

		$this->end_controls_section();
	}

	// Global controls for Fancy List and ACF List
	protected function register_fancy_list_controls() {
		
		$this->end_controls_section();
		
		$this->start_controls_section(
			'section_additional_options',
			[ 
				'label' => esc_html__( 'Additional Options', 'atomic-slider' ),
			]
		);

		$this->add_responsive_control(
			'columns',
			[ 
				'label'          => esc_html__( 'Columns', 'atomic-slider' ),
				'type'           => Controls_Manager::SELECT,
				'default'        => '1',
				'tablet_default' => '1',
				'mobile_default' => '1',
				'options'        => [ 
					'1' => '1',
					'2' => '2',
					'3' => '3',
					'4' => '4',
					'5' => '5',
					'6' => '6',
				],
				'selectors'      => [ 
					'{{WRAPPER}} .asa-fancy-list ul.asa-fancy-list-group' => 'grid-template-columns: repeat({{SIZE}}, 1fr);',
				],
				'separator'      => 'before',
				'condition'      => [ 
					'layout_style' => 'style-1',
				],

			]
		);

		$this->add_responsive_control(
			'list_item_space_between',
			[ 
				'label'     => esc_html__( 'Grid Gap', 'atomic-slider' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min' => 0,
						'max' => 50,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list ul.asa-fancy-list-group' => 'grid-gap: {{SIZE}}{{UNIT}}',
				],
			]
		);

		$this->add_control(
			'show_number_icon',
			[ 
				'label' => esc_html__( 'Show Number Count', 'atomic-slider' ),
				'type'  => Controls_Manager::SWITCHER,
			]
		);

		$this->add_control(
			'title_tags',
			[ 
				'label'   => esc_html__( 'Title HTML Tag', 'atomic-slider' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'h4',
				'options' => atomicslider_title_tags(),
			]
		);

		$this->add_responsive_control(
			'icon_position',
			[ 
				'label'                => esc_html__( 'Icon Position', 'atomic-slider' ),
				'type'                 => Controls_Manager::CHOOSE,
				'toggle'               => true,
				'options'              => [ 
					'left'   => [ 
						'title' => esc_html__( 'Left', 'atomic-slider' ),
						'icon'  => 'eicon-h-align-left',
					],
					'right'  => [ 
						'title' => esc_html__( 'Right', 'atomic-slider' ),
						'icon'  => 'eicon-h-align-right',
					],
					'top'    => [ 
						'title' => esc_html__( 'Top', 'atomic-slider' ),
						'icon'  => 'eicon-v-align-top',
					],
					'bottom' => [ 
						'title' => esc_html__( 'Bottom', 'atomic-slider' ),
						'icon'  => 'eicon-v-align-bottom',
					],
				],
				'selectors'            => [ 
					'{{WRAPPER}} .asa-fancy-list .flex-wrap' => '{{VALUE}};',
				],
				'selectors_dictionary' => [ 
					'left'   => 'flex-direction: row-reverse; -webkit-flex-direction: row-reverse;',
					'top'    => 'flex-direction: column-reverse; -webkit-flex-direction: column-reverse;',
					'bottom' => 'flex-direction: column; -webkit-flex-direction: column;',
				],
				'separator'            => 'before'
			]
		);

		$this->add_control(
			'content_position',
			[ 
				'label'        => esc_html__( 'Content Position', 'atomic-slider' ),
				'type'         => Controls_Manager::CHOOSE,
				'default'      => 'left',
				'toggle'       => false,
				'options'      => [ 
					'left'  => [ 
						'title' => esc_html__( 'Left', 'atomic-slider' ),
						'icon'  => 'eicon-h-align-left',
					],
					'right' => [ 
						'title' => esc_html__( 'Right', 'atomic-slider' ),
						'icon'  => 'eicon-h-align-right',
					],
				],
				'prefix_class' => 'asa-content-position--',
				// 'separator' => 'before'
			]
		);

		$this->add_responsive_control(
			'content_y_align',
			[ 
				'label'     => esc_html__( 'Content Vertical Align', 'atomic-slider' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => [ 
					'flex-start' => [ 
						'title' => esc_html__( 'Top', 'atomic-slider' ),
						'icon'  => 'eicon-v-align-top',
					],
					'center' => [ 
						'title' => esc_html__( 'Center', 'atomic-slider' ),
						'icon'  => 'eicon-v-align-middle',
					],
					'flex-end' => [ 
						'title' => esc_html__( 'Bottom', 'atomic-slider' ),
						'icon'  => 'eicon-v-align-bottom',
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list .flex-wrap' => 'align-items: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'list_item_align',
			[ 
				'label'        => esc_html__( 'Alignment', 'atomic-slider' ),
				'type'         => Controls_Manager::CHOOSE,
				'options'      => [ 
					'left'   => [ 
						'title' => esc_html__( 'Left', 'atomic-slider' ),
						'icon'  => 'eicon-h-align-left',
					],
					'center' => [ 
						'title' => esc_html__( 'Center', 'atomic-slider' ),
						'icon'  => 'eicon-h-align-center',
					],
					'right'  => [ 
						'title' => esc_html__( 'Right', 'atomic-slider' ),
						'icon'  => 'eicon-h-align-right',
					],
				],
				'prefix_class' => 'elementor%s-align-',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_list_items',
			[ 
				'label' => esc_html__( 'List Item', 'atomic-slider' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->start_controls_tabs(
			'list_item_tabs'
		);

		$this->start_controls_tab(
			'list_item_tabs_normal',
			[ 
				'label' => esc_html__( 'Normal', 'atomic-slider' ),
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[ 
				'name'     => 'list_item_bg_color',
				'selector' => '{{WRAPPER}} .asa-fancy-list .flex-wrap',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[ 
				'name'     => 'list_item_border',
				'label'    => esc_html__( 'Border', 'atomic-slider' ),
				'selector' => '{{WRAPPER}} .asa-fancy-list .flex-wrap',
			]
		);

		$this->add_responsive_control(
			'list_item_border_radius',
			[ 
				'label'      => esc_html__( 'Border Radius', 'atomic-slider' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .asa-fancy-list .flex-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
				],
			]
		);

		$this->add_responsive_control(
			'list_item_padding',
			[ 
				'label'      => esc_html__( 'Padding', 'atomic-slider' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .asa-fancy-list .flex-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} ',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[ 
				'name'     => 'list_item_box_shadow',
				'label'    => esc_html__( 'Box Shadow', 'atomic-slider' ),
				'selector' => '{{WRAPPER}} .asa-fancy-list .flex-wrap',
			]
		);

		$this->add_responsive_control(
			'list_item_border',
			[ 
				'label'     => esc_html__( 'Height', 'atomic-slider' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min' => 1,
						'max' => 200,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list .flex-wrap' => 'min-height: {{SIZE}}{{UNIT}}',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'list_item_tabs_hover',
			[ 
				'label' => esc_html__( 'Hover', 'atomic-slider' ),
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[ 
				'name'     => 'list_item_hover_bg_color',
				'selector' => '{{WRAPPER}} .asa-fancy-list .flex-wrap:hover',
			]
		);

		$this->add_control(
			'list_item_hover_border',
			[ 
				'label'     => esc_html__( 'Border Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list .flex-wrap:hover' => 'border-color: {{VALUE}} !important',
				],
				'condition' => [ 
					'list_item_border_border!' => ''
				]
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[ 
				'name'     => 'list_item_box_shadow_hover',
				'label'    => esc_html__( 'Box Shadow', 'atomic-slider' ),
				'selector' => '{{WRAPPER}} .asa-fancy-list .flex-wrap:hover',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		$this->start_controls_section(
			'section_icon',
			[ 
				'label'     => esc_html__( 'Number Count', 'atomic-slider' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [ 
					'show_number_icon' => 'yes',
				],
			]
		);

		$this->start_controls_tabs( 'tabs_number_icon_style' );

		$this->start_controls_tab(
			'tab_number_icon_normal',
			[ 
				'label' => esc_html__( 'Normal', 'atomic-slider' ),
			]
		);

		$this->add_control(
			'number_icon_color',
			[ 
				'label'     => esc_html__( 'Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list-number-icon span' => 'color: {{VALUE}} ',
				],
			]
		);

		$this->add_control(
			'icon_bg_color',
			[ 
				'label'     => esc_html__( 'Background Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list-number-icon' => 'background-color: {{VALUE}}',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[ 
				'name'     => 'icon_number_border',
				'label'    => esc_html__( 'Border', 'atomic-slider' ),
				'selector' => '{{WRAPPER}} .asa-fancy-list-number-icon',
			]
		);

		$this->add_responsive_control(
			'icon_number_border_radius',
			[ 
				'label'      => esc_html__( 'Border Radius', 'atomic-slider' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .asa-fancy-list-number-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} ',
				],
			]
		);

		$this->add_responsive_control(
			'icon_number_padding',
			[ 
				'label'      => esc_html__( 'Padding', 'atomic-slider' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .asa-fancy-list-number-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'icon_number_margin',
			[ 
				'label'      => esc_html__( 'Margin', 'atomic-slider' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .asa-fancy-list-number-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[ 
				'name'     => 'number_icon_typography',
				'selector' => '{{WRAPPER}} .asa-fancy-list-number-icon span',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_number_icon_hover',
			[ 
				'label' => esc_html__( 'Hover', 'atomic-slider' ),
			]
		);

		$this->add_control(
			'number_icon_color_hover',
			[ 
				'label'     => esc_html__( 'Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list-group .asa-fancy-list-wrap:hover .asa-fancy-list-number-icon span' => 'color: {{VALUE}} ',
				],
			]
		);

		$this->add_control(
			'number_icon_bg_color_hover',
			[ 
				'label'     => esc_html__( 'Background Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list-group .asa-fancy-list-wrap:hover .asa-fancy-list-number-icon' => 'background-color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'number_icon_border_color_hover',
			[ 
				'label'     => esc_html__( 'Border Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list-group .asa-fancy-list-wrap:hover .asa-fancy-list-number-icon' => 'border-color: {{VALUE}}',
				],
				'condition' => [ 
					'icon_number_border_border!' => ''
				]
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		$this->start_controls_section(
			'section_text_style',
			[ 
				'label' => esc_html__( 'Title / Subtitle', 'atomic-slider' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->start_controls_tabs( 'tabs_mode_style' );
		$this->start_controls_tab(
			'tab_normal_mode_normal',
			[ 
				'label' => esc_html__( 'Normal', 'atomic-slider' ),
			]
		);

		$this->add_control(
			'title_heading',
			[ 
				'label' => esc_html__( 'Title', 'atomic-slider' ),
				'type'  => Controls_Manager::HEADING,
			]
		);

		$this->add_control(
			'title_color',
			[ 
				'label'     => esc_html__( 'Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list-title ' => 'color: {{VALUE}} ',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[ 
				'name'     => 'title_typography',
				'selector' => '{{WRAPPER}} .asa-fancy-list-title',
			]
		);

		$this->add_control(
			'sub_title_heading',
			[ 
				'label'     => esc_html__( 'Sub Title', 'atomic-slider' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'des_text_color',
			[ 
				'label'     => esc_html__( 'Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list-text' => 'color: {{VALUE}} ',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[ 
				'name'     => 'sub_title_typography',
				'selector' => '{{WRAPPER}} .asa-fancy-list-text',
			]
		);

		$this->add_responsive_control(
			'sub_title_margin',
			[ 
				'label'      => esc_html__( 'Margin', 'atomic-slider' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .asa-fancy-list-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_hover_mode_normal',
			[ 
				'label' => esc_html__( 'Hover', 'atomic-slider' ),
			]
		);

		$this->add_control(
			'title_color_hover',
			[ 
				'label'     => esc_html__( 'Title Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list-wrap:hover .asa-fancy-list-title' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_control(
			'text_color_hover',
			[ 
				'label'     => esc_html__( 'Sub Title Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list-wrap:hover .asa-fancy-list-text' => 'color: {{VALUE}}',
				],
				'separator' => 'before',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		$this->start_controls_section(
			'section_icon_style',
			[ 
				'label' => esc_html__( 'Icon', 'atomic-slider' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->start_controls_tabs( 'tabs_mode_style1' );
		$this->start_controls_tab(
			'tab_normal_mode_normal1',
			[ 
				'label' => esc_html__( 'Normal', 'atomic-slider' ),
			]
		);

		$this->add_control(
			'icon_color',
			[ 
				'label'     => esc_html__( 'Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#242424',
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list-icon'     => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .asa-fancy-list-icon svg' => 'fill: {{VALUE}} !important;',
				],
			]
		);

		$this->add_control(
			'right_icon_bg_color',
			[ 
				'label'     => esc_html__( 'Background Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#fff',
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list-icon ' => 'background: {{VALUE}} ;'
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[ 
				'name'     => 'icon_border',
				'label'    => esc_html__( 'Border', 'atomic-slider' ),
				'selector' => '{{WRAPPER}} .asa-fancy-list-icon',
			]
		);

		$this->add_responsive_control(
			'icon_border_radius',
			[ 
				'label'      => esc_html__( 'Border Radius', 'atomic-slider' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .asa-fancy-list-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} ;',
				],
			]
		);

		$this->add_responsive_control(
			'icon_padding',
			[ 
				'label'      => esc_html__( 'Padding', 'atomic-slider' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .asa-fancy-list-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'icon_margin',
			[ 
				'label'      => esc_html__( 'Margin', 'atomic-slider' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .asa-fancy-list-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[ 
				'name'     => 'icon_typography',
				'selector' => '{{WRAPPER}} .asa-fancy-list-icon',
			]
		);
		//shadow
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[ 
				'name'     => 'icon_shadow',
				'label'    => esc_html__( 'Box Shadow', 'atomic-slider' ),
				'selector' => '{{WRAPPER}} .asa-fancy-list-icon',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_hover_mode_normal1',
			[ 
				'label' => esc_html__( 'Hover', 'atomic-slider' ),
			]
		);

		$this->add_control(
			'icon_color_hover',
			[ 
				'label'     => esc_html__( 'Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list-wrap:hover .asa-fancy-list-icon'     => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .asa-fancy-list-wrap:hover .asa-fancy-list-icon i'   => 'color: {{VALUE}} !important;',
					'{{WRAPPER}} .asa-fancy-list-wrap:hover .asa-fancy-list-icon svg' => 'fill: {{VALUE}} !important;',
				],
			]
		);

		$this->add_control(
			'icon_bg_color_hover',
			[ 
				'label'     => esc_html__( 'Background Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list-wrap:hover .asa-fancy-list-icon' => 'background-color: {{VALUE}} ;',
				],
			]
		);

		$this->add_control(
			'icon_border_color_hover',
			[ 
				'label'     => esc_html__( 'Border Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'condition' => [ 
					'icon_border_border!' => '',
				],
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list-wrap:hover .asa-fancy-list-icon' => 'border-color: {{VALUE}} ;',
				],
			]
		);
		//shadow
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[ 
				'name'     => 'icon_shadow_hover',
				'label'    => esc_html__( 'Box Shadow', 'atomic-slider' ),
				'selector' => '{{WRAPPER}} .asa-fancy-list-wrap:hover .asa-fancy-list-icon',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		$this->start_controls_section(
			'section_image_style',
			[ 
				'label' => esc_html__( 'Image', 'atomic-slider' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[ 
				'name'     => 'image_border',
				'label'    => esc_html__( 'Border', 'atomic-slider' ),
				'selector' => '{{WRAPPER}} .asa-fancy-list-img img',
			]
		);

		$this->add_responsive_control(
			'border_radius',
			[ 
				'label'      => esc_html__( 'Border Radius', 'atomic-slider' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .asa-fancy-list-img img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} ;',
				],
			]
		);

		$this->add_responsive_control(
			'image_margin',
			[ 
				'label'      => esc_html__( 'Margin', 'atomic-slider' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [ 
					'{{WRAPPER}} .asa-fancy-list-img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'image_size',
			[ 
				'label'     => esc_html__( 'Size', 'atomic-slider' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [ 
					'px' => [ 
						'min' => 10,
						'max' => 100,
					],
				],
				'selectors' => [ 
					'{{WRAPPER}} .asa-fancy-list-img img' => 'width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();
	}

	// Global controls for Slider and ACF Slider
	protected function register_slider_controls() {
		$this->start_controls_section(
			'section_content_layout',
			[
				'label' => esc_html__('Layout', 'atomic-slider'),
			]
		);
		$this->add_responsive_control(
			'height',
			[
				'label'   => esc_html__('Height', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 600,
				],
				'range' => [
					'px' => [
						'min' => 50,
						'max' => 1024,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-slide-item' => 'height: {{SIZE}}{{UNIT}};',
				],
			]
		);
		$this->add_responsive_control(
			'content_max_width',
			[
				'label'   => esc_html__('Content Width', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 200,
						'max' => 1200,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-desc' => 'width: {{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}};',
				],
			]
		);
		$this->add_control(
			'origin',
			[
				'label'   => esc_html__('Content Position', 'atomic-slider'),
				'type'    => Controls_Manager::SELECT,
				'default' => 'center',
				'options' => [
					'top-left'      => esc_html__('Top Left', 'atomic-slider'),
					'top-center'    => esc_html__('Top Center', 'atomic-slider'),
					'top-right'     => esc_html__('Top Right', 'atomic-slider'),
					'center'        => esc_html__('Center', 'atomic-slider'),
					'center-left'   => esc_html__('Center Left', 'atomic-slider'),
					'center-right'  => esc_html__('Center Right', 'atomic-slider'),
					'bottom-left'   => esc_html__('Bottom Left', 'atomic-slider'),
					'bottom-center' => esc_html__('Bottom Center', 'atomic-slider'),
					'bottom-right'  => esc_html__('Bottom Right', 'atomic-slider'),
				]
			]
		);
		$this->add_responsive_control(
			'align',
			[
				'label'   => esc_html__('Alignment', 'atomic-slider'),
				'type'    => Controls_Manager::CHOOSE,
				'options' => [
					'left' => [
						'title' => esc_html__('Left', 'atomic-slider'),
						'icon'  => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__('Center', 'atomic-slider'),
						'icon'  => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__('Right', 'atomic-slider'),
						'icon'  => 'eicon-text-align-right',
					],
					'justify' => [
						'title' => esc_html__('Justified', 'atomic-slider'),
						'icon'  => 'eicon-text-align-justify',
					],
				],
				'prefix_class' => 'elementor%s-align-',
				'description'  => 'Use align to match position',
				'default'      => 'center',
			]
		);
		$this->add_control(
			'show_title',
			[
				'label'   => esc_html__('Show Title', 'atomic-slider'),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);
		$this->add_control(
			'title_tags',
			[
				'label'   => __('Title HTML Tag', 'atomic-slider'),
				'type'    => Controls_Manager::SELECT,
				'default' => 'h2',
				'options' => atomicslider_title_tags(),
				'condition' => [
					'show_title' => 'yes'
				]
			]
		);
		$this->add_control(
			'show_button',
			[
				'label'   => esc_html__('Show Button', 'atomic-slider'),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);
		$this->add_control(
			'scroll_to_section',
			[
				'label' => esc_html__('Scroll to Section', 'atomic-slider'),
				'type'  => Controls_Manager::SWITCHER,
			]
		);
		$this->add_control(
			'section_id',
			[
				'label'       => esc_html__('Section ID', 'atomic-slider'),
				'type'        => Controls_Manager::TEXT,
				'placeholder' => 'Section ID Here',
				'description' => 'Enter section ID of this page, ex: #my-section',
				'label_block' => true,
				'condition'   => [
					'scroll_to_section' => 'yes',
				],
			]
		);
		$this->add_control(
			'slider_scroll_to_section_icon',
			[
				'label'       => esc_html__('Scroll to Section Icon', 'atomic-slider'),
				'type'        => Controls_Manager::ICONS,
				'fa4compatibility' => 'scroll_to_section_icon',
				'default' => [
					'value' => 'fas fa-angle-double-down',
					'library' => 'fa-solid',
				],
				'condition'   => [
					'scroll_to_section' => 'yes',
				],
			]
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'section_content_button',
			[
				'label'     => esc_html__('Button', 'atomic-slider'),
				'condition' => [
					'show_button' => 'yes',
				],
			]
		);
		$this->add_control(
			'button_text',
			[
				'label'       => esc_html__('Button Text', 'atomic-slider'),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__('Read More', 'atomic-slider'),
				'placeholder' => esc_html__('Read More', 'atomic-slider'),
			]
		);
		$this->add_control(
			'slider_icon',
			[
				'label'       => esc_html__('Icon', 'atomic-slider'),
				'type'        => Controls_Manager::ICONS,
				'fa4compatibility' => 'icon',
				'label_block' => false,
				'skin' => 'inline'
			]
		);
		$this->add_control(
			'icon_align',
			[
				'label'   => esc_html__('Icon Position', 'atomic-slider'),
				'type'    => Controls_Manager::SELECT,
				'default' => 'right',
				'options' => [
					'left'  => esc_html__('Left', 'atomic-slider'),
					'right' => esc_html__('Right', 'atomic-slider'),
				],
				'condition' => [
					'slider_icon[value]!' => '',
				],
			]
		);
		$this->add_control(
			'icon_indent',
			[
				'label'   => esc_html__('Icon Spacing', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 8,
				],
				'range' => [
					'px' => [
						'max' => 50,
					],
				],
				'condition' => [
					'slider_icon[value]!' => '',
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-button-icon-align-right' => is_rtl() ? 'margin-right: {{SIZE}}{{UNIT}};' : 'margin-left: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .asa-slider .asa-button-icon-align-left'  => is_rtl() ? 'margin-left: {{SIZE}}{{UNIT}};' : 'margin-right: {{SIZE}}{{UNIT}};',
				],
			]
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'section_content_navigation',
			[
				'label' => __('Navigation', 'atomic-slider'),
			]
		);
		$this->add_control(
			'navigation',
			[
				'label'   => __('Navigation', 'atomic-slider'),
				'type'    => Controls_Manager::SELECT,
				'default' => 'arrows',
				'options' => [
					'both'            => esc_html__('Arrows and Dots', 'atomic-slider'),
					'arrows-fraction' => esc_html__('Arrows and Fraction', 'atomic-slider'),
					'arrows'          => esc_html__('Arrows', 'atomic-slider'),
					'dots'            => esc_html__('Dots', 'atomic-slider'),
					'progressbar'     => esc_html__('Progress', 'atomic-slider'),
					'none'            => esc_html__('None', 'atomic-slider'),
				],
				'prefix_class' => 'asa-navigation-type-',
				'render_type' => 'template',
			]
		);
		$this->add_control(
			'dynamic_bullets',
			[
				'label'     => __('Dynamic Bullets?', 'atomic-slider'),
				'type'      => Controls_Manager::SWITCHER,
				'condition' => [
					'navigation' => ['dots', 'both'],
				],
			]
		);
		$this->add_control(
			'show_scrollbar',
			[
				'label'     => __('Show Scrollbar?', 'atomic-slider'),
				'type'      => Controls_Manager::SWITCHER,
			]
		);
		$this->add_control(
			'both_position',
			[
				'label'     => __('Arrows and Dots Position', 'atomic-slider'),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'center',
				'options'   => atomicslider_navigation_position(),
				'condition' => [
					'navigation' => 'both',
				],

			]
		);
		$this->add_control(
			'arrows_fraction_position',
			[
				'label'     => __('Arrows and Fraction Position', 'atomic-slider'),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'center',
				'options'   => atomicslider_navigation_position(),
				'condition' => [
					'navigation' => 'arrows-fraction',
				],

			]
		);
		$this->add_control(
			'arrows_position',
			[
				'label'     => __('Arrows Position', 'atomic-slider'),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'center',
				'options'   => atomicslider_navigation_position(),
				'condition' => [
					'navigation' => 'arrows',
				],

			]
		);
		$this->add_control(
			'dots_position',
			[
				'label'     => __('Dots Position', 'atomic-slider'),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'bottom-center',
				'options'   => atomicslider_pagination_position(),
				'condition' => [
					'navigation' => 'dots',
				],

			]
		);
		$this->add_control(
			'progress_position',
			[
				'label'   => __('Progress Position', 'atomic-slider'),
				'type'    => Controls_Manager::SELECT,
				'default' => 'bottom',
				'options' => [
					'bottom' => esc_html__('Bottom', 'atomic-slider'),
					'top'    => esc_html__('Top', 'atomic-slider'),
				],
				'condition' => [
					'navigation' => 'progressbar',
				],

			]
		);
		$this->add_control(
			'nav_arrows_icon',
			[
				'label'   => esc_html__('Arrows Icon', 'atomic-slider'),
				'type'    => Controls_Manager::SELECT,
				'default' => '0',
				'options' => [
					'0' => esc_html__('Default', 'atomic-slider'),
					'1' => esc_html__('Style 1', 'atomic-slider'),
					'2' => esc_html__('Style 2', 'atomic-slider'),
					'3' => esc_html__('Style 3', 'atomic-slider'),
					'4' => esc_html__('Style 4', 'atomic-slider'),
					'5' => esc_html__('Style 5', 'atomic-slider'),
					'6' => esc_html__('Style 6', 'atomic-slider'),
					'7' => esc_html__('Style 7', 'atomic-slider'),
					'8' => esc_html__('Style 8', 'atomic-slider'),
					'9' => esc_html__('Style 9', 'atomic-slider'),
					'10' => esc_html__('Style 10', 'atomic-slider'),
					'11' => esc_html__('Style 11', 'atomic-slider'),
					'12' => esc_html__('Style 12', 'atomic-slider'),
					'13' => esc_html__('Style 13', 'atomic-slider'),
					'14' => esc_html__('Style 14', 'atomic-slider'),
					'15' => esc_html__('Style 15', 'atomic-slider'),
					'16' => esc_html__('Style 16', 'atomic-slider'),
					'17' => esc_html__('Style 17', 'atomic-slider'),
					'18' => esc_html__('Style 18', 'atomic-slider'),
					'circle-1' => esc_html__('Style 19', 'atomic-slider'),
					'circle-2' => esc_html__('Style 20', 'atomic-slider'),
					'circle-3' => esc_html__('Style 21', 'atomic-slider'),
					'circle-4' => esc_html__('Style 22', 'atomic-slider'),
					'square-1' => esc_html__('Style 23', 'atomic-slider'),
				],
				'condition' => [
					'navigation' => ['arrows-fraction', 'both', 'arrows'],
				],
			]
		);
		$this->add_control(
			'hide_arrow_on_mobile',
			[
				'label'     => __('Hide Arrow on Mobile ?', 'atomic-slider'),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'yes',
				'condition' => [
					'navigation' => ['arrows-fraction', 'arrows', 'both'],
				],
			]
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'section_content_slider_settings',
			[
				'label' => esc_html__('Slider Settings', 'atomic-slider'),
			]
		);
		$this->add_control(
			'transition',
			[
				'label'   => esc_html__('Transition', 'atomic-slider'),
				'type'    => Controls_Manager::SELECT,
				'default' => 'slide',
				'options' => [
					'slide'     => esc_html__('Slide', 'atomic-slider'),
					'fade'      => esc_html__('Fade', 'atomic-slider'),
					'cube'      => esc_html__('Cube', 'atomic-slider'),
					'coverflow' => esc_html__('Coverflow', 'atomic-slider'),
					'flip'      => esc_html__('Flip', 'atomic-slider'),
					// 'creative'      => esc_html__('creative', 'atomic-slider'),
				],
			]
		);
		$this->add_control(
			'effect',
			[
				'label'   => esc_html__('Text Effect', 'atomic-slider'),
				'type'    => Controls_Manager::SELECT,
				'default' => 'left',
				'options' => [
					'left'    => esc_html__('Slide Right to Left', 'atomic-slider'),
					'bottom'  => esc_html__('Slider Bottom to Top', 'atomic-slider'),
				],
			]
		);
		$this->add_control(
			'autoplay',
			[
				'label'     => esc_html__('Autoplay', 'atomic-slider'),
				'type'      => Controls_Manager::SWITCHER,
				'default'   => 'yes',
				'separator' => 'before',
			]
		);
		$this->add_control(
			'autoplay_speed',
			[
				'label'     => esc_html__('Autoplay Speed', 'atomic-slider'),
				'type'      => Controls_Manager::NUMBER,
				'default'   => 5000,
				'condition' => [
					'autoplay' => 'yes',
				],
			]
		);
		$this->add_control(
			'pauseonhover',
			[
				'label' => esc_html__('Pause on Hover', 'atomic-slider'),
				'type'  => Controls_Manager::SWITCHER,
				'condition' => [
					'autoplay' => 'yes',
				],
			]
		);
		$this->add_control(
			'loop',
			[
				'label'   => __('Loop', 'atomic-slider'),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',

			]
		);
		$this->add_control(
			'keyboard',
			[
				'label'   => __('Keyboard', 'atomic-slider'),
				'type'    => Controls_Manager::SWITCHER,

			]
		);
		$this->add_control(
			'speed',
			[
				'label'   => __('Animation Speed (ms)', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 500,
				],
				'range' => [
					'px' => [
						'min'  => 100,
						'max'  => 5000,
						'step' => 50,
					],
				],
			]
		);
		$this->add_control(
			'observer',
			[
				'label'       => __('Observer', 'atomic-slider'),
				'description' => __('When you use carousel in any hidden place (in tabs, accordion etc) keep it yes.', 'atomic-slider'),
				'type'        => Controls_Manager::SWITCHER,
			]
		);
		$this->add_control(
			'mousewheel',
			[
				'label' => __('Mousewheel', 'atomic-slider'),
				'type'  => Controls_Manager::SWITCHER,
			]
		);
		$this->end_controls_section();

		//Style
		$this->start_controls_section(
			'section_style_slider',
			[
				'label' => esc_html__('Slider', 'atomic-slider'),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);
		$this->add_control(
			'slider_background_color',
			[
				'label'     => esc_html__('Background Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#14ABF4',
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-slide-item' => 'background-color: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'overlay_type',
			[
				'label'   => esc_html__('Overlay', 'atomic-slider'),
				'type'    => Controls_Manager::SELECT,
				'default' => 'none',
				'options' => [
					'none'       => esc_html__('None', 'atomic-slider'),
					'background' => esc_html__('Background', 'atomic-slider'),
					'blend'      => esc_html__('Blend', 'atomic-slider'),
				],
				'separator' => 'before'
			]
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'overlay_color',
				'label' => esc_html__('Background', 'atomic-slider'),
				'types' => ['classic', 'gradient'],
				'exclude' => ['image'],
				'selector' => '{{WRAPPER}} .asa-slider .asa-slide-item .asa-slider-image-wrapper:before',
				'fields_options' => [
					'background' => [
						'default' => 'classic',
					],
					'color' => [
						'default' => 'rgba(3, 4, 16, 0.4)',
					],
				],
				'condition' => [
					'overlay_type' => ['background', 'blend'],
				],
			]
		);
		$this->add_control(
			'blend_type',
			[
				'label'     => esc_html__('Blend Type', 'atomic-slider'),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'multiply',
				'options'   => atomicslider_blend_options(),
				'condition' => [
					'overlay_type' => 'blend',
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slider-image-wrapper:before' => 'mix-blend-mode: {{VALUE}};'
				],
			]
		);
		$this->add_responsive_control(
			'content_padding',
			[
				'label'      => esc_html__('Margin', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors'  => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-desc' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'separator' => 'before'
			]
		);
		$this->add_responsive_control(
			'content_margin',
			[
				'label'      => esc_html__('Padding', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors'  => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-desc' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_title',
			[
				'label'     => esc_html__('Title', 'atomic-slider'),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'show_title' => ['yes'],
				],
			]
		);
		$this->add_control(
			'title_color',
			[
				'label'     => esc_html__('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-title' => 'color: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'title_background',
			[
				'label'     => esc_html__('Background', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-title' => 'background-color: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'title_padding',
			[
				'label'      => esc_html__('Padding', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors'  => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'title_typography',
				'label'    => esc_html__('Typography', 'atomic-slider'),
				'selector' => '{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-title',
			]
		);
		$this->add_group_control(
			Group_Control_Text_Stroke::get_type(),
			[
				'name' => 'title_text_stroke',
				'label' => __('Text Stroke', 'atomic-slider'),
				'selector' => '{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-title',
			]
		);
		$this->add_responsive_control(
			'title_space',
			[
				'label' => esc_html__('Space', 'atomic-slider'),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
				],
			]
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_text',
			[
				'label' => esc_html__('Text', 'atomic-slider'),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);
		$this->add_control(
			'text_color',
			[
				'label'     => esc_html__('Text Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-text' => 'color: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'text_background',
			[
				'label'     => esc_html__('Background', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-text' => 'background-color: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'text_padding',
			[
				'label'      => esc_html__('Padding', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors'  => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-text' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'text_typography',
				'label'    => esc_html__('Text Typography', 'atomic-slider'),
				'selector' => '{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-text',
			]
		);
		$this->add_responsive_control(
			'text_space',
			[
				'label' => esc_html__('Text Space', 'atomic-slider'),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-text' => 'margin-bottom: {{SIZE}}{{UNIT}};',
				],
			]
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_button',
			[
				'label'     => esc_html__('Button', 'atomic-slider'),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'show_button' => 'yes',
				],
			]
		);
		$this->start_controls_tabs('tabs_button_style');
		$this->start_controls_tab(
			'tab_button_normal',
			[
				'label' => esc_html__('Normal', 'atomic-slider'),
			]
		);
		$this->add_control(
			'button_text_color',
			[
				'label'     => esc_html__('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-link' => 'color: {{VALUE}};',
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-link svg' => 'fill: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'background_color',
			[
				'label'     => esc_html__('Background Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-link' => 'background-color: {{VALUE}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'        => 'border',
				'label'       => esc_html__('Border', 'atomic-slider'),
				'placeholder' => '1px',
				'default'     => '1px',
				'selector'    => '{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-link',
				'separator'   => 'before',
			]
		);
		$this->add_responsive_control(
			'border_radius',
			[
				'label'      => esc_html__('Border Radius', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%'],
				'selectors'  => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-link' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_responsive_control(
			'button_padding',
			[
				'label'      => esc_html__('Padding', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors'  => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-link' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'button_box_shadow',
				'selector' => '{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-link',
			]
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'typography',
				'label'    => esc_html__('Typography', 'atomic-slider'),
				'selector' => '{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-link',
			]
		);
		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_button_hover',
			[
				'label' => esc_html__('Hover', 'atomic-slider'),
			]
		);
		$this->add_control(
			'hover_color',
			[
				'label'     => esc_html__('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-link:hover' => 'color: {{VALUE}};',
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-link:hover svg' => 'fill: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'button_background_hover_color',
			[
				'label'     => esc_html__('Background Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-link:hover' => 'background-color: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'button_hover_border_color',
			[
				'label'     => esc_html__('Border Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'condition' => [
					'border_border!' => '',
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-slide-item .asa-slide-link:hover' => 'border-color: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'button_hover_animation',
			[
				'label' => esc_html__('Animation', 'atomic-slider'),
				'type'  => Controls_Manager::HOVER_ANIMATION,
			]
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_navigation',
			[
				'label'     => __('Navigation', 'atomic-slider'),
				'tab'       => Controls_Manager::TAB_STYLE,
				'conditions'   => [
					'relation' => 'or',
					'terms' => [
						[
							'name'  => 'navigation',
							'operator' => '!=',
							'value' => 'none',
						],
						[
							'name'     => 'show_scrollbar',
							'value'    => 'yes',
						],
					],
				],
			]
		);
		$this->add_control(
			'arrows_heading',
			[
				'label'     => __('A R R O W S', 'atomic-slider'),
				'type'      => Controls_Manager::HEADING,
				'condition' => [
					'navigation!' => ['dots', 'progressbar', 'none'],
				],
			]
		);
		$this->start_controls_tabs('tabs_navigation_arrows_style');
		$this->start_controls_tab(
			'tabs_nav_arrows_normal',
			[
				'label' => __('Normal', 'atomic-slider'),
				'condition' => [
					'navigation!' => ['dots', 'progressbar', 'none'],
				],
			]
		);
		$this->add_control(
			'arrows_color',
			[
				'label'     => __('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#fff',
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-navigation-prev i, {{WRAPPER}} .asa-slider .asa-navigation-next i' => 'color: {{VALUE}}',
				],
				'condition' => [
					'navigation!' => ['dots', 'progressbar', 'none'],
				],
			]
		);
		$this->add_control(
			'arrows_background',
			[
				'label'     => __('Background', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-navigation-prev, {{WRAPPER}} .asa-slider .asa-navigation-next' => 'background-color: {{VALUE}}',
				],
				'condition' => [
					'navigation!' => ['dots', 'progressbar', 'none'],
				],
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'        => 'nav_arrows_border',
				'selector'    => '{{WRAPPER}} .asa-slider .asa-navigation-prev, {{WRAPPER}} .asa-slider .asa-navigation-next',
				'condition' => [
					'navigation!' => ['dots', 'progressbar', 'none'],
				],
			]
		);
		$this->add_control(
			'nav_border_radius',
			[
				'label'      => __('Border Radius', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%'],
				'selectors'  => [
					'{{WRAPPER}} .asa-slider .asa-navigation-prev, {{WRAPPER}} .asa-slider .asa-navigation-next' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition' => [
					'navigation!' => ['dots', 'progressbar', 'none'],
				],
			]
		);
		$this->add_responsive_control(
			'arrows_padding',
			[
				'label' => esc_html__('Padding', 'atomic-slider'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-navigation-prev, {{WRAPPER}} .asa-slider .asa-navigation-next' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition' => [
					'navigation!' => ['dots', 'progressbar', 'none'],
				],
			]
		);
		$this->add_control(
			'arrows_size',
			[
				'label' => __('Size', 'atomic-slider'),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 10,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-navigation-prev i,
					{{WRAPPER}} .asa-slider .asa-navigation-next i' => 'font-size: {{SIZE || 36}}{{UNIT}};',
				],
				'condition' => [
					'navigation!' => ['dots', 'progressbar', 'none'],
				],
			]
		);
		$this->add_control(
			'arrows_space',
			[
				'label' => __('Space Between Arrows', 'atomic-slider'),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-navigation-prev' => 'margin-right: {{SIZE}}px;',
					'{{WRAPPER}} .asa-slider .asa-navigation-next' => 'margin-left: {{SIZE}}px;',
				],
				'condition' => [
					'navigation!' => ['dots', 'progressbar', 'none'],
				],
			]
		);
		$this->end_controls_tab();

		$this->start_controls_tab(
			'tabs_nav_arrows_hover',
			[
				'label' => __('Hover', 'atomic-slider'),
				'condition' => [
					'navigation!' => ['dots', 'progressbar', 'none'],
				],
			]
		);
		$this->add_control(
			'arrows_hover_color',
			[
				'label'     => __('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-navigation-prev:hover i, {{WRAPPER}} .asa-slider .asa-navigation-next:hover i' => 'color: {{VALUE}}',
				],
				'condition' => [
					'navigation!' => ['dots', 'progressbar', 'none'],
				],
			]
		);
		$this->add_control(
			'arrows_hover_background',
			[
				'label'     => __('Background', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-navigation-prev:hover, {{WRAPPER}} .asa-slider .asa-navigation-next:hover' => 'background-color: {{VALUE}}',
				],
				'condition' => [
					'navigation!' => ['dots', 'progressbar', 'none'],
				],
			]
		);
		$this->add_control(
			'nav_arrows_hover_border_color',
			[
				'label'     => __('Border Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-navigation-prev:hover, {{WRAPPER}} .asa-slider .asa-navigation-next:hover'  => 'border-color: {{VALUE}};',
				],
				'condition' => [
					'nav_arrows_border_border!' => '',
					'navigation!' => ['dots', 'progressbar', 'none'],
				],
			]
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->add_control(
			'hr_1',
			[
				'type' => Controls_Manager::DIVIDER,
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
				],
			]
		);
		$this->add_control(
			'dots_heading',
			[
				'label'     => __('D O T S', 'atomic-slider'),
				'type'      => Controls_Manager::HEADING,
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
				],
			]
		);
		$this->start_controls_tabs('tabs_navigation_dots_style');
		$this->start_controls_tab(
			'tabs_nav_dots_normal',
			[
				'label'     => __('Normal', 'atomic-slider'),
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
				],
			]
		);
		$this->add_control(
			'dots_color',
			[
				'label'     => __('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#fff',
				'selectors' => [
					'{{WRAPPER}} .asa-slider .swiper-pagination-bullet' => 'background-color: {{VALUE}}',
				],
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
				],
			]
		);
		$this->add_responsive_control(
			'dots_space_between',
			[
				'label'     => __('Space Between', 'atomic-slider'),
				'type'      => Controls_Manager::SLIDER,
				'selectors' => [
					'{{WRAPPER}}' => '--asa-swiper-dots-space-between: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
				],
			]
		);
		$this->add_responsive_control(
			'dots_size',
			[
				'label'     => __('Size', 'atomic-slider'),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min' => 5,
						'max' => 20,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .swiper-pagination-bullet' => 'height: {{SIZE}}{{UNIT}};width: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
					'advanced_dots_size' => ''
				],
			]
		);
		$this->add_control(
			'advanced_dots_size',
			[
				'label'     => __('Advanced Size', 'atomic-slider'),
				'type'      => Controls_Manager::SWITCHER,
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
				],
			]
		);
		$this->add_responsive_control(
			'advanced_dots_width',
			[
				'label'     => __('Width(px)', 'atomic-slider'),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min' => 1,
						'max' => 50,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .swiper-pagination-bullet' => 'width: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
					'advanced_dots_size' => 'yes'
				],
			]
		);
		$this->add_responsive_control(
			'advanced_dots_height',
			[
				'label'     => __('Height(px)', 'atomic-slider'),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min' => 1,
						'max' => 50,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .swiper-pagination-bullet' => 'height: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
					'advanced_dots_size' => 'yes'
				],
			]
		);
		$this->add_responsive_control(
			'advanced_dots_radius',
			[
				'label'      => esc_html__('Border Radius', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%'],
				'selectors'  => [
					'{{WRAPPER}} .swiper-pagination-bullet' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
					'advanced_dots_size' => 'yes'
				],
			]
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'dots_box_shadow',
				'selector' => '{{WRAPPER}} .swiper-pagination-bullet',
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
				],
			]
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tabs_nav_dots_active',
			[
				'label'     => __('Active', 'atomic-slider'),
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
				],
			]
		);
		$this->add_control(
			'active_dot_color',
			[
				'label'     => __('Active Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .swiper-pagination-bullet-active' => 'background-color: {{VALUE}}',
				],
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
				],
			]
		);
		$this->add_responsive_control(
			'active_dots_size',
			[
				'label'     => __('Size', 'atomic-slider'),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min' => 5,
						'max' => 20,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .swiper-pagination-bullet-active' => 'height: {{SIZE}}{{UNIT}};width: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}}' => '--asa-swiper-dots-active-height: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
					'advanced_dots_size' => ''
				],
			]
		);
		$this->add_responsive_control(
			'active_advanced_dots_width',
			[
				'label'     => __('Width(px)', 'atomic-slider'),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min' => 1,
						'max' => 50,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .swiper-pagination-bullet-active' => 'width: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
					'advanced_dots_size' => 'yes'
				],
			]
		);
		$this->add_responsive_control(
			'active_advanced_dots_height',
			[
				'label'     => __('Height(px)', 'atomic-slider'),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min' => 1,
						'max' => 50,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .swiper-pagination-bullet-active' => 'height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}}' => '--asa-swiper-dots-active-height: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
					'advanced_dots_size' => 'yes'
				],
			]
		);
		$this->add_responsive_control(
			'active_advanced_dots_radius',
			[
				'label'      => esc_html__('Border Radius', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%'],
				'selectors'  => [
					'{{WRAPPER}} .swiper-pagination-bullet-active' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
					'advanced_dots_size' => 'yes'
				],
			]
		);
		$this->add_responsive_control(
			'active_advanced_dots_align',
			[
				'label'   => __('Alignment', 'atomic-slider'),
				'type'    => Controls_Manager::CHOOSE,
				'options' => [
					'flex-start' => [
						'title' => __('Top', 'atomic-slider'),
						'icon'  => 'eicon-v-align-top',
					],
					'center' => [
						'title' => __('Center', 'atomic-slider'),
						'icon'  => 'eicon-v-align-middle',
					],
					'flex-end' => [
						'title' => __('Bottom', 'atomic-slider'),
						'icon'  => 'eicon-v-align-bottom',
					],
				],
				'selectors' => [
					'{{WRAPPER}}' => '--asa-swiper-dots-align: {{VALUE}};',
				],
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
					'advanced_dots_size' => 'yes'
				],
			]
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'dots_active_box_shadow',
				'selector' => '{{WRAPPER}} .swiper-pagination-bullet-active',
				'condition' => [
					'navigation!' => ['arrows', 'arrows-fraction', 'progressbar', 'none'],
				],
			]
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->add_control(
			'hr_2',
			[
				'type' => Controls_Manager::DIVIDER,
				'condition' => [
					'navigation' => 'arrows-fraction',
				],
			]
		);
		$this->add_control(
			'fraction_heading',
			[
				'label'     => __('F R A C T I O N', 'atomic-slider'),
				'type'      => Controls_Manager::HEADING,
				'condition' => [
					'navigation' => 'arrows-fraction',
				],
			]
		);
		$this->add_control(
			'hr_12',
			[
				'type' => Controls_Manager::DIVIDER,
				'condition' => [
					'navigation' => 'arrows-fraction',
				],
			]
		);
		$this->add_control(
			'fraction_color',
			[
				'label'     => __('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#fff',
				'selectors' => [
					'{{WRAPPER}} .asa-slider .swiper-pagination-fraction' => 'color: {{VALUE}}',
				],
				'condition' => [
					'navigation' => 'arrows-fraction',
				],
			]
		);
		$this->add_control(
			'active_fraction_color',
			[
				'label'     => __('Active Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .swiper-pagination-current' => 'color: {{VALUE}}',
				],
				'condition' => [
					'navigation' => 'arrows-fraction',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'      => 'fraction_typography',
				'label'     => esc_html__('Typography', 'atomic-slider'),
				//'scheme'    => Schemes\Typography::TYPOGRAPHY_4,
				'selector'  => '{{WRAPPER}} .asa-slider .swiper-pagination-fraction',
				'condition' => [
					'navigation' => 'arrows-fraction',
				],
			]
		);
		$this->add_control(
			'hr_3',
			[
				'type' => Controls_Manager::DIVIDER,
				'condition' => [
					'navigation' => 'progressbar',
				],
			]
		);
		$this->add_control(
			'progresbar_heading',
			[
				'label'     => __('P R O G R E S B A R', 'atomic-slider'),
				'type'      => Controls_Manager::HEADING,
				'condition' => [
					'navigation' => 'progressbar',
				],
			]
		);
		$this->add_control(
			'hr_13',
			[
				'type' => Controls_Manager::DIVIDER,
				'condition' => [
					'navigation' => 'progressbar',
				],
			]
		);
		$this->add_control(
			'progresbar_color',
			[
				'label'     => __('Bar Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .swiper-pagination-progressbar' => 'background-color: {{VALUE}}',
				],
				'condition' => [
					'navigation' => 'progressbar',
				],
			]
		);
		$this->add_control(
			'progres_color',
			[
				'label'     => __('Progress Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'separator' => 'after',
				'selectors' => [
					'{{WRAPPER}} .asa-slider .swiper-pagination-progressbar .swiper-pagination-progressbar-fill' => 'background: {{VALUE}}',
				],
				'condition' => [
					'navigation' => 'progressbar',
				],
			]
		);
		$this->add_control(
			'hr_4',
			[
				'type' => Controls_Manager::DIVIDER,
				'condition'   => [
					'show_scrollbar' => 'yes'
				],
			]
		);
		$this->add_control(
			'scrollbar_heading',
			[
				'label'     => __('S C R O L L B A R', 'atomic-slider'),
				'type'      => Controls_Manager::HEADING,
				'condition'   => [
					'show_scrollbar' => 'yes'
				],
			]
		);
		$this->add_control(
			'hr_14',
			[
				'type' => Controls_Manager::DIVIDER,
				'condition'   => [
					'show_scrollbar' => 'yes'
				],
			]
		);
		$this->add_control(
			'scrollbar_color',
			[
				'label'     => __('Bar Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .swiper-scrollbar' => 'background: {{VALUE}}',
				],
				'condition'   => [
					'show_scrollbar' => 'yes'
				],
			]
		);
		$this->add_control(
			'scrollbar_drag_color',
			[
				'label'     => __('Drag Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .swiper-scrollbar .swiper-scrollbar-drag' => 'background: {{VALUE}}',
				],
				'condition'   => [
					'show_scrollbar' => 'yes'
				],
			]
		);
		$this->add_control(
			'scrollbar_height',
			[
				'label'   => __('Height', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 10,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .swiper-carousel-horizontal > .swiper-scrollbar' => 'height: {{SIZE}}px;',
				],
				'condition'   => [
					'show_scrollbar' => 'yes'
				],
			]
		);
		$this->add_control(
			'hr_5',
			[
				'type' => Controls_Manager::DIVIDER,
			]
		);
		$this->add_control(
			'navi_offset_heading',
			[
				'label'     => __('O F F S E T', 'atomic-slider'),
				'type'      => Controls_Manager::HEADING,
			]
		);
		$this->add_control(
			'hr_6',
			[
				'type' => Controls_Manager::DIVIDER,
			]
		);
		$this->add_responsive_control(
			'arrows_ncx_position',
			[
				'label'   => __('Arrows Horizontal Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 0,
				],
				'tablet_default' => [
					'size' => 0,
				],
				'mobile_default' => [
					'size' => 0,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'conditions'   => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'arrows',
						],
						[
							'name'     => 'arrows_position',
							'operator' => '!=',
							'value'    => 'center',
						],
					],
				],
				'selectors' => [
					'{{WRAPPER}}' => '--asa-swiper-carousel-arrows-ncx: {{SIZE}}px;'
				],
			]
		);
		$this->add_responsive_control(
			'arrows_ncy_position',
			[
				'label'   => __('Arrows Vertical Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 40,
				],
				'tablet_default' => [
					'size' => 40,
				],
				'mobile_default' => [
					'size' => 40,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors' => [
					'{{WRAPPER}}' => '--asa-swiper-carousel-arrows-ncy: {{SIZE}}px;'
				],
				'conditions'   => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'arrows',
						],
						[
							'name'     => 'arrows_position',
							'operator' => '!=',
							'value'    => 'center',
						],
					],
				],
			]
		);
		$this->add_responsive_control(
			'arrows_acx_position',
			[
				'label'   => __('Arrows Horizontal Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 35,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-navigation-prev' => 'left: {{SIZE}}px;',
					'{{WRAPPER}} .asa-slider .asa-navigation-next' => 'right: {{SIZE}}px;',
				],
				'conditions' => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'arrows',
						],
						[
							'name'  => 'arrows_position',
							'value' => 'center',
						],
					],
				],
			]
		);
		$this->add_responsive_control(
			'dots_nnx_position',
			[
				'label'   => __('Dots Horizontal Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 0,
				],
				'tablet_default' => [
					'size' => 0,
				],
				'mobile_default' => [
					'size' => 0,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'conditions'   => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'dots',
						],
						[
							'name'     => 'dots_position',
							'operator' => '!=',
							'value'    => '',
						],
					],
				],
				'selectors' => [
					'{{WRAPPER}}' => '--asa-swiper-carousel-dots-nnx: {{SIZE}}px;'
				],
			]
		);
		$this->add_responsive_control(
			'dots_nny_position',
			[
				'label'   => __('Dots Vertical Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => -30,
				],
				'tablet_default' => [
					'size' => -30,
				],
				'mobile_default' => [
					'size' => -30,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors' => [
					'{{WRAPPER}}' => '--asa-swiper-carousel-dots-nny: -{{SIZE}}px;'
				],
				'conditions'   => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'dots',
						],
						[
							'name'     => 'dots_position',
							'operator' => '!=',
							'value'    => '',
						],
					],
				],
			]
		);
		$this->add_responsive_control(
			'both_ncx_position',
			[
				'label'   => __('Arrows & Dots Horizontal Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 0,
				],
				'tablet_default' => [
					'size' => 0,
				],
				'mobile_default' => [
					'size' => 0,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'conditions'   => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'both',
						],
						[
							'name'     => 'both_position',
							'operator' => '!=',
							'value'    => 'center',
						],
					],
				],
				'selectors' => [
					'{{WRAPPER}}' => '--asa-swiper-carousel-both-ncx: {{SIZE}}px;'
				],
			]
		);
		$this->add_responsive_control(
			'both_ncy_position',
			[
				'label'   => __('Arrows & Dots Vertical Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 40,
				],
				'tablet_default' => [
					'size' => 40,
				],
				'mobile_default' => [
					'size' => 40,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors' => [
					'{{WRAPPER}}' => '--asa-swiper-carousel-both-ncy: {{SIZE}}px;'
				],
				'conditions'   => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'both',
						],
						[
							'name'     => 'both_position',
							'operator' => '!=',
							'value'    => 'center',
						],
					],
				],
			]
		);
		$this->add_responsive_control(
			'both_cx_position',
			[
				'label'   => __('Arrows Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 35,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-navigation-prev' => 'left: {{SIZE}}px;',
					'{{WRAPPER}} .asa-slider .asa-navigation-next' => 'right: {{SIZE}}px;',
				],
				'conditions' => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'both',
						],
						[
							'name'  => 'both_position',
							'value' => 'center',
						],
					],
				],
			]
		);
		$this->add_responsive_control(
			'both_cy_position',
			[
				'label'   => __('Dots Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => -55,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-dots-container' => 'transform: translateY({{SIZE}}px);',
				],
				'conditions' => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'both',
						],
						[
							'name'  => 'both_position',
							'value' => 'center',
						],
					],
				],
			]
		);
		$this->add_responsive_control(
			'arrows_fraction_ncx_position',
			[
				'label'   => __('Arrows & Fraction Horizontal Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 0,
				],
				'tablet_default' => [
					'size' => 0,
				],
				'mobile_default' => [
					'size' => 0,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'conditions'   => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'arrows-fraction',
						],
						[
							'name'     => 'arrows_fraction_position',
							'operator' => '!=',
							'value'    => 'center',
						],
					],
				],
				'selectors' => [
					'{{WRAPPER}}' => '--asa-swiper-carousel-arrows-fraction-ncx: {{SIZE}}px;'
				],
			]
		);
		$this->add_responsive_control(
			'arrows_fraction_ncy_position',
			[
				'label'   => __('Arrows & Fraction Vertical Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 40,
				],
				'tablet_default' => [
					'size' => 40,
				],
				'mobile_default' => [
					'size' => 40,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors' => [
					'{{WRAPPER}}' => '--asa-swiper-carousel-arrows-fraction-ncy: {{SIZE}}px;'
				],
				'conditions'   => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'arrows-fraction',
						],
						[
							'name'     => 'arrows_fraction_position',
							'operator' => '!=',
							'value'    => 'center',
						],
					],
				],
			]
		);
		$this->add_responsive_control(
			'arrows_fraction_cx_position',
			[
				'label'   => __('Arrows Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 35,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-navigation-prev' => 'left: {{SIZE}}px;',
					'{{WRAPPER}} .asa-slider .asa-navigation-next' => 'right: {{SIZE}}px;',
				],
				'conditions' => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'arrows-fraction',
						],
						[
							'name'  => 'arrows_fraction_position',
							'value' => 'center',
						],
					],
				],
			]
		);
		$this->add_responsive_control(
			'arrows_fraction_cy_position',
			[
				'label'   => __('Fraction Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => -55,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .swiper-pagination-fraction' => 'transform: translateY({{SIZE}}px);',
				],
				'conditions' => [
					'terms' => [
						[
							'name'  => 'navigation',
							'value' => 'arrows-fraction',
						],
						[
							'name'  => 'arrows_fraction_position',
							'value' => 'center',
						],
					],
				],
			]
		);
		$this->add_responsive_control(
			'progress_y_position',
			[
				'label'   => __('Progress Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'default' => [
					'size' => 15,
				],
				'range' => [
					'px' => [
						'min' => -200,
						'max' => 200,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .swiper-pagination-progressbar' => 'transform: translateY({{SIZE}}px);',
				],
				'condition' => [
					'navigation' => 'progressbar',
				],
			]
		);
		$this->add_responsive_control(
			'scrollbar_vertical_offset',
			[
				'label'   => __('Scrollbar Offset', 'atomic-slider'),
				'type'    => Controls_Manager::SLIDER,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .swiper-carousel-horizontal > .swiper-scrollbar' => 'bottom: {{SIZE}}px;',
				],
				'condition'   => [
					'show_scrollbar' => 'yes'
				],
			]
		);
		$this->end_controls_section();
		$this->start_controls_section(
			'section_style_scroll_to_top',
			[
				'label'      => esc_html__('Scroll to Top', 'atomic-slider'),
				'tab'        => Controls_Manager::TAB_STYLE,
				'conditions' => [
					'terms' => [
						[
							'name'  => 'scroll_to_section',
							'value' => 'yes',
						],
						[
							'name'     => 'section_id',
							'operator' => '!=',
							'value'    => '',
						],
					],
				],
			]
		);
		$this->start_controls_tabs('tabs_scroll_to_top_style');
		$this->start_controls_tab(
			'scroll_to_top_normal',
			[
				'label' => esc_html__('Normal', 'atomic-slider'),
			]
		);
		$this->add_control(
			'scroll_to_top_color',
			[
				'label'     => esc_html__('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-scroll-to-section a' => 'color: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'scroll_to_top_background',
			[
				'label'     => esc_html__('Background', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-scroll-to-section a' => 'background-color: {{VALUE}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'scroll_to_top_shadow',
				'selector' => '{{WRAPPER}} .asa-slider .asa-scroll-to-section a',
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'        => 'scroll_to_top_border',
				'label'       => esc_html__('Border', 'atomic-slider'),
				'placeholder' => '1px',
				'default'     => '1px',
				'selector'    => '{{WRAPPER}} .asa-slider .asa-scroll-to-section a',
				'separator'   => 'before',
			]
		);
		$this->add_control(
			'scroll_to_top_radius',
			[
				'label'      => esc_html__('Border Radius', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%'],
				'selectors'  => [
					'{{WRAPPER}} .asa-slider .asa-scroll-to-section a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_responsive_control(
			'scroll_to_top_padding',
			[
				'label'      => esc_html__('Padding', 'atomic-slider'),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors'  => [
					'{{WRAPPER}} .asa-slider .asa-scroll-to-section a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_responsive_control(
			'scroll_to_top_icon_size',
			[
				'label' => esc_html__('Icon Size', 'atomic-slider'),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 10,
						'max' => 100,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .asa-slider .asa-scroll-to-section a' => 'font-size: {{SIZE}}px;',
				],
			]
		);
		$this->add_responsive_control(
			'scroll_to_top_bottom_space',
			[
				'label' => esc_html__('Bottom Space', 'atomic-slider'),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min'  => 0,
						'max'  => 300,
						'step' => 5,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .asa-slider .asa-scroll-to-section' => 'margin-bottom: {{SIZE}}px;',
				],
			]
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'scroll_to_top_hover',
			[
				'label' => esc_html__('Hover', 'atomic-slider'),
			]
		);
		$this->add_control(
			'scroll_to_top_hover_color',
			[
				'label'     => esc_html__('Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-scroll-to-section a:hover' => 'color: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'scroll_to_top_hover_background',
			[
				'label'     => esc_html__('Background', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-scroll-to-section a:hover' => 'background-color: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'scroll_to_top_hover_border_color',
			[
				'label'     => esc_html__('Border Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'condition' => [
					'scroll_to_top_border_border!' => '',
				],
				'selectors' => [
					'{{WRAPPER}} .asa-slider .asa-scroll-to-section a:hover' => 'border-color: {{VALUE}};',
				],
			]
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();
	}

	// Global controls for Tabs and ACF Tabs
	protected function register_tabs_controls() {
		$this->add_control(
            'align',
            [
                'label'     => esc_html__('Alignment', 'atomic-slider'),
                'type'      => Controls_Manager::CHOOSE,
                'options'   => [
                    'left'        => [
                        'title' => esc_html__('Left', 'atomic-slider'),
                        'icon'  => 'eicon-text-align-left',
                    ],
                    'center'  => [
                        'title' => esc_html__('Center', 'atomic-slider'),
                        'icon'  => 'eicon-text-align-center',
                    ],
                    'right'   => [
                        'title' => esc_html__('Right', 'atomic-slider'),
                        'icon'  => 'eicon-text-align-right',
                    ],
                    'justify' => [
                        'title' => esc_html__('Justified', 'atomic-slider'),
                        'icon'  => 'eicon-text-align-justify',
                    ],
                ],
                'condition' => [
                    'tab_layout' => ['default', 'bottom']
                ],
            ]
        );

        $this->add_responsive_control(
            'item_spacing',
            [
                'label'     => esc_html__('Nav Spacing', 'atomic-slider'),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .asa-tab .asa-tabs-item'                                                                 => 'padding-left: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .asa-tab'                                                                                => 'margin-left: -{{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .asa-tab.asa-tab-left .asa-tabs-item, {{WRAPPER}} .asa-tab.asa-tab-right .asa-tabs-item' => 'padding-top: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .asa-tab.asa-tab-left, {{WRAPPER}} .asa-tab.asa-tab-right'                               => 'margin-top: -{{SIZE}}{{UNIT}};',
                ],
            ]
        );


        $this->add_responsive_control(
            'nav_spacing',
            [
                'label'     => esc_html__('Nav Width', 'atomic-slider'),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 50,
                        'max' => 500,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .uk-grid:not(.uk-grid-stack) .asa-tab-wrapper' => 'width: {{SIZE}}{{UNIT}};',
                ],
                'condition' => [
                    'tab_layout' => ['left', 'right']
                ],
            ]
        );

        $this->add_responsive_control(
            'content_spacing',
            [
                'label'     => esc_html__('Content Spacing', 'atomic-slider'),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default'   => [
                    'size' => 20,
                ],
                'selectors' => [
                    '{{WRAPPER}} .asa-tabs-default .asa-switcher-wrapper'                              => 'margin-top: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .asa-tabs-bottom .asa-switcher-wrapper'                               => 'margin-bottom: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .asa-tabs-left .uk-grid:not(.uk-grid-stack) .asa-switcher-wrapper'  => 'margin-left: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .asa-tabs-right .uk-grid:not(.uk-grid-stack) .asa-switcher-wrapper' => 'margin-right: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .asa-tabs-left .uk-grid-stack .asa-switcher-wrapper,
                    {{WRAPPER}} .asa-tabs-right .uk-grid-stack .asa-switcher-wrapper'      => 'margin-top: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_content_additional',
            [
                'label' => esc_html__('Additional', 'atomic-slider'),
            ]
        );

        $this->add_control(
            'active_item',
            [
                'label' => esc_html__('Active Item No', 'atomic-slider'),
                'type'  => Controls_Manager::NUMBER,
                'min'   => 1,
                'max'   => 20,
            ]
        );

        $this->add_control(
            'tab_transition',
            [
                'label'   => esc_html__('Transition', 'atomic-slider'),
                'type'    => Controls_Manager::SELECT,
                'options' => atomicslider_transition_options(),
                'default' => '',
            ]
        );

        $this->add_control(
            'duration',
            [
                'label'     => esc_html__('Animation Duration', 'atomic-slider'),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min'  => 1,
                        'max'  => 501,
                        'step' => 50,
                    ],
                ],
                'default'   => [
                    'size' => 200,
                ],
                'condition' => [
                    'tab_transition!' => ''
                ],
            ]
        );

        $this->add_control(
            'media',
            [
                'label'       => esc_html__('Turn On Horizontal mode', 'atomic-slider'),
                'description' => esc_html__('It means that tabs nav will switch vertical to horizontal on mobile mode', 'atomic-slider'),
                'type'        => Controls_Manager::CHOOSE,
                'options'     => [
                    960 => [
                        'title' => esc_html__('On Tablet', 'atomic-slider'),
                        'icon'  => 'eicon-device-tablet',
                    ],
                    768 => [
                        'title' => esc_html__('On Mobile', 'atomic-slider'),
                        'icon'  => 'eicon-device-mobile',
                    ],
                ],
                'default'     => 960,
                'condition'   => [
                    'tab_layout' => ['left', 'right']
                ],
            ]
        );

        $this->add_control(
            'nav_sticky_mode',
            [
                'label'     => esc_html__('Tabs Nav Sticky', 'atomic-slider'),
                'type'      => Controls_Manager::SWITCHER,
                'condition' => [
                    'tab_layout!' => 'bottom',
                ],
                'separator' => 'before'
            ]
        );

        $this->add_control(
            'nav_sticky_offset',
            [
                'label'     => esc_html__('Offset', 'atomic-slider'),
                'type'      => Controls_Manager::SLIDER,
                'default'   => [
                    'size' => 1,
                ],
                'condition' => [
                    'nav_sticky_mode' => 'yes',
                    'tab_layout!'     => 'bottom',
                ],
            ]
        );

        $this->add_control(
            'nav_sticky_on_scroll_up',
            [
                'label'       => esc_html__('Sticky on Scroll Up', 'atomic-slider'),
                'type'        => Controls_Manager::SWITCHER,
                'description' => esc_html__('Set sticky options when you scroll up your mouse.', 'atomic-slider'),
                'condition'   => [
                    'nav_sticky_mode' => 'yes',
                    'tab_layout!'     => 'bottom',
                ],
            ]
        );

        $this->add_control(
            'fullwidth_on_mobile',
            [
                'label'       => esc_html__('Fullwidth Nav on Mobile', 'atomic-slider'),
                'type'        => Controls_Manager::SWITCHER,
                'description' => esc_html__('If you have long test tab so this can help design issue.', 'atomic-slider'),
                'separator' => 'before'
            ]
        );

        $this->add_control(
            'swiping_on_mobile',
            [
                'label'       => esc_html__('Swiping Tab on Mobile', 'atomic-slider'),
                'type'        => Controls_Manager::SWITCHER,
                'description' => esc_html__('If you set yes so tab will swiping on mobile device by touch.', 'atomic-slider'),
                'default'     => 'yes',
                'separator' => 'before'
            ]
        );

        $this->add_control(
            'active_hash',
            [
                'label'   => esc_html__('Hash Location', 'atomic-slider'),
                'type'    => Controls_Manager::SWITCHER,
                'default' => 'no',
                'separator' => 'before'
            ]
        );

        $this->add_control(
            'hash_top_offset',
            [
                'label'      => esc_html__('Top Offset ', 'atomic-slider'),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => ['px', ''],
                'range'      => [
                    'px' => [
                        'min'  => 1,
                        'max'  => 1000,
                        'step' => 5,
                    ],

                ],
                'default'    => [
                    'unit' => 'px',
                    'size' => 70,
                ],
                'condition'  => [
                    'active_hash'      => 'yes',
                    'nav_sticky_mode!' => 'yes',
                ],
            ]
        );


        $this->add_control(
            'hash_scrollspy_time',
            [
                'label'      => esc_html__('Scrollspy Time', 'atomic-slider'),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => ['ms', ''],
                'range'      => [
                    'px' => [
                        'min'  => 500,
                        'max'  => 5000,
                        'step' => 1000,
                    ],
                ],
                'default'    => [
                    'unit' => 'px',
                    'size' => 1500,
                ],
                'condition'  => [
                    'active_hash'      => 'yes',
                    'nav_sticky_mode!' => 'yes',
                ],
            ]
        );


        $this->add_control(
            'tabs_match_height',
            [
                'label'       => esc_html__('Equal Tab Height', 'atomic-slider'),
                'type'        => Controls_Manager::SWITCHER,
                'description' => esc_html__('You can on/off tab item equal height feature.', 'atomic-slider'),
                'default'     => 'yes',
                'separator'   => 'before',
            ]
        );

        $this->add_control(
            'enable_section_bg',
            [
                'label'       => esc_html__('Connect Section Background', 'atomic-slider'),
                'type'        => Controls_Manager::SWITCHER,
                'description' => esc_html__('You will able to set Section Background as per Tab Items.', 'atomic-slider'),
                'separator'   => 'before',
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_background',
            [
                'label' => esc_html__('Section Background', 'atomic-slider'),
                'condition' => [
                    'enable_section_bg' => 'yes'
                ]
            ]
        );

        $this->add_control(
            'section_bg_selector',
            [
                'label'       => esc_html__('Section ID / Class', 'atomic-slider'),
                'type'        => Controls_Manager::TEXT,
                'dynamic'     => [
                    'active'  => true,
                ],
                'description' => esc_html__('Enter your Section ID/Class. Example #sec-1, .sec-1', 'atomic-slider'),
            ]
        );

        $repeater = new Repeater();

        $repeater->add_control(
            'section_bg',
            [
                'label' => esc_html__('Select Background', 'atomic-slider'),
                'type' => Controls_Manager::MEDIA,
                'render_type' => 'template',
                'default' => [
                    'url' => Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $this->add_control(
            'section_bg_list',
            [
                'label'         => esc_html__('Background List', 'atomic-slider'),
                'type'          => Controls_Manager::REPEATER,
                'fields'        => $repeater->get_controls(),
                'prevent_empty' => false,
                'title_field'   => '<img src="{{{ section_bg.url }}}" style="height: 40px; width: 40px; object-fit: cover;">',
            ]
        );

        $this->add_control(
            'section_bg_anim',
            [
                'label' => esc_html__('Select Animation', 'atomic-slider'),
                'type' => Controls_Manager::SELECT,
                'default' => 'none',
                'options' => [
                    'none'         => esc_html__('None', 'atomic-slider'),
                    'fade'         => esc_html__('Fade', 'atomic-slider'),
                    'scale-up'     => esc_html__('Scale Up', 'atomic-slider'),
                    'scale-down'   => esc_html__('Scale Down', 'atomic-slider'),
                    'slide-top'    => esc_html__('Slide Top', 'atomic-slider'),
                    'slide-bottom' => esc_html__('Slide Bottom', 'atomic-slider'),
                    'kenburns'     => esc_html__('Kenburns', 'atomic-slider'),
                    'shake'        => esc_html__('Shake', 'atomic-slider'),
                ],
            ]
        );

        $this->end_controls_section();

        //Style
        $this->start_controls_section(
            'section_tab_wrapper_style',
            [
                'label' => esc_html__('Tab Wrapper', 'atomic-slider'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'      => 'tab_wrapper_background',
                'types'     => ['classic', 'gradient'],
                'selector'  => '{{WRAPPER}} .asa-tab-wrapper > div',
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'        => 'tab_wrapper_border',
                'placeholder' => '1px',
                'default'     => '1px',
                'selector'    => '{{WRAPPER}} .asa-tab-wrapper > div',
            ]
        );

        $this->add_control(
            'tab_wrapper_radius',
            [
                'label'      => esc_html__('Border Radius', 'atomic-slider'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .asa-tab-wrapper > div' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
                ],
            ]
        );

        $this->add_responsive_control(
            'tab_wrapper_padding',
            [
                'label'      => esc_html__('Padding', 'atomic-slider'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .asa-tab-wrapper > div' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_toggle_style_title',
            [
                'label' => esc_html__('Tab', 'atomic-slider'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->start_controls_tabs('tabs_title_style');

        $this->start_controls_tab(
            'tab_title_normal',
            [
                'label' => esc_html__('Normal', 'atomic-slider'),
            ]
        );
        $this->add_control(
            'title_color',
            [
                'label'     => esc_html__('Text Color', 'atomic-slider'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .asa-tab .asa-tabs-item-title'     => 'color: {{VALUE}};',
                ],
                'separator' => 'before',
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'      => 'title_background',
                'types'     => ['classic', 'gradient'],
                'selector'  => '{{WRAPPER}} .asa-tab .asa-tabs-item-title',
                // 'separator' => 'after',
            ]
        );

       
        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'        => 'title_border',
                'placeholder' => '1px',
                'default'     => '1px',
                'selector'    => '{{WRAPPER}} .asa-tab .asa-tabs-item .asa-tabs-item-title',
                'separator'   => 'before',
            ]
        );

        $this->add_control(
            'title_radius',
            [
                'label'      => esc_html__('Border Radius', 'atomic-slider'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .asa-tab .asa-tabs-item .asa-tabs-item-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
                ],
            ]
        );

        //tab item row gap slider
        $this->add_responsive_control(
            'title_row_gap',
            [
                'label'      => esc_html__('Row Gap', 'atomic-slider'),
                'type'       => Controls_Manager::SLIDER,
                'size_units' => ['px', '%', 'em'],
                'range'      => [
                    'px' => [
                        'min'  => 0,
                        'max'  => 100,
                        'step' => 1,
                    ],

                ],
                'selectors'  => [
                    '{{WRAPPER}} .asa-tabs-area .asa-tab' => 'row-gap: {{SIZE}}{{UNIT}};',
                ],
            ]
        );


        

        $this->add_responsive_control(
            'title_padding',
            [
                'label'      => esc_html__('Padding', 'atomic-slider'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .asa-tab .asa-tabs-item-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'title_typography',
                'selector' => '{{WRAPPER}} .asa-tab .asa-tabs-item-title',
                //'scheme'   => Schemes\Typography::TYPOGRAPHY_1,
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'title_shadow',
                'selector' => '{{WRAPPER}} .asa-tab .asa-tabs-item .asa-tabs-item-title',
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'tab_title_hover',
            [
                'label' => esc_html__('Hover', 'atomic-slider'),
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'      => 'hover_title_background',
                'types'     => ['classic', 'gradient'],
                'selector'  => '{{WRAPPER}} .asa-tab .asa-tabs-item:hover .asa-tabs-item-title',
                'separator' => 'after',
            ]
        );

        $this->add_control(
            'hover_title_color',
            [
                'label'     => esc_html__('Text Color', 'atomic-slider'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .asa-tab .asa-tabs-item:hover .asa-tabs-item-title'     => 'color: {{VALUE}};',
                ],
                'separator' => 'before',
            ]
        );

        $this->add_control(
            'title_hover_border',
            [
                'label'     => esc_html__('Border Color', 'atomic-slider'),
                'type'      => Controls_Manager::COLOR,
                'condition' => [
                    'title_border_border!' => ''
                ],
                'selectors' => [
                    '{{WRAPPER}} .asa-tab .asa-tabs-item:hover .asa-tabs-item-title' => 'border-color: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'tab_title_active',
            [
                'label' => esc_html__('Active', 'atomic-slider'),
            ]
        );

        $this->add_control(
            'active_style_color',
            [
                'label'     => esc_html__('Style Color', 'atomic-slider'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .asa-tab .asa-tabs-item.asa-active .asa-tabs-item-title:after' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'      => 'active_title_background',
                'types'     => ['classic', 'gradient'],
                'selector'  => '{{WRAPPER}} .asa-tab .asa-tabs-item.asa-active .asa-tabs-item-title',
                'separator' => 'after',
            ]
        );

        $this->add_control(
            'active_title_color',
            [
                'label'     => esc_html__('Text Color', 'atomic-slider'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .asa-tab .asa-tabs-item.asa-active .asa-tabs-item-title'     => 'color: {{VALUE}};',
                ],
                'separator' => 'before',
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'active_title_shadow',
                'selector' => '{{WRAPPER}} .asa-tab .asa-tabs-item.asa-active .asa-tabs-item-title',
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'        => 'active_title_border',
                'placeholder' => '1px',
                'default'     => '1px',
                'selector'    => '{{WRAPPER}} .asa-tab .asa-tabs-item.asa-active .asa-tabs-item-title',
            ]
        );

        $this->add_control(
            'active_title_radius',
            [
                'label'      => esc_html__('Border Radius', 'atomic-slider'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .asa-tab .asa-tabs-item.asa-active .asa-tabs-item-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->end_controls_section();

        $this->start_controls_section(
            'section_style_sub_title',
            [
                'label' => esc_html__('Sub Title', 'atomic-slider'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->start_controls_tabs('tabs_sub_title_style');

        $this->start_controls_tab(
            'tab_sub_title_normal',
            [
                'label' => esc_html__('Normal', 'atomic-slider'),
            ]
        );


        $this->add_control(
            'sub_title_color',
            [
                'label'     => esc_html__('Text Color', 'atomic-slider'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .asa-tab .asa-tab-sub-title' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'sub_title_spacing',
            [
                'label'     => esc_html__('Spacing', 'atomic-slider'),
                'type'      => Controls_Manager::SLIDER,
                'selectors' => [
                    '{{WRAPPER}} .asa-tab .asa-tab-sub-title' => 'margin-top: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'sub_title_typography',
                'selector' => '{{WRAPPER}} .asa-tab .asa-tab-sub-title',
                //'scheme'   => Schemes\Typography::TYPOGRAPHY_1,
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'tab_sub_title_hover',
            [
                'label' => esc_html__('Hover', 'atomic-slider'),
            ]
        );

        $this->add_control(
            'hover_sub_title_color',
            [
                'label'     => esc_html__('Text Color', 'atomic-slider'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .asa-tab .asa-tabs-item:hover .asa-tab-sub-title' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'tab_sub_title_active',
            [
                'label' => esc_html__('Active', 'atomic-slider'),
            ]
        );

        $this->add_control(
            'active_sub_title_color',
            [
                'label'     => esc_html__('Text Color', 'atomic-slider'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .asa-tab .asa-tabs-item.asa-active .asa-tab-sub-title' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->end_controls_section();

        $this->start_controls_section(
            'section_toggle_style_content',
            [
                'label' => esc_html__('Content', 'atomic-slider'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name'      => 'content_background_color',
                'types'     => ['classic', 'gradient'],
                'selector'  => '{{WRAPPER}} .asa-tabs .asa-switcher-item-content',
                'separator' => 'after',
            ]
        );

        $this->add_control(
            'content_color',
            [
                'label'     => esc_html__('Text Color', 'atomic-slider'),
                'type'      => Controls_Manager::COLOR,
                'separator' => 'before',
                'selectors' => [
                    '{{WRAPPER}} .asa-tabs .asa-switcher-item-content' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name'        => 'content_border',
                'placeholder' => '1px',
                'default'     => '1px',
                'selector'    => '{{WRAPPER}} .asa-tabs .asa-switcher-item-content',
            ]
        );

        $this->add_control(
            'content_radius',
            [
                'label'      => esc_html__('Border Radius', 'atomic-slider'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .asa-tabs .asa-switcher-item-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
                ],
            ]
        );

        $this->add_responsive_control(
            'content_padding',
            [
                'label'      => esc_html__('Padding', 'atomic-slider'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .asa-tabs .asa-switcher-item-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name'     => 'content_typography',
                'selector' => '{{WRAPPER}} .asa-tabs .asa-switcher-item-content',
                //'scheme'   => Schemes\Typography::TYPOGRAPHY_3,
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_style_icon',
            [
                'label' => esc_html__('Icon', 'atomic-slider'),
                'tab'   => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->start_controls_tabs('tabs_icon_style');

        $this->start_controls_tab(
            'tab_icon_normal',
            [
                'label' => esc_html__('Normal', 'atomic-slider'),
            ]
        );

        $this->add_control(
            'icon_align',
            [
                'label'   => esc_html__('Alignment', 'atomic-slider'),
                'type'    => Controls_Manager::CHOOSE,
                'options' => [
                    'left'  => [
                        'title' => esc_html__('Start', 'atomic-slider'),
                        'icon'  => 'eicon-h-align-left',
                    ],
                    'right' => [
                        'title' => esc_html__('End', 'atomic-slider'),
                        'icon'  => 'eicon-h-align-right',
                    ],
                ],
                'default' => is_rtl() ? 'right' : 'left',
            ]
        );

        $this->add_control(
            'icon_color',
            [
                'label'     => esc_html__('Color', 'atomic-slider'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .asa-tab .asa-tabs-item-title i'   => 'color: {{VALUE}};',
                    '{{WRAPPER}} .asa-tab .asa-tabs-item-title svg'   => 'fill: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'icon_space',
            [
                'label'     => esc_html__('Spacing', 'atomic-slider'),
                'type'      => Controls_Manager::SLIDER,
                'range'     => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default'   => [
                    'size' => 8,
                ],
                'selectors' => [
                    '{{WRAPPER}} .asa-tabs .asa-tabs-item-title .asa-button-icon-align-right' => is_rtl() ? 'margin-right: {{SIZE}}{{UNIT}};' : 'margin-left: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .asa-tabs .asa-tabs-item-title .asa-button-icon-align-left' => is_rtl() ? 'margin-left: {{SIZE}}{{UNIT}};' : 'margin-right: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'tab_icon_hover',
            [
                'label' => esc_html__('Hover', 'atomic-slider'),
            ]
        );

        $this->add_control(
            'icon_hover_color',
            [
                'label'     => esc_html__('Color', 'atomic-slider'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .asa-tabs .asa-tabs-item:hover .asa-tabs-item-title i'   => 'color: {{VALUE}};',
                    '{{WRAPPER}} .asa-tabs .asa-tabs-item:hover .asa-tabs-item-title svg'   => 'fill: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->start_controls_tab(
            'tab_icon_active',
            [
                'label' => esc_html__('Active', 'atomic-slider'),
            ]
        );

        $this->add_control(
            'icon_active_color',
            [
                'label'     => esc_html__('Color', 'atomic-slider'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .asa-tabs .asa-tabs-item.asa-active .asa-tabs-item-title i'   => 'color: {{VALUE}};',
                    '{{WRAPPER}} .asa-tabs .asa-tabs-item.asa-active .asa-tabs-item-title svg'   => 'fill: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_tab();

        $this->end_controls_tabs();

        $this->end_controls_section();


        $this->start_controls_section(
            'section_tabs_sticky_style',
            [
                'label' => esc_html__('Sticky', 'atomic-slider'),
                'tab'   => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'nav_sticky_mode' => 'yes',
                    'tab_layout!'     => 'bottom',
                ],
            ]
        );

        $this->add_control(
            'sticky_background',
            [
                'label'     => esc_html__('Background', 'atomic-slider'),
                'type'      => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .asa-tabs > div > .asa-sticky.asa-active' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name'     => 'sticky_shadow',
                'selector' => '{{WRAPPER}} .asa-tabs > div > .asa-sticky.asa-active',
            ]
        );

        $this->add_control(
            'sticky_border_radius',
            [
                'label'      => esc_html__('Border Radius', 'atomic-slider'),
                'type'       => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors'  => [
                    '{{WRAPPER}} .asa-tabs > div > .asa-sticky.asa-active' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
                ],
            ]
        );

        $this->end_controls_section();
	}

	// render part start from here

	// Global function for Advanced Image Gallery and ACF Gallery
	protected function render_aig_header() {

		$settings = $this->get_settings_for_display();
		$id       = $this->get_id();

		$this->add_render_attribute('advanced-image-gallery', 'id', 'asa-avdg-' . esc_attr($id));
		$this->add_render_attribute('advanced-image-gallery', 'class', ['asa-advanced-image-gallery', 'asa-advanced-image-gallery-skin-default']);

		if ('yes' == $settings['advanced_spotlite_mode']) {
			$this->add_render_attribute('advanced-image-gallery', 'class', ['asa-spotlite-mode']);
		}

		if ('justified' == $settings['grid_type']) {
			$this->add_render_attribute('advanced-image-gallery', 'class', 'jgallery');

			if ($settings['gallery_item_height']['size']) {
				$this->add_render_attribute('advanced-image-gallery', 'data-jgallery-jfheight', esc_attr($settings['gallery_item_height']['size']));
			}

			if ($settings['row_column_gap']['size']) {
				$this->add_render_attribute('advanced-image-gallery', 'data-jgallery-itemgap', esc_attr($settings['row_column_gap']['size']));
			}
		} else {
			$this->add_render_attribute('advanced-image-gallery', 'data-uk-grid', '');
			$this->add_render_attribute('advanced-image-gallery', 'class', ['uk-grid', 'uk-grid-small']);

			$columns_mobile = isset($settings['columns_mobile']) ? $settings['columns_mobile'] : 1;
			$columns_tablet = isset($settings['columns_tablet']) ? $settings['columns_tablet'] : 3;
			$columns 		 = isset($settings['columns']) ? $settings['columns'] : 4;

			$this->add_render_attribute('advanced-image-gallery', 'class', 'uk-child-width-1-' . esc_attr($columns_mobile));
			$this->add_render_attribute('advanced-image-gallery', 'class', 'uk-child-width-1-' . esc_attr($columns_tablet) . '@s');
			$this->add_render_attribute('advanced-image-gallery', 'class', 'uk-child-width-1-' . esc_attr($columns) . '@m');
		}

		if ('masonry' == $settings['grid_type']) {
			$this->add_render_attribute('advanced-image-gallery', 'data-uk-grid', 'masonry: true');
		}

		if ($settings['caption_all_time']) {
			$this->add_render_attribute('advanced-image-gallery', 'class', 'asa-caption-all-time-yes');
		}


		if ($settings['show_lightbox'] or 'asa-hidden' === $settings['_skin']) {
			$this->add_render_attribute('advanced-image-gallery', 'data-asa-lightbox', 'animation: ' . $settings['lightbox_animation'] . ';');
			if ($settings['lightbox_autoplay']) {
				$this->add_render_attribute('advanced-image-gallery', 'data-asa-lightbox', 'autoplay: 500;');

				if ($settings['lightbox_pause']) {
					$this->add_render_attribute('advanced-image-gallery', 'data-asa-lightbox', 'pause-on-hover: true;');
				}
			}
		}

		$this->add_render_attribute(
			[
				'advanced-image-gallery' => [
					'data-settings' => [
						wp_json_encode([
							'id'		=> '#asa-avdg-' . $this->get_id(),
							'tiltShow'  => (isset($settings['tilt_show']) && $settings['tilt_show'] == 'yes') ? true : false
						]),
					],
				],
			]
		);

		?>
		<div <?php $this->print_render_attribute_string('advanced-image-gallery'); ?>>
			<?php
	}
	protected function render_aig_skin_carousel_header() {

		$settings = $this->parent->get_settings_for_display();
		$id       = $this->parent->get_id();

		$this->parent->add_render_attribute('advanced-image-gallery', 'id', 'asa-avdg-' . esc_attr($id) );
		$this->parent->add_render_attribute('advanced-image-gallery', 'class', ['asa-advanced-image-gallery', 'asa-advanced-image-gallery-skin-carousel'] );
		$this->parent->add_render_attribute('advanced-image-gallery', 'data-uk-grid', '');
		$this->parent->add_render_attribute('advanced-image-gallery', 'class', ['uk-grid', 'uk-grid-small'] );

		if ( $settings['show_lightbox'] ) {
			$this->parent->add_render_attribute('advanced-image-gallery', 'data-asa-lightbox', 'animation: slide');
		}

		$carousel_columns_mobile = isset($settings['carousel_columns_mobile']) ? $settings['carousel_columns_mobile'] : '1';
		$carousel_columns_tablet = isset($settings['carousel_columns_tablet']) ? $settings['carousel_columns_tablet'] : '3';
		$carousel_columns 		 = isset($settings['carousel_columns']) ? $settings['carousel_columns'] : '4';

		$this->parent->add_render_attribute('advanced-image-gallery', 'class', 'asa-slider-items');
		$this->parent->add_render_attribute('advanced-image-gallery', 'class', 'uk-child-width-1-' . esc_attr($carousel_columns_mobile));
		$this->parent->add_render_attribute('advanced-image-gallery', 'class', 'uk-child-width-1-' . esc_attr($carousel_columns_tablet) .'@s');
		$this->parent->add_render_attribute('advanced-image-gallery', 'class', 'uk-child-width-1-' . esc_attr($carousel_columns) .'@m');

		$this->parent->add_render_attribute(
			[
				'slider-settings' => [
					'class' => [
						( 'both' == $settings['navigation'] ) ? 'asa-arrows-dots-align-' . $settings['both_position'] : '',
						( 'arrows' == $settings['navigation'] or 'arrows-thumbnavs' == $settings['navigation'] ) ? 'asa-arrows-align-' . $settings['arrows_position'] : '',
						( 'dots' == $settings['navigation'] ) ? 'asa-dots-align-'. $settings['dots_position'] : '',
					],
					'data-asa-slider' => [
						wp_json_encode( [
							"autoplay"          => ( $settings["autoplay"] ) ? true : false,
							"autoplay-interval" => $settings["autoplay_interval"],
							"finite"            => ($settings["loop"]) ? false : true,
							"pause-on-hover"    => ( $settings["pause_on_hover"] ) ? true : false, 
							"center"            => ( $settings["center_slide"] ) ? true : false,
							"sets"              => ( $settings["slide_sets"] ) ? true : false,
						] )
					]
				]
			]
		);

		$this->parent->add_render_attribute(
			[
				'advanced-image-gallery' => [
					'data-settings' => [
						wp_json_encode([
							'id'		=> '#asa-avdg-' . $id,
							'tiltShow'  => ( isset($settings['tilt_show']) && $settings['tilt_show'] == 'yes') ? true : false
						]),
					],
				],
			]
		);
	 
		?>
		<div <?php $this->parent->print_render_attribute_string( 'slider-settings' ); ?>>
			<div <?php $this->parent->print_render_attribute_string( 'advanced-image-gallery' ); ?>>
		<?php
	}
	protected function render_aig_skin_carousel_footer($settings, $images) {

		?>
		</div>
		<?php if ('both' == $settings['navigation']) : ?>
			<?php $this->render_aig_skin_carousel_both_navigation($settings, $images); ?>

			<?php if ( 'center' === $settings['both_position'] ) : ?>
				<?php $this->render_aig_skin_carousel_dotnavs($settings, $images); ?>
			<?php endif; ?>

		<?php elseif ('arrows' == $settings['navigation']) : ?>
			<?php $this->render_aig_skin_carousel_navigation($settings); ?>
		<?php elseif ('dots' == $settings['navigation']) : ?>
			<?php $this->render_aig_skin_carousel_dotnavs($settings, $images); ?>
		<?php endif; ?>
	</div>
	<?php
	}
	protected function render_aig_skin_carousel_navigation($settings) {

		if (('both' == $settings['navigation']) and ('center' == $settings['both_position'])) {
			$arrows_position = 'center';
		} else {
			$arrows_position = $settings['arrows_position'];
		}

		$hide_arrow_on_mobile = $settings['hide_arrow_on_mobile'] ? ' uk-visible@m' : '';

		?>
		<div class="uk-position-z-index uk-position-<?php echo esc_attr( $arrows_position . $hide_arrow_on_mobile ); ?>">
			<div class="asa-arrows-container asa-slidenav-container">
				<a href="" class="asa-navigation-prev asa-slidenav-previous asa-slidenav" data-asa-slider-item="previous">
					<i class="asa-icon-arrow-left-<?php echo esc_attr($settings['nav_arrows_icon']); ?>" aria-hidden="true"></i>
				</a>
				<a href="" class="asa-navigation-next asa-slidenav-next asa-slidenav" data-asa-slider-item="next">
					<i class="asa-icon-arrow-right-<?php echo esc_attr($settings['nav_arrows_icon']); ?>" aria-hidden="true"></i>
				</a>
			</div>
		</div>
		<?php
	}
	protected function render_aig_skin_carousel_dotnavs($settings, $images) {

		if (('both' == $settings['navigation']) and ('center' == $settings['both_position'])) {
			$dots_position = 'bottom-center';
		} else {
			$dots_position = $settings['dots_position'];
		}

		$hide_arrow_on_mobile = $settings['hide_arrow_on_mobile'] ? ' uk-visible@m' : '';

		?>
		<div class="uk-position-z-index uk-position-<?php echo esc_attr( $dots_position . $hide_arrow_on_mobile ); ?>">
			<div class="asa-dotnav-wrapper asa-dots-container">
				<ul class="asa-dotnav uk-flex-center">

				    <?php		
					$asa_counter = 0;

					foreach ( $images as $index => $item ) :
					      
						echo '<li class="asa-slider-dotnav asa-active" data-asa-slider-item="' . esc_attr($asa_counter) . '"><a href="#"></a></li>';
						$asa_counter++;

					endforeach; ?>

				</ul>
			</div>
		</div>
		<?php
	}
	protected function render_aig_skin_carousel_both_navigation($settings, $images) {
		$hide_arrow_on_mobile = $settings['hide_arrow_on_mobile'] ? 'uk-visible@m' : '';
		?>
		<div class="uk-position-z-index uk-position-<?php echo esc_attr($settings['both_position']); ?>">
			<div class="asa-arrows-dots-container asa-slidenav-container ">
				
				<div class="uk-flex uk-flex-middle">
					<div class="<?php echo esc_attr( $hide_arrow_on_mobile ); ?>">
						<a href="" class="asa-navigation-prev asa-slidenav-previous asa-slidenav" data-asa-slider-item="previous">
							<i class="asa-icon-arrow-left-<?php echo esc_attr($settings['nav_arrows_icon']); ?>" aria-hidden="true"></i>
						</a>						
					</div>

					<?php if ('center' !== $settings['both_position']) : ?>
						<div class="asa-dotnav-wrapper asa-dots-container">
							<ul class="asa-dotnav">
							    <?php		
								$asa_counter = 0;

								foreach ( $images as $index => $item ) :								      
									echo '<li class="asa-slider-dotnav asa-active" data-asa-slider-item="' . esc_attr($asa_counter) . '"><a href="#"></a></li>';
									$asa_counter++;
								endforeach; ?>

							</ul>
						</div>
					<?php endif; ?>
					
					<div class="<?php echo esc_attr( $hide_arrow_on_mobile ); ?>">
						<a href="" class="asa-navigation-next asa-slidenav-next asa-slidenav" data-asa-slider-item="next">
							<i class="asa-icon-arrow-right-<?php echo esc_attr($settings['nav_arrows_icon']); ?>" aria-hidden="true"></i>
						</a>						
					</div>
					
				</div>
			</div>
		</div>		
		<?php
	}
	protected function render_aig_skin_hidden_header() {

		$settings = $this->parent->get_settings_for_display();
		$id       = $this->parent->get_id();

		$this->parent->add_render_attribute('advanced-image-gallery', 'id', 'asa-avdg-' . esc_attr($id) );

		$this->parent->add_render_attribute('advanced-image-gallery', 'class', ['asa-advanced-image-gallery', 'asa-advanced-image-gallery-skin-hidden'] );

		if ( $settings['show_lightbox'] ) {
			$this->parent->add_render_attribute('advanced-image-gallery', 'data-asa-lightbox', 'animation: ' . $settings['lightbox_animation'] . ';');
			if ($settings['lightbox_autoplay']) {
				$this->parent->add_render_attribute('advanced-image-gallery', 'data-asa-lightbox', 'autoplay: 500;');

				if ($settings['lightbox_pause']) {
					$this->parent->add_render_attribute('advanced-image-gallery', 'data-asa-lightbox', 'pause-on-hover: true;');
				}
			}
		}

		?>
		<div <?php $this->parent->print_render_attribute_string( 'advanced-image-gallery' ); ?>>
		<?php
	}
	protected function render_slider_arrows_fraction() {
		$settings             = $this->get_settings_for_display();
		$hide_arrow_on_mobile = $settings['hide_arrow_on_mobile'] ? 'uk-visible@m' : '';
		
		?>
		<div class="uk-position-z-index uk-position-<?php echo esc_attr($settings['arrows_fraction_position']); ?>">
			<div class="asa-arrows-fraction-container asa-slidenav-container ">

				<div class="uk-flex uk-flex-middle">
					<div class="<?php echo esc_attr($hide_arrow_on_mobile); ?>">
						<a href="" class="asa-navigation-prev asa-slidenav-previous asa-icon asa-slidenav">
							<i class="asa-icon-arrow-left-<?php echo esc_attr($settings['nav_arrows_icon']); ?>" aria-hidden="true"></i>
						</a>
					</div>

					<?php if ('center' !== $settings['arrows_fraction_position']) : ?>
						<div class="swiper-pagination"></div>
					<?php endif; ?>

					<div class="<?php echo esc_attr($hide_arrow_on_mobile); ?>">
						<a href="" class="asa-navigation-next asa-slidenav-next asa-icon asa-slidenav">
							<i class="asa-icon-arrow-right-<?php echo esc_attr($settings['nav_arrows_icon']); ?>" aria-hidden="true"></i>
						</a>
					</div>

				</div>
			</div>
		</div>
		<?php
	}
	protected function render_slider_loop_footer() {
		$settings    = $this->get_settings_for_display();
		
		if ('yes' === $settings['show_scrollbar']) : ?>
			<div class="swiper-scrollbar"></div>
		<?php endif; ?>
		</div>

		<?php if ('both' == $settings['navigation']) :
			$this->render_slider_both_navigation();
			if ('center' === $settings['both_position']) : ?>
				<div class="uk-position-z-index uk-position-bottom">
					<div class="asa-dots-container">
						<div class="swiper-pagination"></div>
					</div>
				</div>
			<?php endif;
		elseif ('arrows-fraction' == $settings['navigation']) :
			$this->render_slider_arrows_fraction();
			if ('center' === $settings['arrows_fraction_position']) : ?>
				<div class="asa-dots-container">
					<div class="swiper-pagination"></div>
				</div>
			<?php endif;
		else :
			$this->render_slider_pagination();
			$this->render_slider_navigation();
		endif; ?>
		</div>
		<?php
	}
	protected function render_slider_both_navigation() {
		$settings = $this->get_settings_for_display();
		$hide_arrow_on_mobile = $settings['hide_arrow_on_mobile'] ? 'uk-visible@m' : '';

		?>
		<div class="uk-position-z-index uk-position-<?php echo esc_attr($settings['both_position']); ?>">
			<div class="asa-arrows-dots-container asa-slidenav-container ">

				<div class="uk-flex uk-flex-middle">
					<div class="<?php echo esc_attr($hide_arrow_on_mobile); ?>">
						<a href="" class="asa-navigation-prev asa-slidenav-previous asa-icon asa-slidenav">
							<i class="asa-icon-arrow-left-<?php echo esc_attr($settings['nav_arrows_icon']); ?>" aria-hidden="true"></i>
						</a>
					</div>

					<?php if ('center' !== $settings['both_position']) : ?>
						<div class="swiper-pagination"></div>
					<?php endif; ?>

					<div class="<?php echo esc_attr($hide_arrow_on_mobile); ?>">
						<a href="" class="asa-navigation-next asa-slidenav-next asa-icon asa-slidenav">
							<i class="asa-icon-arrow-right-<?php echo esc_attr($settings['nav_arrows_icon']); ?>" aria-hidden="true"></i>
						</a>
					</div>

				</div>
			</div>
		</div>
		<?php
	}
	protected function render_slider_pagination() {
		$settings = $this->get_settings_for_display();

		if ('dots' == $settings['navigation'] or 'arrows-fraction' == $settings['navigation']) : ?>
			<div class="uk-position-z-index uk-position-<?php echo esc_attr($settings['dots_position']); ?>">
				<div class="asa-dots-container">
					<div class="swiper-pagination"></div>
				</div>
			</div>

		<?php elseif ('progressbar' == $settings['navigation']) : ?>
			<div class="swiper-pagination uk-position-z-index uk-position-<?php echo esc_attr($settings['progress_position']); ?>"></div>
		<?php endif;
	}
	protected function render_slider_navigation() {
		$settings = $this->get_settings_for_display();
		$hide_arrow_on_mobile = $settings['hide_arrow_on_mobile'] ? ' uk-visible@m' : '';

		if ('arrows' == $settings['navigation']) : ?>
			<div class="uk-position-z-index uk-position-<?php echo esc_attr($settings['arrows_position'] . $hide_arrow_on_mobile); ?>">
				<div class="asa-arrows-container asa-slidenav-container">
					<a href="" class="asa-navigation-prev asa-slidenav-previous asa-icon asa-slidenav">
						<i class="asa-icon-arrow-left-<?php echo esc_attr($settings['nav_arrows_icon']); ?>" aria-hidden="true"></i>
					</a>
					<a href="" class="asa-navigation-next asa-slidenav-next asa-icon asa-slidenav">
						<i class="asa-icon-arrow-right-<?php echo esc_attr($settings['nav_arrows_icon']); ?>" aria-hidden="true"></i>
					</a>
				</div>
			</div>
		<?php endif;
	}
	protected function render_slider_loop_header() {
		$settings = $this->get_settings_for_display();
		$id       = 'asa-slider-' . $this->get_id();

		$this->add_render_attribute('slider', 'id', $id);
		$this->add_render_attribute('slider', 'class', 'asa-slider');

		if ('arrows' == $settings['navigation']) {
			$this->add_render_attribute('slider', 'class', 'asa-arrows-align-' . $settings['arrows_position']);
		} elseif ('dots' == $settings['navigation']) {
			$this->add_render_attribute('slider', 'class', 'asa-dots-align-' . $settings['dots_position']);
		} elseif ('both' == $settings['navigation']) {
			$this->add_render_attribute('slider', 'class', 'asa-arrows-dots-align-' . $settings['both_position']);
		} elseif ('arrows-fraction' == $settings['navigation']) {
			$this->add_render_attribute('slider', 'class', 'asa-arrows-dots-align-' . $settings['arrows_fraction_position']);
		}

		if ('arrows-fraction' == $settings['navigation']) {
			$pagination_type = 'fraction';
		} elseif ('both' == $settings['navigation'] or 'dots' == $settings['navigation']) {
			$pagination_type = 'bullets';
		} elseif ('progressbar' == $settings['navigation']) {
			$pagination_type = 'progressbar';
		} else {
			$pagination_type = '';
		}

		$this->add_render_attribute(
			[
				'slider' => [
					'data-settings' => [
						wp_json_encode(array_filter([
							"autoplay"       => ("yes" == $settings["autoplay"]) ? ["delay" => $settings["autoplay_speed"]] : false,
							"loop"           => ($settings["loop"] == "yes") ? true : false,
							"speed"          => $settings["speed"]["size"],
							"pauseOnHover"   => ("yes" == $settings["pauseonhover"]) ? true : false,
							"observer"       => ($settings["observer"]) ? true : false,
							"observeParents" => ($settings["observer"]) ? true : false,
							"mousewheel" 	 => ($settings["mousewheel"]) ? true : false,
							"effect"         => $settings["transition"],
							"fadeEffect"     => ['crossFade' => true],
							"navigation"     => [
								"nextEl" => "#" . $id . " .asa-navigation-next",
								"prevEl" => "#" . $id . " .asa-navigation-prev",
							],
							"pagination" => [
								"el"             => "#" . $id . " .swiper-pagination",
								"type"           => $pagination_type,
								"clickable"      => "true",
								'dynamicBullets' => ("yes" == $settings["dynamic_bullets"]) ? true : false,
							],
							"scrollbar" => [
								"el"            => "#" . $id . " .swiper-scrollbar",
								"hide"          => "true",
							],
							"keyboard" => ("yes" == $settings["keyboard"]) ? ["enabled" => true, "onlyInViewport" => true,] : false,
						]))
					]
				]
			]
		);

		if (!isset($settings['scroll_to_section_icon']) && !Icons_Manager::is_migration_allowed()) {
			// add old default
			$settings['scroll_to_section_icon'] = 'fas fa-arrow-down';
		}

		$migrated  = isset($settings['__fa4_migrated']['slider_scroll_to_section_icon']);
		$is_new    = empty($settings['scroll_to_section_icon']) && Icons_Manager::is_migration_allowed();

		$this->add_render_attribute('swiper', 'class', 'swiper-carousel swiper');
		$direction = is_rtl() ? 'rtl' : 'ltr';

		$this->add_render_attribute( [
			'swiper' => [
				'role' => 'region',
				'aria-roledescription' => 'carousel',
				'aria-label' => $this->get_title(),
				'dir' => $direction,
			],
		] );

		?>
		<div <?php $this->print_render_attribute_string('slider'); ?>>
			<div <?php $this->print_render_attribute_string('swiper'); ?>>
				<?php if ($settings['scroll_to_section'] && $settings['section_id']) : ?>
					<div class="asa-scroll-to-section uk-position-bottom-center">
						<a href="<?php echo esc_url($settings['section_id']); ?>" asa-scroll>
							<span class="asa-scroll-to-section-icon">

								<?php if ($is_new || $migrated) :
									Icons_Manager::render_icon($settings['slider_scroll_to_section_icon'], ['aria-hidden' => 'true', 'class' => 'fa-fw']);
								else : ?>
									<i class="<?php echo esc_attr($settings['scroll_to_section_icon']); ?>" aria-hidden="true"></i>
								<?php endif; ?>

							</span>
						</a>
					</div>
				<?php endif;
	}
	protected function render_tabs_section_background() {

        $settings    = $this->get_settings_for_display();
        if ($settings['enable_section_bg'] !== 'yes') {
            return false;
        }

        if (!$settings['section_bg_list']) {
            return false;
        }
        $bg_list = [];
        foreach ($settings['section_bg_list'] as $index => $item) {
            $bg_list[$index] = $item['section_bg']['url'];
        }

        return $bg_list;
    }
	protected function desktop_tab_items($id) {
        $settings = $this->get_settings_for_display();
        $this->add_render_attribute('tabs-width', 'class', 'asa-tab-wrapper');

        if ('left' == $settings['tab_layout'] or 'right' == $settings['tab_layout']) {
            if ('right' == $settings['tab_layout']) {
                $this->add_render_attribute('tabs-width', 'class', 'uk-flex-last@m');
            }

            if (768 == $settings['media']) {
                $this->add_render_attribute('tabs-width', 'class', 'uk-width-auto@s');
                if ('right' == $settings['tab_layout']) {
                    $this->add_render_attribute('tabs-width', 'class', 'uk-flex-last');
                }
            } else {
                $this->add_render_attribute('tabs-width', 'class', 'uk-width-auto@m');
            }
        }

        $this->add_render_attribute(
            [
                'tabs-width' => [
                    'class' => [
                        ('left' == $settings['align'] or 'right' == $settings['align'] or 'center' == $settings['align']) ? 'uk-flex uk-flex-' . $settings['align'] : '',
                    ]
                ]
            ]
        );

        $this->add_render_attribute(
            [
                'tab-settings' => [
                    'class' => [
                        'asa-tab',
                        ('' !== $settings['tab_layout']) ? 'asa-tab-' . $settings['tab_layout'] : '',
                        ('justify' == $settings['align']) ? 'uk-child-width-expand' : '',
                        ('left' == $settings['align'] or 'right' == $settings['align'] or 'center' == $settings['align']) ? 'uk-flex uk-flex-' . $settings['align'] : '',
                    ]
                ]
            ]
        );

        $this->add_render_attribute('tab-settings', 'data-asa-tab', 'connect: #asa-tab-content-' . esc_attr($id) . ';');

        if (isset($settings['tab_transition']) and $settings['tab_transition']) {
            $this->add_render_attribute('tab-settings', 'data-asa-tab', 'animation: asa-animation-' . $settings['tab_transition'] . ';');
        }
        if (isset($settings['duration']['size']) and $settings['duration']['size']) {
            $this->add_render_attribute('tab-settings', 'data-asa-tab', 'duration: ' . $settings['duration']['size'] . ';');
        }
        if (isset($settings['media']) and $settings['media']) {
            $this->add_render_attribute('tab-settings', 'data-asa-tab', 'media: ' . intval($settings['media']) . ';');
        }
        if ('yes' != $settings['swiping_on_mobile']) {
            $this->add_render_attribute('tab-settings', 'data-asa-tab', 'swiping: false;');
        }

        if ($settings['tabs_match_height']) {
            $this->add_render_attribute('tab-settings', 'data-asa-height-match', 'target: > .asa-tabs-item > .asa-tabs-item-title; row: false;');
        }

        if (isset($settings['nav_sticky_mode']) && 'yes' == $settings['nav_sticky_mode']) {
            $this->add_render_attribute('tabs-sticky', 'data-asa-sticky', 'bottom: #bottom-anchor-' . $id . ';');

            if ($settings['nav_sticky_offset']['size']) {
                $this->add_render_attribute('tabs-sticky', 'data-asa-sticky', 'offset: ' . $settings['nav_sticky_offset']['size'] . ';');
            }
            if ($settings['nav_sticky_on_scroll_up']) {
                $this->add_render_attribute('tabs-sticky', 'data-asa-sticky', 'show-on-up: true; animation: asa-animation-slide-top');
            }
        }

        $this->render_loop_item($settings, $id);
    }

	protected function gloabl_read_more_link_style_controls() {

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'gb_read_more_typography',
				'selector' => '{{WRAPPER}} .asa_read_more, {{WRAPPER}} .asa_read_less',
			]
		);
		
		$this->start_controls_tabs(
			'gb_words_limit_style_tabs'
		);

		$this->start_controls_tab(
			'gb_words_limit_style_normal_tab',
			[ 
				'label' => esc_html__( 'Normal', 'textdomain' ),
			]
		);

		$this->add_control(
			'gb_words_limit_color',
			[ 
				'label'     => esc_html__( 'Color', 'atomic-slider' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [ 
					'{{WRAPPER}} .asa_read_more' => 'color: {{VALUE}};',
					'{{WRAPPER}} .asa_read_less' => 'color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'gb_words_limit_style_hover_tab',
			[ 
				'label' => esc_html__( 'Hover', 'textdomain' ),
			]
		);

		$this->add_control(
			'gb_words_limit_color_color_hover',
			[
				'label'     => esc_html__('Hover Color', 'atomic-slider'),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .asa_read_less:hover' => 'color: {{VALUE}};',
					'{{WRAPPER}} .asa_read_more:hover' => 'color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

	}
}