<?php
namespace Calio\Widgets;

use Elementor\Controls_Manager;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
use Elementor\Repeater;


use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Plugin;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}


class CalioNavbarMenuWalker extends \Walker_Nav_Menu {
    public $has_child = false;
    /**
     * @var array<int, string>
     */
    private array $item_styles = [];
    private int $top_level_position = 0;

    /**
     * @param array<int, string> $item_styles
     */
    public function __construct(array $item_styles = []) {
        $this->item_styles = $item_styles;
    }

    public function start_lvl(&$output, $depth = 0, $args = array()) {
        $output .= '<div class="bdt-navbar-dropdown bdt-drop"><ul class="bdt-nav bdt-navbar-dropdown-nav">';
    }

    public function end_lvl(&$output, $depth = 0, $args = array()) {
        $output .= '</ul></div>';
    }

    public function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
        $data = array();
        $class = '';
        $classes = empty($item->classes) ? array() : (array) $item->classes;
        $original_classes = $classes;

        if ($classes) {
            $class = trim((string) preg_replace('/menu-item(.+)/', '', implode(' ', $classes)));
        }

        // Keep source behavior: reset class stack to custom runtime classes.
        $classes = array();
        $data['style'] = '';
        if ((int) $depth === 0) {
            $this->top_level_position++;
            if (!empty($this->item_styles[$this->top_level_position])) {
                $data['style'] = $this->item_styles[$this->top_level_position];
            }
        }

        $has_children = !empty($item->hasChildren)
            || in_array('menu-item-has-children', $original_classes, true)
            || (!empty($args->has_children));

        if ($has_children) {
            $classes[] = ' bdt-parent';
        }

        if ($item->current || $item->current_item_parent || $item->current_item_ancestor) {
            $classes[] = ' bdt-active';
        }

        if (!empty($item->dropdown_child) && $depth > 0) {
            $classes[] = ' sub-dropdown';
        }

        $data['data-id'] = (int) $item->ID;

        if (!empty($item->full_width)) {
            $data['full_width'] = (string) $item->full_width;
        } elseif (!empty($item->style_position)) {
            if ($item->style_position === 'bottom-left') {
                $data_uk_dropdown = is_rtl() ? 'bottom-right' : 'bottom-left';
            } elseif ($item->style_position === 'bottom-right') {
                $data_uk_dropdown = is_rtl() ? 'bottom-left' : 'bottom-right';
            } else {
                $data_uk_dropdown = (string) $item->style_position;
            }
            $data['dropdown_style'] = $data_uk_dropdown;
        }

        $attributes = '';
        foreach ($data as $name => $value) {
            $attributes .= sprintf(' %s="%s"', esc_attr((string) $name), esc_attr((string) $value));
        }

        if ($classes) {
            $class .= implode(' ', $classes);
        }

        if ($class) {
            $class = ' class="' . esc_attr($class) . '"';
        } else {
            $class = '';
        }

        $output .= '<li' . $attributes . $class . '>';

        $attributes = '';
        if ( ! empty( $item->attr_title ) ) {
            $attributes .= sprintf( ' title="%s"', esc_attr( (string) $item->attr_title ) );
        }
        if ( ! empty( $item->target ) ) {
            $attributes .= sprintf( ' target="%s"', esc_attr( (string) $item->target ) );
        }
        $rel_values = [];
        if ( ! empty( $item->xfn ) ) {
            $rel_values = preg_split( '/\s+/', trim( (string) $item->xfn ) ) ?: [];
        }
        if ( ! empty( $item->target ) && '_blank' === (string) $item->target ) {
            $rel_values[] = 'noopener';
            $rel_values[] = 'noreferrer';
        }
        $rel_values = array_values( array_unique( array_filter( array_map( 'sanitize_html_class', $rel_values ) ) ) );
        if ( ! empty( $rel_values ) ) {
            $attributes .= sprintf( ' rel="%s"', esc_attr( implode( ' ', $rel_values ) ) );
        }
        if ( ! empty( $item->url ) ) {
            $attributes .= sprintf( ' href="%s"', esc_url( (string) $item->url ) );
        }

        $classes = trim((string) preg_replace('/menu-item(.+)/', '', implode(' ', $classes)));

        if ((string) $item->url === '#') {
            $isline = preg_match('/^\s*\-+\s*$/', (string) $item->title);

            $type = 'header';
            if ($isline) {
                $type = 'separator-line';
            } elseif (!empty($item->hasChildren)) {
                $type = 'separator-text';
            }

            $format = '%s<a href="#" %s>%s</a>%s';
            $classes .= ' separator';
            $attributes = ' class="' . esc_attr(trim($classes)) . '" data-type="' . esc_attr($type) . '"';
        } else {
            $format = '%s<a%s>%s</a>%s';
        }

        // WordPress core filter.
        // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound
        $title = apply_filters('the_title', $item->title, $item->ID);

        $item_output = sprintf(
            $format,
            wp_kses_post( (string) $args->before ),
            $attributes,
            wp_kses_post( (string) $args->link_before ) . esc_html( (string) $title ) . wp_kses_post( (string) $args->link_after ),
            wp_kses_post( (string) $args->after )
        );

        // WordPress core filter.
        // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound
        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }

    public function end_el(&$output, $item, $depth = 0, $args = array()) {
        $output .= '</li>';
    }

    public function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) {
        $element->hasChildren = isset($children_elements[$element->ID]) && !empty($children_elements[$element->ID]);
        return parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
}
class NavbarWidget extends BaseWidget {

	public function get_name() {
		return 'calio-navbar';
	}

	public function get_title() {
		return esc_html__( 'Navbar', 'calio-addon' );
	}

	public function get_icon() {
		return 'eicon-nav-menu';
	}

	public function get_categories(): array {
		return ['calio-widgets'];
	}

	public function get_keywords(): array {
		return [ 'navbar', 'menu' ];
	}

	public function get_style_depends(): array
    {
        return $this->resolve_widget_style_depends('calio-widget-navbar');
    }

	public function get_script_depends(): array
    {
        return $this->resolve_widget_script_depends('calio-widget-navbar');
    }

	public function has_widget_inner_wrapper(): bool {
		return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
	}

    	

	protected function register_controls() {
		
		$this->start_controls_section(
			'section_navbar_content',
			[
				'label' => esc_html__( 'Navbar', 'calio-addon' ),
			]
		);

		$this->add_control(
			'navbar',
			[
				'label'   => esc_html__( 'Select Menu', 'calio-addon' ),
				'type'    => Controls_Manager::SELECT,
				'options' => $this->get_available_menus(),
				'default' => 0,
			]
		);

		$this->add_responsive_control(
			'align',
			[
				'label'   => esc_html__( 'Alignment', 'calio-addon' ),
				'type'    => Controls_Manager::CHOOSE,
				'options' => [
					'flex-start' => [
						'title' => esc_html__( 'Start', 'calio-addon' ),
						'icon'  => 'eicon-h-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'calio-addon' ),
						'icon'  => 'eicon-h-align-center',
					],
					'flex-end'  => [
						'title' => esc_html__( 'End', 'calio-addon' ),
						'icon'  => 'eicon-h-align-right',
					],
				],
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-container' => 'justify-content: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'menu_offset',
			[
				'label' => esc_html__( 'Offset', 'calio-addon' ),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => -150,
						'max' => 150,
					],
				],
				'size_units' => [ 'px' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-navbar-nav' => 'transform: translateX({{SIZE}}{{UNIT}});',
				],
			]
		);

		$this->add_responsive_control(
			'text_padding',
			[
				'label'      => esc_html__( 'Padding', 'calio-addon' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-navbar-nav > li > a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'menu_height',
			[
				'label' => esc_html__( 'Menu Height', 'calio-addon' ),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 20,
						'max' => 150,
					],
				],
				'size_units' => [ 'px'],
				'selectors'  => [
					'{{WRAPPER}} .bdt-navbar-nav > li > a' => 'min-height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'menu_parent_arrow',
			[
				'label'        => __( 'Parent Indicator', 'calio-addon' ),
				'type'         => Controls_Manager::SWITCHER,
				'prefix_class' => 'bdt-navbar-parent-indicator-',
			]
		);

		$this->add_control(
			'auto_hiding_menu',
			[
				'label'        => __( 'Auto Hiding Menu', 'calio-addon' ),
				'type'         => Controls_Manager::SWITCHER,
			]
		);

		$this->add_control(
			'mobile_toggle',
			[
				'label'        => esc_html__( 'Mobile Toggle Button', 'calio-addon' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'yes',
				'return_value' => 'yes',
			]
		);

		$this->add_control(
			'mobile_toggle_label',
			[
				'label'     => esc_html__( 'Toggle Label', 'calio-addon' ),
				'type'      => Controls_Manager::TEXT,
				'default'   => esc_html__( 'Menu', 'calio-addon' ),
				'condition' => [
					'mobile_toggle' => 'yes',
				],
			]
		);

		$this->add_control(
			'mobile_toggle_skin',
			[
				'label'   => esc_html__( 'Toggle Skin', 'calio-addon' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'glass',
				'options' => [
					'glass' => esc_html__( 'Glass', 'calio-addon' ),
					'solid' => esc_html__( 'Solid', 'calio-addon' ),
					'outline' => esc_html__( 'Outline', 'calio-addon' ),
					'minimal' => esc_html__( 'Minimal', 'calio-addon' ),
				],
				'condition' => [
					'mobile_toggle' => 'yes',
				],
			]
		);

		$this->add_control(
			'mobile_breakpoint',
			[
				'label'      => esc_html__( 'Mobile Breakpoint', 'calio-addon' ),
				'type'       => Controls_Manager::SLIDER,
				'default'    => [
					'size' => 1024,
				],
				'range'      => [
					'px' => [
						'min' => 600,
						'max' => 1400,
					],
				],
				'size_units' => ['px'],
				'condition'  => [
					'mobile_toggle' => 'yes',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'dropdown_content',
			[
				'label' => esc_html__( 'Dropdown', 'calio-addon' ),
			]
		);

		$this->add_responsive_control(
			'dropdown_align',
			[
				'label'     => esc_html__( 'Dropdown Alignment', 'calio-addon' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => [
					'left'   => [
						'title' => esc_html__( 'Left', 'calio-addon' ),
						'icon'  => 'eicon-h-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'calio-addon' ),
						'icon'  => 'eicon-h-align-center',
					],
					'right'  => [
						'title' => esc_html__( 'Right', 'calio-addon' ),
						'icon'  => 'eicon-h-align-right',
					],
				],
			]
		);

		$this->add_responsive_control(
			'dropdown_link_align',
			[
				'label'   => esc_html__( 'Item Alignment', 'calio-addon' ),
				'type'    => Controls_Manager::CHOOSE,
				'options' => [
					'left' => [
						'title' => esc_html__( 'Left', 'calio-addon' ),
						'icon'  => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'calio-addon' ),
						'icon'  => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__( 'Right', 'calio-addon' ),
						'icon'  => 'eicon-text-align-right',
					],
				],
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-dropdown-nav > li > a' => 'text-align: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'dropdown_padding',
			[
				'label'      => esc_html__( 'Dropdown Padding', 'calio-addon' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-navbar-dropdown' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'dropdown_width',
			[
				'label' => esc_html__( 'Dropdown Width', 'calio-addon' ),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 150,
						'max' => 350,
					],
				],
				'size_units' => [ 'px'],
				'selectors'  => [
					'{{WRAPPER}} .bdt-navbar-dropdown' => 'width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'dropdown_additional',
			[
				'label' => esc_html__( 'Additional', 'calio-addon' ),
			]
		);

		$this->add_control(
			'dropdown_delay_show',
			[
				'label' => esc_html__( 'Delay Show', 'calio-addon' ),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 2000,
					],
				],
			]
		);

		$this->add_control(
			'dropdown_delay_hide',
			[
				'label' => esc_html__( 'Delay Hide', 'calio-addon' ),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 2000,
					],
				],
				'default' => ['size' => 800],
			]
		);

		$this->add_control(
			'dropdown_duration',
			[
				'label' => esc_html__( 'Dropdown Duration', 'calio-addon' ),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 2000,
					],
				],
				'default' => ['size' => 200],
			]
		);

		$this->add_control(
			'dropdown_offset',
			[
				'label' => esc_html__( 'Dropdown Offset', 'calio-addon' ),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 200,
					],
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_menu_style',
			[
				'label' => esc_html__( 'Navbar', 'calio-addon' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'navbar_style',
			[
				'label'   => __( 'Navbar Style', 'calio-addon' ),
				'type'    => Controls_Manager::SELECT,
				'default' => '',
				'options' => [
					''  => __( 'Default', 'calio-addon' ),
					'1' => __( 'Style 1', 'calio-addon' ),
					'2' => __( 'Style 2', 'calio-addon' ),
					'3' => __( 'Style 3', 'calio-addon' ),
					'4' => __( 'Style 4', 'calio-addon' ),
				],
				'prefix_class' => 'bdt-navbar-style-',
			]
		);

		$this->start_controls_tabs( 'menu_link_styles' );

		$this->start_controls_tab( 'menu_link_normal', [ 'label' => esc_html__( 'Normal', 'calio-addon' ) ] );

		$this->add_control(
			'menu_link_color',
			[
				'label'     => esc_html__( 'Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-nav > li > a' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'menu_link_background',
			[
				'label'     => esc_html__( 'Background Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-nav > li > a' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'menu_spacing',
			[
				'label' => esc_html__( 'Column Gap', 'calio-addon' ),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 25,
					],
				],
				'size_units' => [ 'px'],
				'selectors'  => [
					'{{WRAPPER}} .bdt-navbar-nav' => 'margin-left: -{{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-navbar-nav > li' => 'margin-left: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'menu_bottom_spacing',
			[
				'label' => esc_html__( 'Row Gap', 'calio-addon' ),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 25,
					],
				],
				'size_units' => [ 'px'],
				'selectors'  => [
					'{{WRAPPER}} .bdt-navbar-nav' => 'margin-bottom: -{{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-navbar-nav > li' => 'margin-bottom: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'menu_border',
				'label'    => esc_html__( 'Border', 'calio-addon' ),
				'default'  => '1px',
				'selector' => '{{WRAPPER}} .bdt-navbar-nav > li > a',
			]
		);

		$this->add_control(
			'menu_border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'calio-addon' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-navbar-nav > li > a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'menu_typography_normal',
				'label'    => esc_html__( 'Typography', 'calio-addon' ),
				//'scheme'   => Schemes\Typography::TYPOGRAPHY_1,
				'selector' => '{{WRAPPER}} .bdt-navbar-nav > li > a',
			]
		);

		$this->add_control(
			'menu_parent_arrow_color',
			[
				'label'     => esc_html__( 'Parent Indicator Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}}.bdt-navbar-parent-indicator-yes .bdt-navbar-nav > li.bdt-parent a:after' => 'color: {{VALUE}};',
				],
				'condition' => ['menu_parent_arrow' => 'yes'],
			]
		);
		//auto hiding menu shadow
		$this->add_control(
			'auto_hiding_menu_both_side_color',
			[
				'label'     => esc_html__( 'Auto Hiding Menu Shadow', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-auto-hide-menu .bdt-cd-secondary-nav::before' => 'background: linear-gradient(to right, {{VALUE}}, rgba(37,40,61,0));',
					'{{WRAPPER}} .bdt-auto-hide-menu .bdt-cd-secondary-nav::after' => 'background: linear-gradient(to left, {{VALUE}}, rgba(37,40,61,0));',
				],
				'condition' => ['auto_hiding_menu' => 'yes'],
			]
		);


		$this->end_controls_tab();

		$this->start_controls_tab( 'menu_link_hover', [ 'label' => esc_html__( 'Hover', 'calio-addon' ) ] );

		$this->add_control(
			'navbar_hover_style_color',
			[
				'label'     => esc_html__( 'Style Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-nav > li:hover > a:before' => 'background-color: {{VALUE}};',
					'{{WRAPPER}} .bdt-navbar-nav > li:hover > a:after'  => 'background-color: {{VALUE}};',
				],
				'condition' => [
					'navbar_style!' => '',
				],
			]
		);

		$this->add_control(
			'menu_link_color_hover',
			[
				'label'     => esc_html__( 'Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-nav > li > a:hover' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'link_background_hover',
			[
				'label'     => esc_html__( 'Background Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-nav > li > a:hover' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'menu_border_color_hover',
			[
				'label'     => esc_html__( 'Border Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-nav > li > a:hover' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'menu_border_radius_hover',
			[
				'label'      => esc_html__( 'Border Radius', 'calio-addon' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-navbar-nav > li > a:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'menu_typography_hover',
				'label'    => esc_html__( 'Typography', 'calio-addon' ),
				//'scheme'   => Schemes\Typography::TYPOGRAPHY_1,
				'selector' => '{{WRAPPER}} .bdt-navbar-nav > li > a:hover',
			]
		);

		$this->add_control(
			'menu_parent_arrow_color_hover',
			[
				'label'     => esc_html__( 'Parent Indicator Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}}.bdt-navbar-parent-indicator-yes .bdt-navbar-nav > li.bdt-parent a:hover::after' => 'color: {{VALUE}};',
				],
				'condition' => ['menu_parent_arrow' => 'yes'],
			]
		);


		$this->end_controls_tab();

		$this->start_controls_tab( 'menu_link_active', [ 'label' => esc_html__( 'Active', 'calio-addon' ) ] );

		$this->add_control(
			'navbar_active_style_color',
			[
				'label'     => esc_html__( 'Style Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-nav > li.bdt-active > a:before' => 'background-color: {{VALUE}};',
					'{{WRAPPER}} .bdt-navbar-nav > li.bdt-active > a:after'  => 'background-color: {{VALUE}};',
				],
				'condition' => [
					'navbar_style!' => '',
				],
			]
		);

		$this->add_control(
			'menu_hover_color_active',
			[
				'label'     => esc_html__( 'Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-nav > li.bdt-active > a' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'menu_hover_background_color_active',
			[
				'label'     => esc_html__( 'Background Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-nav > li.bdt-active > a' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'menu_border_active',
				'label'    => esc_html__( 'Border', 'calio-addon' ),
				'default'  => '1px',
				'selector' => '{{WRAPPER}} .bdt-navbar-nav > li.bdt-active > a',
			]
		);

		$this->add_control(
			'menu_border_radius_active',
			[
				'label'      => esc_html__( 'Border Radius', 'calio-addon' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-navbar-nav > li.bdt-active > a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'menu_typography_active',
				'label'    => esc_html__( 'Typography', 'calio-addon' ),
				//'scheme'   => Schemes\Typography::TYPOGRAPHY_1,
				'selector' => '{{WRAPPER}} .bdt-navbar-nav > li.bdt-active > a',
			]
		);

		$this->add_control(
			'menu_parent_arrow_color_active',
			[
				'label'     => esc_html__( 'Parent Indicator Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}}.bdt-navbar-parent-indicator-yes .bdt-navbar-nav > li.bdt-parent.bdt-active a:after' => 'color: {{VALUE}};',
				],
				'condition' => ['menu_parent_arrow' => 'yes'],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->add_control(
			'individuL_menu_style',
			[
				'label'     => esc_html__( 'Individual Menu Style', 'calio-addon' ),
				'type'      => Controls_Manager::SWITCHER,
				'separator' => 'before',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_individual_menu_style',
			[
				'label' => esc_html__( 'Individual Menu Item', 'calio-addon' ),
				'tab'   => Controls_Manager::TAB_STYLE,
				'condition' => ['individuL_menu_style' => 'yes'],
			]
		);
		$repeater = new Repeater();
		$repeater->start_controls_tabs( 'tabs_individual_style' );
		$repeater->start_controls_tab(
			'tab_normal',
			[ 
				'label' => __( 'Normal', 'calio-addon' ),
			]
		);
		$repeater->add_control(
			'selective_menu',
			[
				'label'   => esc_html__( 'Selective Menu', 'calio-addon' ),
				'type'    => Controls_Manager::SWITCHER,
			]
		);
		$repeater->add_control(
			'menu_number',
			[ 
				'label'       => esc_html__( 'Menu Number', 'calio-addon' ),
				'type'        => Controls_Manager::NUMBER,
				'default'     => 3,
				'min'         => 1,
				'max'         => 50,
				'condition'   => ['selective_menu' => 'yes'],
			]	
		);
		$repeater->add_control(
			'menu_color',
			[ 
				'label'       => esc_html__( 'Color', 'calio-addon' ),
				'type'        => Controls_Manager::COLOR,
			]
		);
		$repeater->add_control(
			'menu_background',
			[
				'label'     => esc_html__( 'Background Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
			]
		);
		$repeater->add_control(
			'menu_border_color',
			[
				'label'     => esc_html__( 'Border Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
			]
		);
		$repeater->end_controls_tab();
		$repeater->start_controls_tab(
			'tab_hover',
			[ 
				'label' => __( 'Hover', 'calio-addon' ),
			]
		);
		$repeater->add_control(
			'menu_hover_color',
			[ 
				'label'       => esc_html__( 'Color', 'calio-addon' ),
				'type'        => Controls_Manager::COLOR,
			]
		);
		$repeater->add_control(
			'menu_hover_background',
			[
				'label'     => esc_html__( 'Background Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
			]
		);
		$repeater->add_control(
			'menu_hover_border_color',
			[
				'label'     => esc_html__( 'Border Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
			]
		);
		$repeater->end_controls_tab();
		$repeater->end_controls_tabs();
		$this->add_control(
			'repeater_field',
			[ 
				'label'       => esc_html__( 'Menu Items', 'calio-addon' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => [ 
					[ 
						'menu_color'     => '#08AEEC',
					],
				],
			]
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'dropdown_color',
			[
				'label' => esc_html__( 'Dropdown', 'calio-addon' ),
				'type'  => Controls_Manager::SECTION,
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);
		$this->add_control(
			'dropdown_background',
			[
				'label'     => esc_html__( 'Dropdown Background', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-dropdown' => 'background-color: {{VALUE}};',
				],
			]
		);
		$this->start_controls_tabs( 'dropdown_link_styles' );
		$this->start_controls_tab( 'dropdown_link_normal', [ 'label' => esc_html__( 'Normal', 'calio-addon' ) ] );
		$this->add_control(
			'dropdown_link_color',
			[
				'label'     => esc_html__( 'Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-dropdown-nav > li > a' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'dropdown_link_background',
			[
				'label'     => esc_html__( 'Background', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-dropdown-nav > li > a' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'dropdown_link_spacing',
			[
				'label' => esc_html__( 'Gap', 'calio-addon' ),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 25,
					],
				],
				'size_units' => [ 'px'],
				'selectors'  => [
					'{{WRAPPER}} .bdt-navbar-dropdown-nav > li + li' => 'margin-top: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'dropdown_link_padding',
			[
				'label'      => esc_html__( 'Padding', 'calio-addon' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-navbar-dropdown-nav > li > a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'dropdown_link_border',
				'label'    => esc_html__( 'Border', 'calio-addon' ),
				'default'  => '1px',
				'selector' => '{{WRAPPER}} .bdt-navbar-dropdown-nav > li > a',
			]
		);

		$this->add_control(
			'dropdown_link_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'calio-addon' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-navbar-dropdown-nav > li > a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'dropdown_link_typography',
				'label'    => esc_html__( 'Typography', 'calio-addon' ),
				//'scheme'   => Schemes\Typography::TYPOGRAPHY_1,
				'selector' => '{{WRAPPER}} .bdt-navbar-dropdown-nav > li > a',
			]
		);

		$this->add_control(
			'dropdown_parent_arrow_color',
			[
				'label'     => esc_html__( 'Parent Indicator Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}}.bdt-navbar-parent-indicator-yes .bdt-navbar-dropdown-nav > li.bdt-parent a:after' => 'color: {{VALUE}};',
				],
				'condition' => ['menu_parent_arrow' => 'yes'],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab( 'dropdown_link_hover', [ 'label' => esc_html__( 'Hover', 'calio-addon' ) ] );

		$this->add_control(
			'dropdown_link_hover_color',
			[
				'label'     => esc_html__( 'Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-dropdown-nav > li > a:hover' => 'color: {{VALUE}};',
				],
			]
		);


		$this->add_control(
			'dropdown_link_hover_bg_color',
			[
				'label'     => esc_html__( 'Background Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-dropdown-nav > li > a:hover' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'dropdown_border_hover_color',
			[
				'label'     => esc_html__( 'Border Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-dropdown-nav > li > a:hover' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'dropdown_radius_hover',
			[
				'label'      => esc_html__( 'Border Radius', 'calio-addon' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-navbar-dropdown-nav > li > a:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'dropdown_typography_hover',
				'label'    => esc_html__( 'Typography', 'calio-addon' ),
				//'scheme'   => Schemes\Typography::TYPOGRAPHY_1,
				'selector' => '{{WRAPPER}} .bdt-navbar-dropdown-nav > li > a:hover',
			]
		);

		$this->add_control(
			'dropdown_parent_arrow_color_hover',
			[
				'label'     => esc_html__( 'Parent Indicator Color', 'calio-addon' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}}.bdt-navbar-parent-indicator-yes .bdt-navbar-dropdown-nav > li.bdt-parent a:hover::after' => 'color: {{VALUE}};',
				],
				'condition' => ['menu_parent_arrow' => 'yes'],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab( 'dropdown_link_active', [ 'label' => esc_html__( 'Active', 'calio-addon' ) ] );

			$this->add_control(
				'dropdown_active_color',
				[
					'label'     => esc_html__( 'Color', 'calio-addon' ),
					'type'      => Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .bdt-navbar-dropdown-nav > li.bdt-active > a' => 'color: {{VALUE}};',
					],
				]
			);

			$this->add_control(
				'dropdown_active_bg_color',
				[
					'label'     => esc_html__( 'Background', 'calio-addon' ),
					'type'      => Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .bdt-navbar-dropdown-nav > li.bdt-active > a' => 'background-color: {{VALUE}};',
					],
				]
			);

			$this->add_group_control(
				Group_Control_Border::get_type(),
				[
					'name'     => 'dropdown_active_border',
					'label'    => esc_html__( 'Border', 'calio-addon' ),
					'default'  => '1px',
					'selector' => '{{WRAPPER}} .bdt-navbar-dropdown-nav > li.bdt-active > a',
				]
			);

			$this->add_control(
				'dropdown_active_radius',
				[
					'label'      => esc_html__( 'Border Radius', 'calio-addon' ),
					'type'       => Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%' ],
					'selectors'  => [
						'{{WRAPPER}} .bdt-navbar-dropdown-nav > li.bdt-active > a' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);
			$this->add_group_control(
				Group_Control_Typography::get_type(),
				[
					'name'     => 'dropdown_typography_active',
					'label'    => esc_html__( 'Typography', 'calio-addon' ),
					//'scheme'   => Schemes\Typography::TYPOGRAPHY_1,
					'selector' => '{{WRAPPER}} .bdt-navbar-dropdown-nav > li.bdt-active > a',
				]
			);

			$this->add_control(
				'dropdown_parent_arrow_color_active',
				[
					'label'     => esc_html__( 'Parent Indicator Color', 'calio-addon' ),
					'type'      => Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}}.bdt-navbar-parent-indicator-yes .bdt-navbar-dropdown-nav > li.bdt-parent.bdt-active a:after' => 'color: {{VALUE}};',
					],
					'condition' => ['menu_parent_arrow' => 'yes'],
				]
			);


		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		$this->start_controls_section(
			'mobile_toggle_style',
			[
				'label' => esc_html__( 'Mobile Toggle', 'calio-addon' ),
				'tab'   => Controls_Manager::TAB_STYLE,
				'condition' => [
					'mobile_toggle' => 'yes',
				],
			]
		);

		$this->add_responsive_control(
			'mobile_toggle_align',
			[
				'label' => esc_html__( 'Alignment', 'calio-addon' ),
				'type'  => Controls_Manager::CHOOSE,
				'options' => [
					'flex-start' => [
						'title' => esc_html__( 'Start', 'calio-addon' ),
						'icon'  => 'eicon-h-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'calio-addon' ),
						'icon'  => 'eicon-h-align-center',
					],
					'flex-end' => [
						'title' => esc_html__( 'End', 'calio-addon' ),
						'icon'  => 'eicon-h-align-right',
					],
				],
				'default' => 'flex-start',
				'selectors' => [
					'{{WRAPPER}} .calio-navbar-toggle-wrap' => 'justify-content: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'mobile_toggle_text_color',
			[
				'label' => esc_html__( 'Text/Icon Color', 'calio-addon' ),
				'type'  => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .calio-navbar-toggle' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'mobile_toggle_bg_color',
			[
				'label' => esc_html__( 'Button Background', 'calio-addon' ),
				'type'  => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .calio-navbar-toggle' => 'background: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'mobile_toggle_border_color',
			[
				'label' => esc_html__( 'Border Color', 'calio-addon' ),
				'type'  => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .calio-navbar-toggle' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'mobile_toggle_padding',
			[
				'label'      => esc_html__( 'Button Padding', 'calio-addon' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .calio-navbar-toggle' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'mobile_toggle_border_radius',
			[
				'label' => esc_html__( 'Button Radius', 'calio-addon' ),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 40,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .calio-navbar-toggle' => 'border-radius: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'mobile_toggle_typography',
				'label'    => esc_html__( 'Label Typography', 'calio-addon' ),
				'selector' => '{{WRAPPER}} .calio-navbar-toggle-label',
			]
		);

		$this->add_control(
			'mobile_menu_panel_bg',
			[
				'label' => esc_html__( 'Panel Background', 'calio-addon' ),
				'type'  => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-wrapper.calio-navbar-mobile-toggle-enabled .bdt-navbar-nav' => 'background: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'mobile_menu_panel_border',
			[
				'label' => esc_html__( 'Panel Border Color', 'calio-addon' ),
				'type'  => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-wrapper.calio-navbar-mobile-toggle-enabled .bdt-navbar-nav' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'mobile_menu_panel_radius',
			[
				'label' => esc_html__( 'Panel Radius', 'calio-addon' ),
				'type'  => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 40,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .bdt-navbar-wrapper.calio-navbar-mobile-toggle-enabled .bdt-navbar-nav' => 'border-radius: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'mobile_menu_panel_padding',
			[
				'label'      => esc_html__( 'Panel Padding', 'calio-addon' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-navbar-wrapper.calio-navbar-mobile-toggle-enabled .bdt-navbar-nav' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();
	}

	protected function render() {

		$settings = $this->get_settings_for_display();
		$id       = 'bdt-navbar-' . $this->get_id();
		$menu_list_id = $id . '-menu';
		$dropdown_align = ! empty( $settings['dropdown_align'] ) ? sanitize_key( (string) $settings['dropdown_align'] ) : 'left';
		$allowed_alignments = ['left', 'center', 'right'];
		if ( ! in_array( $dropdown_align, $allowed_alignments, true ) ) {
			$dropdown_align = 'left';
		}
		$mobile_toggle_enabled = ! empty( $settings['mobile_toggle'] ) && 'yes' === $settings['mobile_toggle'];
		$mobile_toggle_label = isset( $settings['mobile_toggle_label'] ) ? (string) $settings['mobile_toggle_label'] : '';
		$mobile_toggle_skin = ! empty( $settings['mobile_toggle_skin'] ) ? sanitize_key( (string) $settings['mobile_toggle_skin'] ) : 'glass';
		$mobile_toggle_skins = ['glass', 'solid', 'outline', 'minimal'];
		if ( ! in_array( $mobile_toggle_skin, $mobile_toggle_skins, true ) ) {
			$mobile_toggle_skin = 'glass';
		}
		$mobile_breakpoint = $this->get_slider_size( $settings, 'mobile_breakpoint' );
		if ( false === $mobile_breakpoint ) {
			$mobile_breakpoint = 1024;
		}


		$individual_menu_styles = $this->build_individual_menu_styles( $settings );
		
		if ( empty( $settings['navbar'] ) ) {
			echo '<div class="calio-navbar-empty">' . esc_html__( 'Please select a menu from settings.', 'calio-addon' ) . '</div>';
		}

		$nav_menu = ! empty( $settings['navbar'] ) ? wp_get_nav_menu_object( $settings['navbar'] ) : false;

		if ( ! $nav_menu ) {
			return;
		}

		$nav_menu_args = array(
			'fallback_cb'    => false,
			'container'      => false,
			'menu_class'     => '',
			'items_wrap'     => '<ul id="' . esc_attr( $menu_list_id ) . '" class="bdt-navbar-nav %2$s">%3$s</ul>',
			'theme_location' => 'default_navmenu', // creating a fake location for better functional control
			'menu'           => $nav_menu,
			'echo'           => true,
			'depth'          => 0,
			'walker'        => new CalioNavbarMenuWalker( $individual_menu_styles )
		);

		$navbar_config_json = wp_json_encode(array_filter([
			"align"      => $dropdown_align,
			"delay-show" => $this->get_slider_size( $settings, 'dropdown_delay_show' ),
			"delay-hide" => $this->get_slider_size( $settings, 'dropdown_delay_hide' ),
			"offset"     => $this->get_slider_size( $settings, 'dropdown_offset' ),
			"duration"   => $this->get_slider_size( $settings, 'dropdown_duration' ),
			"mobile-toggle" => $mobile_toggle_enabled,
			"mobile-breakpoint" => $mobile_breakpoint,
		]), JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);

		$this->add_render_attribute(
			[
				'navbar-attr' => [
					'class' => [
						'bdt-navbar-container',
						'bdt-navbar',
						'bdt-navbar-transparent',
						'calio-navbar-dropdown-align-' . $dropdown_align,
					],
					'data-bdt-navbar' => [
						is_string($navbar_config_json) ? $navbar_config_json : '{}'
					]
				]
			]
		);

		if ( ! empty( $settings['auto_hiding_menu'] ) && 'yes' === $settings['auto_hiding_menu'] ) {
			$this->add_render_attribute('navbar-wrap', 'class', 'bdt-auto-hide-menu');
			$this->add_render_attribute('navbar-attr', 'class', 'bdt-cd-secondary-nav');
		}
		$this->add_render_attribute('navbar-wrap', 'class', 'bdt-navbar-wrapper');
		if ( $mobile_toggle_enabled ) {
			$this->add_render_attribute('navbar-wrap', 'class', [
				'calio-navbar-mobile-toggle-enabled',
				'calio-navbar-toggle-skin-' . $mobile_toggle_skin,
			]);
		}
		$this->add_render_attribute('navbar-attr', 'id', $id);

		?>
		<div <?php $this->print_render_attribute_string( 'navbar-wrap' ); ?>>
			<?php if ( $mobile_toggle_enabled ) : ?>
				<div class="calio-navbar-toggle-wrap">
					<button
						class="calio-navbar-toggle"
						type="button"
						aria-expanded="false"
						aria-controls="<?php echo esc_attr( $menu_list_id ); ?>"
					>
						<span class="calio-navbar-toggle-icon" aria-hidden="true">
							<span></span>
							<span></span>
							<span></span>
						</span>
						<?php if ( '' !== $mobile_toggle_label ) : ?>
							<span class="calio-navbar-toggle-label"><?php echo esc_html( $mobile_toggle_label ); ?></span>
						<?php endif; ?>
					</button>
				</div>
			<?php endif; ?>
			<nav <?php $this->print_render_attribute_string( 'navbar-attr' ); ?>>
                <?php
                // WordPress core filter.
                // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound
                wp_nav_menu( apply_filters( 'widget_nav_menu_args', $nav_menu_args, $nav_menu, $settings ) );
                ?>
			</nav>
		</div>
		<?php
	}

	/**
	 * @param array<string, mixed> $settings
	 * @return array<int, string>
	 */
	private function build_individual_menu_styles( array $settings ): array {
		if ( empty( $settings['repeater_field'] ) || ! is_array( $settings['repeater_field'] ) ) {
			return [];
		}

		$styles = [];
		foreach ( $settings['repeater_field'] as $index => $item ) {
			if ( ! is_array( $item ) ) {
				continue;
			}

			$menu_number = isset( $item['menu_number'] ) ? absint( $item['menu_number'] ) : $index + 1;
			if ( $menu_number < 1 ) {
				continue;
			}

			$declarations = [
				'--calio-navbar-item-color' => $this->sanitize_css_color_value( $item['menu_color'] ?? '#08AEEC' ),
				'--calio-navbar-item-bg' => $this->sanitize_css_color_value( $item['menu_background'] ?? '' ),
				'--calio-navbar-item-border' => $this->sanitize_css_color_value( $item['menu_border_color'] ?? '' ),
				'--calio-navbar-item-hover-color' => $this->sanitize_css_color_value( $item['menu_hover_color'] ?? '' ),
				'--calio-navbar-item-hover-bg' => $this->sanitize_css_color_value( $item['menu_hover_background'] ?? '' ),
				'--calio-navbar-item-hover-border' => $this->sanitize_css_color_value( $item['menu_hover_border_color'] ?? '' ),
			];

			$css = '';
			foreach ( $declarations as $property => $value ) {
				if ( $value === '' ) {
					continue;
				}
				$css .= $property . ':' . $value . ';';
			}

			if ( $css !== '' ) {
				$styles[ $menu_number ] = $css;
			}
		}

		return $styles;
	}

	private function sanitize_css_color_value( $value ): string {
		$value = trim( (string) $value );
		if ( $value === '' ) {
			return '';
		}

		$hex = sanitize_hex_color( $value );
		if ( $hex ) {
			return $hex;
		}

		if ( in_array( strtolower( $value ), [ 'transparent', 'currentcolor', 'inherit', 'initial' ], true ) ) {
			return $value;
		}

		if ( preg_match( '/^var\(--[a-z0-9_-]+\)$/i', $value ) ) {
			return $value;
		}

		if ( preg_match( '/^rgba?\(\s*(\d{1,3}%?\s*,\s*){2}\d{1,3}%?(\s*,\s*(0|1|0?\.\d+))?\s*\)$/i', $value ) ) {
			return $value;
		}

		if ( preg_match( '/^hsla?\(\s*\d{1,3}(deg|rad|turn)?\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%(\s*,\s*(0|1|0?\.\d+))?\s*\)$/i', $value ) ) {
			return $value;
		}

		return '';
	}

	/**
	 * @return array<int|string, string>
	 */
	private function get_available_menus(): array {
		$options = [0 => esc_html__( 'Select a menu', 'calio-addon' )];
		$menus = wp_get_nav_menus();

		if ( empty( $menus ) ) {
			return $options;
		}

		foreach ( $menus as $menu ) {
			if ( ! isset( $menu->term_id, $menu->name ) ) {
				continue;
			}
			$options[ (int) $menu->term_id ] = (string) $menu->name;
		}

		return $options;
	}

	/**
	 * @param array<string, mixed> $settings
	 */
	private function get_slider_size( array $settings, string $key ) {
		if ( empty( $settings[ $key ] ) || ! is_array( $settings[ $key ] ) ) {
			return false;
		}

		if ( isset( $settings[ $key ]['size'] ) && is_numeric( $settings[ $key ]['size'] ) ) {
			return (float) $settings[ $key ]['size'];
		}

		return false;
	}
}
