<?php
/**
 * Color schema toggle element.
 *
 * @package BricksExtras
 */

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

/**
 * Color Scheme Toggle element class.
 */
class X_Color_Scheme_Toggle extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';

	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xcolorschemetoggle';

	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-palette';

	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';

	/**
	 * Required scripts.
	 *
	 * @var array
	 */
	public $scripts = array( 'xColorSchemeToggle' );

	/**
	 * Get element label.
	 */
	public function get_label() {
		return esc_html__( 'Color Scheme Toggle', 'bricksextras' );
	}

	/**
	 * Get element keywords.
	 */
	public function get_keywords() {
		return array( 'scheme', 'toggle', 'dark mode', 'switch', 'theme' );
	}

	/**
	 * Set control groups.
	 */
	public function set_control_groups() {

		$this->control_groups['icons'] = array(
			'title' => esc_html__( 'Icons', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['labels'] = array(
			'title' => esc_html__( 'Labels', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['buttonStyle'] = array(
			'title'    => esc_html__( 'Button', 'bricks' ) . ' (' . esc_html__( 'Styles', 'bricks' ) . ')',
			'tab'      => 'content',
			'required' => array( 'type', '=', array( 'single-button', 'buttons', '' ) ),
		);

		$this->control_groups['toggleStyle'] = array(
			'title'    => esc_html__( 'Toggle', 'bricks' ) . ' (' . esc_html__( 'Styles', 'bricks' ) . ')',
			'tab'      => 'content',
			'required' => array( 'type', '=', array( 'dropdown' ) ),
		);

		$this->control_groups['dropdownStyle'] = array(
			'title'    => esc_html__( 'Dropdown', 'bricks' ) . ' (' . esc_html__( 'Styles', 'bricks' ) . ')',
			'tab'      => 'content',
			'required' => array( 'type', '=', array( 'dropdown' ) ),
		);

		$this->control_groups['switchStyle'] = array(
			'title'    => esc_html__( 'Switch', 'bricksextras' ) . ' (' . esc_html__( 'Styles', 'bricks' ) . ')',
			'tab'      => 'content',
			'required' => array( 'type', '=', array( 'switch' ) ),
		);

		$this->control_groups['tooltips'] = array(
			'title'    => esc_html__( 'Tooltip', 'bricks' ),
			'tab'      => 'content',
			'required' => array( 'type', '=', array( '', 'dropdown', 'buttons', 'single-button' ) ),
		);

		$this->control_groups['viewTransition'] = array(
			'title' => esc_html__( 'View transition', 'bricks' ),
			'tab'   => 'content',
		);
	}

	/**
	 * Set element controls.
	 */
	public function set_controls() {

		$this->controls['type'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Type', 'bricksextras' ),
			'type'        => 'select',
			'inline'      => true,
			'placeholder' => esc_html__( 'Single button', 'bricksextras' ),
			'options'     => array(
				'dropdown'      => esc_html__( 'Dropdown', 'bricksextras' ),
				'buttons'       => esc_html__( 'Radio buttons', 'bricksextras' ),
				'single-button' => esc_html__( 'Single button', 'bricksextras' ),
				'switch'        => esc_html__( 'Toggle switch', 'bricksextras' ),
			),
		);

		$this->controls['dropdownDisplay'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Dropdown', 'bricks' ),
			'type'        => 'select',
			'inline'      => true,
			'options'     => array(
				'both'      => esc_html__( 'Icon + Text', 'bricksextras' ),
				'text-only' => esc_html__( 'Text only', 'bricksextras' ),
				'icon-only' => esc_html__( 'Icon only', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Icon + Text', 'bricksextras' ),
			'required'    => array( 'type', '=', 'dropdown' ),
		);

		$this->controls['systemLabel'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Label', 'bricks' ) . ' (' . esc_html__( 'System', 'bricksextras' ) . ')',
			'group'       => 'labels',
			'type'        => 'text',
			'inline'      => true,
			'placeholder' => esc_html__( 'System', 'bricksextras' ),
			'required'    => array(
				array( 'type', '=', array( 'dropdown', 'buttons' ) ),
				array( 'includeSystem', '=', array( 'true', '' ) ),
			),
		);

		$this->controls['lightLabel'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Label', 'bricks' ) . ' (' . esc_html__( 'Light', 'bricks' ) . ')',
			'group'       => 'labels',
			'type'        => 'text',
			'inline'      => true,
			'placeholder' => esc_html__( 'Light', 'bricksextras' ),
			'required'    => array( 'type', '=', array( 'dropdown', 'single-button', 'buttons', 'switch', '' ) ),
		);

		$this->controls['darkLabel'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Label', 'bricks' ) . ' (' . esc_html__( 'Dark', 'bricks' ) . ')',
			'group'       => 'labels',
			'type'        => 'text',
			'inline'      => true,
			'placeholder' => esc_html__( 'Dark', 'bricksextras' ),
			'required'    => array( 'type', '=', array( 'dropdown', 'single-button', 'buttons', 'switch', '' ) ),
		);

		$this->controls['toggleAriaLabel'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Toggle aria-label', 'bricksextras' ),
			'group'       => 'labels',
			'type'        => 'text',
			'inline'      => true,
			'placeholder' => esc_html__( 'Color scheme', 'bricksextras' ),
			'required'    => array( 'type', '=', 'buttons' ),
		);

		$this->controls['switchAriaLabel'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Dynamic aria-label', 'bricksextras' ),
			'group'       => 'labels',
			'type'        => 'text',
			'placeholder' => sprintf(
				// translators: %s is the placeholder for the color scheme mode.
				esc_html__( 'Color scheme: %s. Click to toggle.', 'bricksextras' ),
				'{x_color_scheme}'
			),
			'description' => esc_html__( 'Use {x_color_scheme} as placeholder for the current mode label', 'bricksextras' ),
			'required'    => array( 'type', '=', array( 'switch', 'single-button', 'dropdown', '' ) ),
		);

		$this->controls['includeSystem'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Include system option', 'bricksextras' ),
			'type'        => 'select',
			'inline'      => true,
			'options'     => array(
				'true'  => esc_html__( 'True', 'bricks' ),
				'false' => esc_html__( 'False', 'bricks' ),
			),
			'placeholder' => esc_html__( 'True', 'bricks' ),
			'required'    => array( 'type', '=', array( 'dropdown', 'buttons' ) ),
		);

		$this->controls['enableTooltips'] = array(
			'tab'   => 'content',
			'group' => 'tooltips',
			'label' => esc_html__( 'Enable tooltips', 'bricksextras' ),
			'type'  => 'checkbox',
		);

		$this->controls['tooltipText'] = array(
			'tab'         => 'content',
			'group'       => 'tooltips',
			'label'       => esc_html__( 'Tooltip text', 'bricksextras' ),
			'type'        => 'text',
			'inline'      => true,
			'placeholder' => esc_html__( 'Color scheme', 'bricksextras' ),
			'required'    => array(
				array( 'enableTooltips', '=', true ),
				array( 'type', '=', array( 'dropdown', 'single-button', '' ) ),
			),
		);

		$this->controls['tooltipPosition'] = array(
			'tab'         => 'content',
			'group'       => 'tooltips',
			'label'       => esc_html__( 'Tooltip position', 'bricksextras' ),
			'type'        => 'select',
			'inline'      => true,
			'options'     => array(
				'top'    => esc_html__( 'Top', 'bricks' ),
				'bottom' => esc_html__( 'Bottom', 'bricks' ),
				'left'   => esc_html__( 'Left', 'bricks' ),
				'right'  => esc_html__( 'Right', 'bricks' ),
			),
			'placeholder' => esc_html__( 'Top', 'bricks' ),
			'required'    => array( 'enableTooltips', '=', true ),
		);

		$this->controls['iconStyle'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Icon type', 'bricksextras' ),
			'type'        => 'select',
			'group'       => 'icons',
			'inline'      => true,
			'options'     => array(
				'icons'           => esc_html__( 'Custom icons', 'bricksextras' ),
				'animated-preset' => esc_html__( 'Morphing icons', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Morphing icons', 'bricksextras' ),
			'required'    => array( 'type', '=', array( 'single-button', 'switch', '' ) ),
		);

		$this->controls['animatedPreset'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Morphing icon presets', 'bricksextras' ),
			'type'        => 'select',
			'group'       => 'icons',
			'inline'      => true,
			'options'     => array(
				'css-rays'  => esc_html__( 'Preset 1 (CSS)', 'bricksextras' ),
				'css-morph' => esc_html__( 'Preset 2 (CSS)', 'bricksextras' ),
				'lines'     => esc_html__( 'Preset 3 (SVG)', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Preset 1 (CSS)', 'bricksextras' ),
			'required'    => array(
				array( 'type', '=', array( 'single-button', 'switch', '' ) ),
				array( 'iconStyle', '!=', 'icons' ),
			),
		);

		$this->controls['moonCrescentOffset'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Moon eclipse size', 'bricksextras' ),
			'group'       => 'icons',
			'type'        => 'number',
			'min'         => 1,
			'max'         => 10,
			'css'         => array(
				array(
					'property' => '--x-color-scheme-moon-eclipse-scale',
					'selector' => '.x-sun-moon-css-morph',
				),
			),
			'placeholder' => '5',
			'required'    => array(
				array( 'type', '=', array( 'single-button', 'switch', '' ) ),
				array( 'iconStyle', '!=', 'icons' ),
				array( 'animatedPreset', '=', 'css-morph' ),
			),
		);

		$this->controls['moonRotation'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Moon rotation', 'bricksextras' ),
			'group'       => 'icons',
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'property' => '--x-color-scheme-moon-rotation',
					'selector' => '.x-sun-moon-css-morph',
				),
			),
			'placeholder' => '-40deg',
			'required'    => array(
				array( 'type', '=', array( 'single-button', 'switch', '' ) ),
				array( 'iconStyle', '!=', 'icons' ),
				array( 'animatedPreset', '=', 'css-morph' ),
			),
		);

		$this->controls['sunRayScale'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Sun ray size', 'bricksextras' ),
			'group'       => 'icons',
			'type'        => 'number',
			'min'         => 1,
			'max'         => 20,
			'css'         => array(
				array(
					'property' => '--x-color-scheme-sun-ray-scale',
					'selector' => '.x-sun-moon-css-morph:after',
				),
			),
			'placeholder' => '8',
			'required'    => array(
				array( 'type', '=', array( 'single-button', 'switch', '' ) ),
				array( 'iconStyle', '!=', 'icons' ),
				array( 'animatedPreset', '=', 'css-morph' ),
			),
		);

		$this->controls['sunRayDistanceScale'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Sun ray distance', 'bricksextras' ),
			'group'       => 'icons',
			'type'        => 'number',
			'min'         => 1,
			'max'         => 20,
			'css'         => array(
				array(
					'property' => '--x-color-scheme-sun-ray-distance-scale',
					'selector' => '.x-sun-moon-css-morph:after',
				),
			),
			'placeholder' => '4',
			'required'    => array(
				array( 'type', '=', array( 'single-button', 'switch', '' ) ),
				array( 'iconStyle', '!=', 'icons' ),
				array( 'animatedPreset', '=', 'css-morph' ),
			),
		);

		$this->controls['raysCrescentScale'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Moon eclipse size', 'bricksextras' ),
			'group'       => 'icons',
			'type'        => 'number',
			'min'         => 0,
			'max'         => 10,
			'css'         => array(
				array(
					'property' => '--x-color-scheme-rays-eclipse-scale',
					'selector' => '.x-sun-moon-css-rays__part:nth-child(1)',
				),
			),
			'placeholder' => '6',
			'required'    => array(
				array( 'type', '=', array( 'single-button', 'switch', '' ) ),
				array( 'iconStyle', '!=', 'icons' ),
				array( 'animatedPreset', '=', array( 'css-rays', '' ) ),
			),
		);

		$this->controls['raysRotation'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Moon rotation', 'bricksextras' ),
			'group'       => 'icons',
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'property' => '--x-color-scheme-rays-rotation',
					'selector' => '.x-sun-moon-css-rays__part:nth-child(1)',
				),
			),
			'placeholder' => '0deg',
			'required'    => array(
				array( 'type', '=', array( 'single-button', 'switch', '' ) ),
				array( 'iconStyle', '!=', 'icons' ),
				array( 'animatedPreset', '=', array( 'css-rays', '' ) ),
			),
		);

		$this->controls['raysDistanceScale'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Sun ray distance', 'bricksextras' ),
			'group'       => 'icons',
			'type'        => 'number',
			'min'         => 1,
			'max'         => 20,
			'css'         => array(
				array(
					'property' => '--x-color-scheme-rays-distance-scale',
					'selector' => '.x-sun-moon-css-rays__part:nth-child(n+2)',
				),
			),
			'placeholder' => '7',
			'required'    => array(
				array( 'type', '=', array( 'single-button', 'switch', '' ) ),
				array( 'iconStyle', '!=', 'icons' ),
				array( 'animatedPreset', '=', array( 'css-rays', '' ) ),
			),
		);

		$this->controls['customIconSize'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Icon size', 'bricks' ),
			'group'       => 'icons',
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'font-size',
					'selector' => '.x-color-scheme-toggle__switch-icon, .x-color-scheme-toggle__trigger, .x-color-scheme-toggle__switch-thumb, .x-color-scheme-toggle__single-button, .x-color-scheme-toggle__button',
				),
			),
			'placeholder' => '18px',
		);

		$this->controls['customIconColor'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Icon color', 'bricks' ),
			'group' => 'icons',
			'type'  => 'color',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'color',
					'selector' => '.x-color-scheme-toggle__switch-icon, .x-color-scheme-toggle__trigger, .x-color-scheme-toggle__switch-thumb, .x-color-scheme-toggle__single-button, .x-color-scheme-toggle__button',
				),
			),
		);

		$this->controls['switchThumbAnimation'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Icon animation', 'bricksextras' ),
			'type'        => 'select',
			'inline'      => true,
			'group'       => 'icons',
			'options'     => array(
				'none'   => esc_html__( 'None', 'bricks' ),
				'fade'   => esc_html__( 'Fade', 'bricksextras' ),
				'rotate' => esc_html__( 'Rotate', 'bricksextras' ),
				'flip'   => esc_html__( 'Flip', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'None', 'bricks' ),
			'required'    => array(
				array( 'type', '=', 'switch' ),
				array( 'switchIconPlacement', '=', array( 'thumb', '' ) ),
				array( 'iconStyle', '=', 'icons' ),
			),
		);

		$this->controls['customIconSep'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Custom icons', 'bricksextras' ),
			'type'     => 'separator',
			'group'    => 'icons',
			'required' => array(
				array( 'type', '=', array( 'dropdown', 'buttons', 'switch', 'single-button', '' ) ),
			),
		);

		$this->controls['systemIcon'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'System icon', 'bricksextras' ),
			'type'     => 'icon',
			'group'    => 'icons',
			'required' => array(
				array( 'type', '=', array( 'dropdown', 'buttons' ) ),
				array( 'includeSystem', '=', array( 'true', '' ) ),
			),
		);

		$this->controls['lightIcon'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Light icon', 'bricksextras' ),
			'type'     => 'icon',
			'group'    => 'icons',
			'required' => array(
				array( 'type', '=', array( 'dropdown', 'buttons', 'switch', 'single-button', '' ) ),
			),
		);

		$this->controls['darkIcon'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Dark icon', 'bricksextras' ),
			'group'    => 'icons',
			'type'     => 'icon',
			'required' => array(
				array( 'type', '=', array( 'dropdown', 'buttons', 'switch', 'single-button', '' ) ),
			),
		);

		// Animation control for dropdown and single button.
		$this->controls['singleButtonAnimation'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Icon animation', 'bricksextras' ),
			'type'        => 'select',
			'group'       => 'icons',
			'inline'      => true,
			'options'     => array(
				'none'        => esc_html__( 'None', 'bricks' ),
				'fade'        => esc_html__( 'Fade', 'bricksextras' ),
				'rotate'      => esc_html__( 'Rotate 360', 'bricksextras' ),
				'flip-x'      => esc_html__( 'Flip horizontal', 'bricksextras' ),
				'flip-y'      => esc_html__( 'Flip vertical', 'bricksextras' ),
				'slide-down'  => esc_html__( 'Slide down', 'bricksextras' ),
				'slide-up'    => esc_html__( 'Slide up', 'bricksextras' ),
				'slide-left'  => esc_html__( 'Slide left', 'bricksextras' ),
				'slide-right' => esc_html__( 'Slide right', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'None', 'bricks' ),
			'required'    => array(
				array( 'type', '=', array( 'dropdown', 'single-button', '' ) ),
			),
		);

		$this->controls['singleButtonTransitionDuration'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Transition', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'group'       => 'icons',
			'css'         => array(
				array(
					'property' => '--x-color-scheme-toggle-transition-duration',
					'selector' => '',
				),
			),
			'placeholder' => '0.35s',
			'required'    => array(
				array( 'type', '=', array( 'dropdown', 'single-button', 'switch', '' ) ),
			),
		);

		$this->controls['viewTransitionSep'] = array(
			'type'        => 'separator',
			'label'       => esc_html__( 'View transition', 'bricksextras' ),
			'description' => esc_html__( 'Control how all elements on the page switch between color modes (effect not seen inside builder)', 'bricksextras' ),
			'group'       => 'viewTransition',
		);

		$this->controls['viewTransitionEffect'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Effect', 'bricks' ),
			'type'        => 'select',
			'inline'      => true,
			'options'     => array(
				'none'             => esc_html__( 'None', 'bricks' ),
				'fade'             => esc_html__( 'Fade', 'bricks' ),
				'swipe_down'       => esc_html__( 'Swipe down', 'bricksextras' ),
				'swipe_up'         => esc_html__( 'Swipe up', 'bricksextras' ),
				'swipe_left'       => esc_html__( 'Swipe left', 'bricksextras' ),
				'swipe_right'      => esc_html__( 'Swipe right', 'bricksextras' ),
				'vertical_split'   => esc_html__( 'Vertical split', 'bricksextras' ),
				'horizontal_split' => esc_html__( 'Horizontal split', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'None', 'bricks' ),
			'group'       => 'viewTransition',
		);

		$this->controls['viewTransitionDuration'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Duration', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'property' => '--x-view-transition-duration',
					'selector' => '',
				),
			),
			'placeholder' => '0.15s',
			'group'       => 'viewTransition',
		);

		$this->controls['viewTransitionTiming'] = array(
			'tab'            => 'content',
			'label'          => esc_html__( 'Timing function', 'bricks' ),
			'type'           => 'text',
			'inline'         => true,
			'css'            => array(
				array(
					'property' => '--x-view-transition-timing',
					'selector' => '',
				),
			),
			'placeholder'    => 'linear',
			'group'          => 'viewTransition',
			'hasDynamicData' => false,
		);

		/* dropdown styles */

		$this->controls['dropdownTriggerSep'] = array(
			'tab'   => 'content',
			'type'  => 'separator',
			'label' => esc_html__( 'Toggle button', 'bricks' ),
			'group' => 'toggleStyle',
		);

		$this->controls['dropdownTriggerSize'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Button size', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'property' => '--x-color-scheme-trigger-width',
					'selector' => '.x-color-scheme-toggle__trigger',
				),
				array(
					'property' => '--x-color-scheme-trigger-height',
					'selector' => '.x-color-scheme-toggle__trigger',
				),
			),
			'placeholder' => '30px',
			'required'    => array( 'type', '=', 'dropdown' ),
			'group'       => 'toggleStyle',
		);

		$this->controls['dropdownTriggerColor'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Color', 'bricks' ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'color',
					'selector' => '.x-color-scheme-toggle__trigger',
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'toggleStyle',
		);

		$this->controls['dropdownTriggerBackground'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Background', 'bricks' ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-color-scheme-toggle__trigger',
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'toggleStyle',
		);

		$this->controls['dropdownTriggerBorder'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Border', 'bricks' ),
			'type'     => 'border',
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => '.x-color-scheme-toggle__trigger',
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'toggleStyle',
		);

		$this->controls['dropdownTriggerBoxShadow'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Box shadow', 'bricks' ),
			'type'     => 'box-shadow',
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => '.x-color-scheme-toggle__trigger',
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'toggleStyle',
		);

		$this->controls['dropdownTriggerPadding'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Padding', 'bricks' ),
			'type'     => 'spacing',
			'css'      => array(
				array(
					'property' => 'padding',
					'selector' => '.x-color-scheme-toggle__trigger',
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'toggleStyle',
		);

		$this->controls['dropdownVerticalPosition'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Vertical position', 'bricksextras' ),
			'type'        => 'select',
			'group'       => 'dropdownStyle',
			'inline'      => true,
			'options'     => array(
				'below' => esc_html__( 'Below', 'bricksextras' ),
				'above' => esc_html__( 'Above', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Below', 'bricksextras' ),
			'required'    => array( 'type', '=', 'dropdown' ),
		);

		$this->controls['dropdownHorizontalPosition'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Horizontal position', 'bricksextras' ),
			'type'        => 'select',
			'group'       => 'dropdownStyle',
			'inline'      => true,
			'options'     => array(
				'right'  => esc_html__( 'Right', 'bricksextras' ),
				'left'   => esc_html__( 'Left', 'bricksextras' ),
				'center' => esc_html__( 'Center', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Left', 'bricksextras' ),
			'required'    => array( 'type', '=', 'dropdown' ),
		);

		$this->controls['dropdownAnimationTranslateY'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Animation translate Y', 'bricksextras' ),
			'group'       => 'dropdownStyle',
			'type'        => 'number',
			'units'       => true,
			'inline'      => true,
			'css'         => array(
				array(
					'property' => '--x-color-scheme-dropdown-translate-y',
					'selector' => '',
				),
			),
			'placeholder' => esc_html__( '-4px', 'bricksextras' ),
			'required'    => array( 'type', '=', 'dropdown' ),
		);

		$this->controls['dropdownAnimationScale'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Animation scale', 'bricksextras' ),
			'group'       => 'dropdownStyle',
			'type'        => 'number',
			'units'       => false,
			'inline'      => true,
			'css'         => array(
				array(
					'property' => '--x-color-scheme-dropdown-scale',
					'selector' => '',
				),
			),
			'placeholder' => esc_html__( '1', 'bricksextras' ),
			'required'    => array( 'type', '=', 'dropdown' ),
		);

		$this->controls['dropdownContainerSeparator'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Dropdown container', 'bricksextras' ),
			'type'     => 'separator',
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		$this->controls['dropdownBackground'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Background', 'bricks' ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-color-scheme-toggle__dropdown',
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		$this->controls['dropdownBorder'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Border', 'bricks' ),
			'type'     => 'border',
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => '.x-color-scheme-toggle__dropdown',
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		$this->controls['dropdownBoxShadow'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Box shadow', 'bricks' ),
			'type'     => 'box-shadow',
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => '.x-color-scheme-toggle__dropdown',
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		$this->controls['dropdownPadding'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Padding', 'bricks' ),
			'type'     => 'spacing',
			'css'      => array(
				array(
					'property' => 'padding',
					'selector' => '.x-color-scheme-toggle__dropdown',
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		$this->controls['dropdownWidth'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Width', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'min-width',
					'selector' => '.x-color-scheme-toggle__dropdown',
				),
			),
			'placeholder' => '150px',
			'required'    => array( 'type', '=', 'dropdown' ),
			'group'       => 'dropdownStyle',
		);

		$this->controls['dropdownOptionsSeparator'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Dropdown options', 'bricksextras' ),
			'type'     => 'separator',
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		$this->controls['dropdownOptionTypography'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Typography', 'bricks' ),
			'type'     => 'typography',
			'css'      => array(
				array(
					'property' => 'font',
					'selector' => '.x-color-scheme-toggle__option',
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		$this->controls['dropdownOptionColor'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Color', 'bricks' ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'color',
					'selector' => '.x-color-scheme-toggle__option',
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		$this->controls['dropdownOptionBackground'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Background', 'bricks' ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-color-scheme-toggle__option',
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		$this->controls['dropdownOptionSelectedColor'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'color',
					'selector' => '.x-color-scheme-toggle__option[aria-selected="true"]',
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		$this->controls['dropdownOptionSelectedBackground'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Background', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-color-scheme-toggle__option[aria-selected="true"]',
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		$this->controls['dropdownOptionPadding'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Padding', 'bricks' ),
			'type'     => 'spacing',
			'css'      => array(
				array(
					'property' => 'padding',
					'selector' => '.x-color-scheme-toggle__option',
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		$this->controls['dropdownOptionGap'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Gap', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'gap',
					'selector' => '.x-color-scheme-toggle__option',
				),
			),
			'placeholder' => '8px',
			'required'    => array( 'type', '=', 'dropdown' ),
			'group'       => 'dropdownStyle',
		);

		$this->controls['dropdownOptionIconSeparator'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Option icons', 'bricksextras' ),
			'type'     => 'separator',
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		$option_icons = '.x-color-scheme-toggle__option > *:not(span)';

		$this->controls['dropdownOptionIconSize'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Icon size', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'property' => 'font-size',
					'selector' => $option_icons,
				),
			),
			'placeholder' => '18px',
			'required'    => array( 'type', '=', 'dropdown' ),
			'group'       => 'dropdownStyle',
		);

		$this->controls['dropdownOptionIconColor'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Icon color', 'bricksextras' ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'color',
					'selector' => $option_icons,
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		$this->controls['dropdownOptionIconBackground'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Icon background', 'bricksextras' ),
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => $option_icons,
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		$this->controls['dropdownOptionIconBorder'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Icon border', 'bricksextras' ),
			'type'     => 'border',
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => $option_icons,
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		$this->controls['dropdownOptionIconBoxShadow'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Icon box shadow', 'bricksextras' ),
			'type'     => 'box-shadow',
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => $option_icons,
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		$this->controls['dropdownOptionIconPadding'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Icon padding', 'bricksextras' ),
			'type'     => 'spacing',
			'css'      => array(
				array(
					'property' => 'padding',
					'selector' => $option_icons,
				),
			),
			'required' => array( 'type', '=', 'dropdown' ),
			'group'    => 'dropdownStyle',
		);

		// Switch style controls.

		$this->controls['switchTrackSep'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Track', 'bricks' ),
			'group' => 'switchStyle',
			'type'  => 'separator',
		);

		$this->controls['switchTrackBackground'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Background', 'bricks' ),
			'group'    => 'switchStyle',
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => '--x-color-scheme-switch-track-bg',
					'selector' => '',
				),
			),
			'required' => array( 'type', '=', 'switch' ),
		);

		$this->controls['switchHeight'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Height', 'bricks' ),
			'group'    => 'switchStyle',
			'type'     => 'number',
			'units'    => true,
			'css'      => array(
				array(
					'property' => 'height',
					'selector' => '.x-color-scheme-toggle__switch-track',
				),
			),
			'required' => array( 'type', '=', 'switch' ),
		);

		$this->controls['switchWidth'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Width', 'bricks' ),
			'group'       => 'switchStyle',
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'property' => '--x-color-scheme-switch-width',
					'selector' => '',
				),
			),
			'placeholder' => '60px',
			'required'    => array( 'type', '=', 'switch' ),
		);

		$this->controls['switchPadding'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Padding', 'bricks' ),
			'group'       => 'switchStyle',
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'property' => '--x-color-scheme-switch-padding',
					'selector' => '',
				),
			),
			'placeholder' => '0.25em',
			'required'    => array( 'type', '=', 'switch' ),
		);

		$this->controls['switchThumbSep'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Thumb', 'bricks' ),
			'group' => 'switchStyle',
			'type'  => 'separator',
		);

		$this->controls['switchThumbSize'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Size', 'bricks' ),
			'group'       => 'switchStyle',
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'property' => '--x-color-scheme-switch-thumb-size',
					'selector' => '',
				),
			),
			'placeholder' => '30px',
			'required'    => array( 'type', '=', 'switch' ),
		);

		$this->controls['switchThumbBackground'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Background', 'bricks' ),
			'group'    => 'switchStyle',
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => '--x-color-scheme-switch-thumb-bg',
					'selector' => '',
				),
			),
			'required' => array( 'type', '=', 'switch' ),
		);

		// buttons.

		$this->controls['buttonsRadioGroupSep'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Radio group', 'bricksextras' ),
			'group'    => 'buttonStyle',
			'type'     => 'separator',
			'required' => array( 'type', '=', array( 'buttons' ) ),
		);

		$this->controls['buttonsGroupBackground'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Background', 'bricks' ),
			'group'    => 'buttonStyle',
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => '--x-color-scheme-toggle-bg',
					'selector' => '',
				),
			),
			'required' => array( 'type', '=', array( 'buttons' ) ),
		);

		$this->controls['buttonsGroupBorder'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Border', 'bricks' ),
			'group'    => 'buttonStyle',
			'type'     => 'border',
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => '.x-color-scheme-toggle__group',
				),
			),
			'required' => array( 'type', '=', array( 'buttons' ) ),
		);

		$this->controls['buttonsGroupShadow'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Box shadow', 'bricks' ),
			'group'    => 'buttonStyle',
			'type'     => 'box-shadow',
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => '.x-color-scheme-toggle__group',
				),
			),
			'required' => array( 'type', '=', array( 'buttons' ) ),
		);

		$this->controls['buttonsGroupPadding'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Padding', 'bricks' ),
			'group'    => 'buttonStyle',
			'type'     => 'spacing',
			'css'      => array(
				array(
					'property' => 'padding',
					'selector' => '.x-color-scheme-toggle__group',
				),
			),
			'required' => array( 'type', '=', array( 'buttons' ) ),
		);

		$this->controls['buttonsGroupButtonsSep'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Buttons', 'bricks' ),
			'group' => 'buttonStyle',
			'type'  => 'separator',
		);

		$this->controls['singleButtonSize'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Button size', 'bricks' ),
			'type'        => 'number',
			'units'       => true,
			'css'         => array(
				array(
					'property' => '--x-color-scheme-trigger-width',
					'selector' => '.x-color-scheme-toggle__single-button',
				),
				array(
					'property' => '--x-color-scheme-trigger-height',
					'selector' => '.x-color-scheme-toggle__single-button',
				),
				array(
					'property' => '--x-color-schema-radio-size',
					'selector' => '.x-color-scheme-toggle__button',
				),
				array(
					'property' => '--x-color-schema-radio-size',
					'selector' => '.x-color-scheme-toggle__button',
				),
			),
			'placeholder' => '30px',
			'group'       => 'buttonStyle',
		);

		$this->controls['singleButtonBackground'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Background color', 'bricks' ),
			'group'    => 'buttonStyle',
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => 'background-color',
					'selector' => '.x-color-scheme-toggle__single-button',
				),
				array(
					'property' => 'background-color',
					'selector' => '.x-color-scheme-toggle__button',
				),

			),
			'required' => array( 'type', '=', array( 'single-button', 'buttons', '' ) ),
		);

		$this->controls['buttonsActiveBackground'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Background', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'group'    => 'buttonStyle',
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => '--x-color-scheme-toggle-active-bg',
					'selector' => '',
				),
			),
			'required' => array( 'type', '=', array( 'buttons' ) ),
		);

		$this->controls['buttonsActiveColor'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Color', 'bricks' ) . ' (' . esc_html__( 'Active', 'bricks' ) . ')',
			'group'    => 'buttonStyle',
			'type'     => 'color',
			'css'      => array(
				array(
					'property' => '--x-color-scheme-toggle-active-color',
					'selector' => '',
				),
			),
			'required' => array( 'type', '=', array( 'buttons' ) ),
		);

		$this->controls['buttonsBorder'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Border', 'bricks' ),
			'group' => 'buttonStyle',
			'type'  => 'border',
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => 'button',
				),
			),
		);

		$this->controls['buttonsPadding'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Padding', 'bricks' ),
			'group' => 'buttonStyle',
			'type'  => 'spacing',
			'css'   => array(
				array(
					'property' => 'padding',
					'selector' => 'button',
				),
			),
		);

		$this->controls['buttonsInactiveOpacity'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Opacity', 'bricks' ) . ' (' . esc_html__( 'Inactive', 'bricks' ) . ')',
			'group'    => 'buttonStyle',
			'type'     => 'number',
			'min'      => 0,
			'max'      => 1,
			'step'     => 0.1,
			'css'      => array(
				array(
					'property' => '--x-color-scheme-toggle-inactive-opacity',
					'selector' => '',
				),
			),
			'required' => array( 'type', '=', array( 'buttons' ) ),
		);
	}

	/**
	 * Get default icon SVG.
	 *
	 * @param string $type Icon type: 'light', 'dark', or 'system'.
	 * @return string SVG markup.
	 */
	private function get_default_icon( $type ) {
		$icons = array(
			'light'  => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M256 118a22 22 0 01-22-22V48a22 22 0 0144 0v48a22 22 0 01-22 22zM256 486a22 22 0 01-22-22v-48a22 22 0 0144 0v48a22 22 0 01-22 22zM369.14 164.86a22 22 0 01-15.56-37.55l33.94-33.94a22 22 0 0131.11 31.11l-33.94 33.94a21.93 21.93 0 01-15.55 6.44zM108.92 425.08a22 22 0 01-15.55-37.56l33.94-33.94a22 22 0 1131.11 31.11l-33.94 33.94a21.94 21.94 0 01-15.56 6.45zM464 278h-48a22 22 0 010-44h48a22 22 0 010 44zM96 278H48a22 22 0 010-44h48a22 22 0 010 44zM403.08 425.08a21.94 21.94 0 01-15.56-6.45l-33.94-33.94a22 22 0 0131.11-31.11l33.94 33.94a22 22 0 01-15.55 37.56zM142.86 164.86a21.89 21.89 0 01-15.55-6.44l-33.94-33.94a22 22 0 0131.11-31.11l33.94 33.94a22 22 0 01-15.56 37.55zM256 358a102 102 0 11102-102 102.12 102.12 0 01-102 102z"/></svg>',
			'dark'   => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M264 480A232 232 0 0132 248c0-94 54-178.28 137.61-214.67a16 16 0 0121.06 21.06C181.07 76.43 176 104.66 176 136c0 110.28 89.72 200 200 200 31.34 0 59.57-5.07 81.61-14.67a16 16 0 0121.06 21.06C442.28 426 358 480 264 480z"/></svg>',
			'system' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M480 48H32a16 16 0 00-16 16v320a16 16 0 0016 16h168v32h-72v32h256v-32h-72v-32h168a16 16 0 0016-16V64a16 16 0 00-16-16zm-20 36v216H52V84zM240.13 354.08a16 16 0 1113.79 13.79 16 16 0 01-13.79-13.79z"/></svg>',
		);

		return isset( $icons[ $type ] ) ? $icons[ $type ] : '';
	}

	/**
	 * Get animated sun/moon SVG (lines variant).
	 *
	 * @param string $identifier Unique identifier for the element instance.
	 * @return string SVG markup.
	 */
	private function get_sun_moon_lines_svg( $identifier ) {
		$mask_id = 'moon-mask-lines-' . $identifier;
		return '<svg class="x-sun-moon-lines-svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">'
			. '<mask id="' . esc_attr( $mask_id ) . '">'
			. '<rect x="0" y="0" width="100%" height="100%" fill="white"></rect>'
			. '<circle class="mask-circle" cx="12" cy="4" r="9" fill="black"></circle>'
			. '</mask>'
			. '<circle class="center-circle" fill="currentColor" cx="12" cy="12" r="9" mask="url(#' . esc_attr( $mask_id ) . ')"></circle>'
			. '<g class="sun-lines" fill="currentColor">'
			. '<line x1="12" y1="1" x2="12" y2="3"></line>'
			. '<line x1="12" y1="21" x2="12" y2="23"></line>'
			. '<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>'
			. '<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>'
			. '<line x1="1" y1="12" x2="3" y2="12"></line>'
			. '<line x1="21" y1="12" x2="23" y2="12"></line>'
			. '<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>'
			. '<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>'
			. '</g>'
			. '</svg>';
	}

	/**
	 * Enqueue scripts.
	 */
	public function enqueue_scripts() {

		if ( bricks_is_builder_main() ) {
			return;
		}

		wp_enqueue_script( 'x-colorschemetoggle', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'colorschemetoggle' ) . '.js', array( 'bricks-scripts' ), \BricksExtras\Plugin::VERSION, true );

		if ( ! \BricksExtras\Helpers::element_css_added( $this->name ) ) {
			wp_enqueue_style( 'x-colorschemetoggle', BRICKSEXTRAS_URL . 'components/assets/css/colorschemetoggle.css', array(), \BricksExtras\Plugin::VERSION );
		}
	}

	/**
	 * Render element output.
	 */
	public function render() {

		$settings = $this->settings;
		$type     = isset( $settings['type'] ) ? esc_attr( $settings['type'] ) : 'single-button';

		$identifier = \BricksExtras\Helpers::set_identifier_attribute( $this );

		$this->set_attribute( '_root', 'class', 'brxe-x-color-scheme-toggle' );
		$this->set_attribute( '_root', 'data-type', $type );

		// Add view transition effect attribute.
		$view_transition_effect = isset( $settings['viewTransitionEffect'] ) ? esc_attr( $settings['viewTransitionEffect'] ) : 'none';
		$this->set_attribute( '_root', 'data-view-transition-effect', $view_transition_effect );

		// Add unique view-transition-name via CSS variable.
		$this->set_attribute( '_root', 'style', '--x-view-transition-name: color-scheme-toggle-' . esc_attr( $identifier ) . ';' );

		$output = "<div {$this->render_attributes( '_root' )}>";

		if ( 'custom' === $type ) {

			if ( ! empty( $this->children ) ) {
				$output .= \Bricks\Frontend::render_children( $this );
			} else {
				$output .= '<span>' . esc_html__( 'Toggle', 'bricksextras' ) . '</span>';
			}
		} elseif ( 'dropdown' === $type ) {

			$include_system   = isset( $settings['includeSystem'] ) ? 'true' === $settings['includeSystem'] : true;
			$dropdown_display = isset( $settings['dropdownDisplay'] ) ? esc_attr( $settings['dropdownDisplay'] ) : 'both';
			$system_icon      = ! empty( $settings['systemIcon'] ) ? self::render_icon( $settings['systemIcon'] ) : $this->get_default_icon( 'system' );
			$light_icon       = ! empty( $settings['lightIcon'] ) ? self::render_icon( $settings['lightIcon'] ) : $this->get_default_icon( 'light' );
			$dark_icon        = ! empty( $settings['darkIcon'] ) ? self::render_icon( $settings['darkIcon'] ) : $this->get_default_icon( 'dark' );
			$animation        = isset( $settings['singleButtonAnimation'] ) ? esc_attr( $settings['singleButtonAnimation'] ) : 'none';
			$show_icons       = in_array( $dropdown_display, array( 'both', 'icon-only', '' ), true );
			$show_text        = in_array( $dropdown_display, array( 'both', 'text-only' ), true );
			$enable_tooltips  = isset( $settings['enableTooltips'] );
			$tooltip_text     = ! empty( $settings['tooltipText'] ) ? esc_attr( bricks_render_dynamic_data( $settings['tooltipText'] ) ) : '';
			$tooltip_position = ! empty( $settings['tooltipPosition'] ) ? esc_attr( $settings['tooltipPosition'] ) : 'top';
			$system_label     = ! empty( $settings['systemLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['systemLabel'] ) ) : esc_attr__( 'System', 'bricksextras' );
			$light_label      = ! empty( $settings['lightLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['lightLabel'] ) ) : esc_attr__( 'Light', 'bricksextras' );
			$dark_label       = ! empty( $settings['darkLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['darkLabel'] ) ) : esc_attr__( 'Dark', 'bricksextras' );

			$default_theme = $include_system ? 'auto' : 'light';

			$toggle_aria_label   = ! empty( $settings['toggleAriaLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['toggleAriaLabel'] ) ) : esc_attr__( 'Color scheme', 'bricksextras' );
			$aria_label_template = ! empty( $settings['switchAriaLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['switchAriaLabel'] ) ) : sprintf(
				// translators: %s is the placeholder for the color scheme mode.
				esc_attr__( 'Color scheme: %s.', 'bricksextras' ),
				'{x_color_scheme}'
			);

			$this->set_attribute( 'x-color-scheme-toggle__trigger', 'type', 'button' );
			$this->set_attribute( 'x-color-scheme-toggle__trigger', 'class', 'x-color-scheme-toggle__trigger' );
			$this->set_attribute( 'x-color-scheme-toggle__trigger', 'aria-label', $toggle_aria_label );
			$this->set_attribute( 'x-color-scheme-toggle__trigger', 'aria-haspopup', 'listbox' );
			$this->set_attribute( 'x-color-scheme-toggle__trigger', 'aria-expanded', 'false' );
			$this->set_attribute( 'x-color-scheme-toggle__trigger', 'aria-controls', 'x-color-scheme-toggle__dropdown-' . $identifier );
			$this->set_attribute( 'x-color-scheme-toggle__trigger', 'data-current-theme', $default_theme );
			$this->set_attribute( 'x-color-scheme-toggle__trigger', 'data-animation', $animation );
			$this->set_attribute( 'x-color-scheme-toggle__trigger', 'data-system-label', esc_attr( $system_label ) );
			$this->set_attribute( 'x-color-scheme-toggle__trigger', 'data-light-label', esc_attr( $light_label ) );
			$this->set_attribute( 'x-color-scheme-toggle__trigger', 'data-dark-label', esc_attr( $dark_label ) );
			$this->set_attribute( 'x-color-scheme-toggle__trigger', 'data-aria-label-template', $aria_label_template );
			if ( $enable_tooltips ) {
				$tooltip_content = $tooltip_text ? $tooltip_text : $toggle_aria_label;
				$this->set_attribute( 'x-color-scheme-toggle__trigger', 'data-balloon', $tooltip_content );
				$this->set_attribute( 'x-color-scheme-toggle__trigger', 'data-balloon-pos', $tooltip_position );
			}

			$output .= "<button {$this->render_attributes( 'x-color-scheme-toggle__trigger' )}>";

			$this->set_attribute( 'x-color-scheme-toggle__trigger-inner', 'class', 'x-color-scheme-toggle__trigger-inner' );
			$output .= "<span {$this->render_attributes( 'x-color-scheme-toggle__trigger-inner' )}>";

			$this->set_attribute( 'x-color-scheme-toggle__trigger-icon--light', 'class', array( 'x-color-scheme-toggle__trigger-icon', 'x-color-scheme-toggle__trigger-icon--light' ) );
			$output .= "<span {$this->render_attributes( 'x-color-scheme-toggle__trigger-icon--light' )}>";
			if ( $light_icon ) {
				$output .= $light_icon;
			}
			$output .= '</span>';

			$this->set_attribute( 'x-color-scheme-toggle__trigger-icon--dark', 'class', array( 'x-color-scheme-toggle__trigger-icon', 'x-color-scheme-toggle__trigger-icon--dark' ) );
			$output .= "<span {$this->render_attributes( 'x-color-scheme-toggle__trigger-icon--dark' )}>";
			if ( $dark_icon ) {
				$output .= $dark_icon;
			}
			$output .= '</span>';

			$output .= '</span>';
			$output .= '</button>';

			$dropdown_vertical_pos   = isset( $settings['dropdownVerticalPosition'] ) ? esc_attr( $settings['dropdownVerticalPosition'] ) : 'below';
			$dropdown_horizontal_pos = isset( $settings['dropdownHorizontalPosition'] ) ? esc_attr( $settings['dropdownHorizontalPosition'] ) : 'left';

			$this->set_attribute( 'x-color-scheme-toggle__dropdown', 'id', 'x-color-scheme-toggle__dropdown-' . $identifier );
			$this->set_attribute( 'x-color-scheme-toggle__dropdown', 'class', 'x-color-scheme-toggle__dropdown' );
			$this->set_attribute( 'x-color-scheme-toggle__dropdown', 'role', 'listbox' );
			$this->set_attribute( 'x-color-scheme-toggle__dropdown', 'data-hidden', 'true' );
			$this->set_attribute( 'x-color-scheme-toggle__dropdown', 'data-vertical-position', $dropdown_vertical_pos );
			$this->set_attribute( 'x-color-scheme-toggle__dropdown', 'data-horizontal-position', $dropdown_horizontal_pos );

			$output .= "<div {$this->render_attributes( 'x-color-scheme-toggle__dropdown' )}>";

			if ( $include_system ) {
				$this->set_attribute( 'x-color-scheme-toggle__option-system', 'type', 'button' );
				$this->set_attribute( 'x-color-scheme-toggle__option-system', 'class', array( 'x-color-scheme-toggle__option', 'x-color-scheme-toggle__option-system' ) );
				$this->set_attribute( 'x-color-scheme-toggle__option-system', 'data-theme', 'auto' );
				$this->set_attribute( 'x-color-scheme-toggle__option-system', 'role', 'option' );
				$this->set_attribute( 'x-color-scheme-toggle__option-system', 'aria-selected', 'false' );
				$this->set_attribute( 'x-color-scheme-toggle__option-system', 'aria-label', esc_attr( $system_label ) );

				$output .= "<button {$this->render_attributes( 'x-color-scheme-toggle__option-system' )}>";
				if ( $show_icons && $system_icon ) {
					$output .= $system_icon;
				}
				if ( $show_text ) {
					$output .= '<span>' . esc_html( $system_label ) . '</span>';
				}
				$output .= '</button>';
			}

			$this->set_attribute( 'x-color-scheme-toggle__option-light', 'type', 'button' );
			$this->set_attribute( 'x-color-scheme-toggle__option-light', 'class', array( 'x-color-scheme-toggle__option', 'x-color-scheme-toggle__option-light' ) );
			$this->set_attribute( 'x-color-scheme-toggle__option-light', 'data-theme', 'light' );
			$this->set_attribute( 'x-color-scheme-toggle__option-light', 'role', 'option' );
			$this->set_attribute( 'x-color-scheme-toggle__option-light', 'aria-selected', 'false' );
			$this->set_attribute( 'x-color-scheme-toggle__option-light', 'aria-label', esc_attr( $light_label ) );

			$output .= "<button {$this->render_attributes( 'x-color-scheme-toggle__option-light' )}>";
			if ( $show_icons && $light_icon ) {
				$output .= $light_icon;
			}
			if ( $show_text ) {
				$output .= '<span>' . esc_html( $light_label ) . '</span>';
			}
			$output .= '</button>';

			$this->set_attribute( 'x-color-scheme-toggle__option-dark', 'type', 'button' );
			$this->set_attribute( 'x-color-scheme-toggle__option-dark', 'class', array( 'x-color-scheme-toggle__option', 'x-color-scheme-toggle__option-dark' ) );
			$this->set_attribute( 'x-color-scheme-toggle__option-dark', 'data-theme', 'dark' );
			$this->set_attribute( 'x-color-scheme-toggle__option-dark', 'role', 'option' );
			$this->set_attribute( 'x-color-scheme-toggle__option-dark', 'aria-selected', 'false' );
			$this->set_attribute( 'x-color-scheme-toggle__option-dark', 'aria-label', esc_attr( $dark_label ) );

			$output .= "<button {$this->render_attributes( 'x-color-scheme-toggle__option-dark' )}>";
			if ( $show_icons && $dark_icon ) {
				$output .= $dark_icon;
			}
			if ( $show_text ) {
				$output .= '<span>' . esc_html( $dark_label ) . '</span>';
			}
			$output .= '</button>';
			$output .= '</div>';
		} elseif ( 'buttons' === $type ) {

			$include_system = isset( $settings['includeSystem'] ) ? 'true' === $settings['includeSystem'] : true;
			$system_icon    = ! empty( $settings['systemIcon'] ) ? self::render_icon( $settings['systemIcon'] ) : $this->get_default_icon( 'system' );
			$light_icon     = ! empty( $settings['lightIcon'] ) ? self::render_icon( $settings['lightIcon'] ) : $this->get_default_icon( 'light' );
			$dark_icon      = ! empty( $settings['darkIcon'] ) ? self::render_icon( $settings['darkIcon'] ) : $this->get_default_icon( 'dark' );

			$toggle_aria_label = ! empty( $settings['toggleAriaLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['toggleAriaLabel'] ) ) : esc_attr__( 'Color scheme', 'bricksextras' );

			$this->set_attribute( 'x-color-scheme-toggle__group', 'role', 'radiogroup' );
			$this->set_attribute( 'x-color-scheme-toggle__group', 'class', 'x-color-scheme-toggle__group' );
			$this->set_attribute( 'x-color-scheme-toggle__group', 'aria-label', $toggle_aria_label );

			$output .= "<div {$this->render_attributes( 'x-color-scheme-toggle__group' )}>";

			$enable_tooltips  = isset( $settings['enableTooltips'] );
			$tooltip_position = ! empty( $settings['tooltipPosition'] ) ? esc_attr( $settings['tooltipPosition'] ) : 'top';
			$system_label     = ! empty( $settings['systemLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['systemLabel'] ) ) : esc_attr__( 'System', 'bricksextras' );
			$light_label      = ! empty( $settings['lightLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['lightLabel'] ) ) : esc_attr__( 'Light', 'bricksextras' );
			$dark_label       = ! empty( $settings['darkLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['darkLabel'] ) ) : esc_attr__( 'Dark', 'bricksextras' );

			if ( $include_system ) {
				$this->set_attribute( 'x-color-scheme-toggle__button-system', 'type', 'button' );
				$this->set_attribute( 'x-color-scheme-toggle__button-system', 'class', array( 'x-color-scheme-toggle__button', 'x-color-scheme-toggle__button-system' ) );
				$this->set_attribute( 'x-color-scheme-toggle__button-system', 'data-theme', 'auto' );
				$this->set_attribute( 'x-color-scheme-toggle__button-system', 'role', 'radio' );
				$this->set_attribute( 'x-color-scheme-toggle__button-system', 'aria-checked', 'false' );
				$this->set_attribute( 'x-color-scheme-toggle__button-system', 'tabindex', '0' );
				$this->set_attribute( 'x-color-scheme-toggle__button-system', 'aria-label', $system_label );
				if ( $enable_tooltips ) {
					$this->set_attribute( 'x-color-scheme-toggle__button-system', 'data-balloon', $system_label );
					$this->set_attribute( 'x-color-scheme-toggle__button-system', 'data-balloon-pos', $tooltip_position );
				}

				$output .= "<button {$this->render_attributes( 'x-color-scheme-toggle__button-system' )}>";

				if ( $system_icon ) {
					$output .= $system_icon;
				}
				$output .= '</button>';
			}

			$this->set_attribute( 'x-color-scheme-toggle__button-light', 'type', 'button' );
			$this->set_attribute( 'x-color-scheme-toggle__button-light', 'class', array( 'x-color-scheme-toggle__button', 'x-color-scheme-toggle__button-light' ) );
			$this->set_attribute( 'x-color-scheme-toggle__button-light', 'data-theme', 'light' );
			$this->set_attribute( 'x-color-scheme-toggle__button-light', 'role', 'radio' );
			$this->set_attribute( 'x-color-scheme-toggle__button-light', 'aria-checked', 'false' );
			$this->set_attribute( 'x-color-scheme-toggle__button-light', 'tabindex', $include_system ? '-1' : '0' );
			$this->set_attribute( 'x-color-scheme-toggle__button-light', 'aria-label', $light_label );
			if ( $enable_tooltips ) {
				$this->set_attribute( 'x-color-scheme-toggle__button-light', 'data-balloon', $light_label );
				$this->set_attribute( 'x-color-scheme-toggle__button-light', 'data-balloon-pos', $tooltip_position );
			}

			$output .= "<button {$this->render_attributes( 'x-color-scheme-toggle__button-light' )}>";

			if ( $light_icon ) {
				$output .= $light_icon;
			}
			$output .= '</button>';

			$this->set_attribute( 'x-color-scheme-toggle__button-dark', 'type', 'button' );
			$this->set_attribute( 'x-color-scheme-toggle__button-dark', 'class', array( 'x-color-scheme-toggle__button', 'x-color-scheme-toggle__button-dark' ) );
			$this->set_attribute( 'x-color-scheme-toggle__button-dark', 'data-theme', 'dark' );
			$this->set_attribute( 'x-color-scheme-toggle__button-dark', 'role', 'radio' );
			$this->set_attribute( 'x-color-scheme-toggle__button-dark', 'aria-checked', 'false' );
			$this->set_attribute( 'x-color-scheme-toggle__button-dark', 'tabindex', '-1' );
			$this->set_attribute( 'x-color-scheme-toggle__button-dark', 'aria-label', $dark_label );
			if ( $enable_tooltips ) {
				$this->set_attribute( 'x-color-scheme-toggle__button-dark', 'data-balloon', $dark_label );
				$this->set_attribute( 'x-color-scheme-toggle__button-dark', 'data-balloon-pos', $tooltip_position );
			}

			$output .= "<button {$this->render_attributes( 'x-color-scheme-toggle__button-dark' )}>";

			if ( $dark_icon ) {
				$output .= $dark_icon;
			}
			$output .= '</button>';

			$output .= '</div>';
		} elseif ( 'switch' === $type ) {

			$icon_style      = isset( $settings['iconStyle'] ) ? esc_attr( $settings['iconStyle'] ) : 'animated-preset';
			$icon_placement  = isset( $settings['switchIconPlacement'] ) ? esc_attr( $settings['switchIconPlacement'] ) : 'thumb';
			$thumb_animation = isset( $settings['switchThumbAnimation'] ) ? esc_attr( $settings['switchThumbAnimation'] ) : 'none';
			$light_label     = ! empty( $settings['lightLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['lightLabel'] ) ) : esc_attr__( 'Light', 'bricksextras' );
			$dark_label      = ! empty( $settings['darkLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['darkLabel'] ) ) : esc_attr__( 'Dark', 'bricksextras' );

			$toggle_aria_label   = ! empty( $settings['toggleAriaLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['toggleAriaLabel'] ) ) : esc_attr__( 'Color scheme', 'bricksextras' );
			$aria_label_template = ! empty( $settings['switchAriaLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['switchAriaLabel'] ) ) : esc_attr__( 'Color scheme: {x_color_scheme}. Click to toggle.', 'bricksextras' );

			$this->set_attribute( 'x-color-scheme-toggle__switch', 'type', 'button' );
			$this->set_attribute( 'x-color-scheme-toggle__switch', 'class', 'x-color-scheme-toggle__switch' );
			$this->set_attribute( 'x-color-scheme-toggle__switch', 'role', 'switch' );
			$this->set_attribute( 'x-color-scheme-toggle__switch', 'aria-label', $toggle_aria_label );
			$this->set_attribute( 'x-color-scheme-toggle__switch', 'aria-checked', 'false' );
			$this->set_attribute( 'x-color-scheme-toggle__switch', 'data-light-label', $light_label );
			$this->set_attribute( 'x-color-scheme-toggle__switch', 'data-dark-label', $dark_label );
			$this->set_attribute( 'x-color-scheme-toggle__switch', 'data-aria-label-template', $aria_label_template );
			$this->set_attribute( 'x-color-scheme-toggle__switch', 'data-icon-placement', $icon_placement );
			$this->set_attribute( 'x-color-scheme-toggle__switch', 'data-thumb-animation', $thumb_animation );
			$this->set_attribute( 'x-color-scheme-toggle__switch', 'data-icon-style', $icon_style );

			$light_icon = '';
			$dark_icon  = '';

			if ( 'icons' === $icon_style ) {
				$light_icon = ! empty( $settings['lightIcon'] ) ? self::render_icon( $settings['lightIcon'] ) : $this->get_default_icon( 'light' );
				$dark_icon  = ! empty( $settings['darkIcon'] ) ? self::render_icon( $settings['darkIcon'] ) : $this->get_default_icon( 'dark' );
			}

			$this->set_attribute( 'x-color-scheme-toggle__switch-track', 'class', 'x-color-scheme-toggle__switch-track' );
			$this->set_attribute( 'x-color-scheme-toggle__switch-icon--light', 'class', array( 'x-color-scheme-toggle__switch-icon', 'x-color-scheme-toggle__switch-icon--light' ) );
			$this->set_attribute( 'x-color-scheme-toggle__switch-icon--dark', 'class', array( 'x-color-scheme-toggle__switch-icon', 'x-color-scheme-toggle__switch-icon--dark' ) );
			$this->set_attribute( 'x-color-scheme-toggle__switch-thumb', 'class', 'x-color-scheme-toggle__switch-thumb' );

			$output .= "<button {$this->render_attributes( 'x-color-scheme-toggle__switch' )}>";
			$output .= "<span {$this->render_attributes( 'x-color-scheme-toggle__switch-track' )}>";

			if ( 'track' === $icon_placement || ( 'gooey' === $thumb_animation && 'thumb' === $icon_placement ) ) {
				$output .= "<span {$this->render_attributes( 'x-color-scheme-toggle__switch-icon--light' )}>";
				if ( $light_icon ) {
					$output .= $light_icon;
				}
				$output .= '</span>';
				$output .= "<span {$this->render_attributes( 'x-color-scheme-toggle__switch-icon--dark' )}>";
				if ( $dark_icon ) {
					$output .= $dark_icon;
				}
				$output .= '</span>';
			}

			if ( 'gooey' === $thumb_animation && 'thumb' === $icon_placement ) {
				$output .= '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 40" class="x-color-scheme-toggle__switch-thumb--gooey">';
				$output .= '<defs>';
				$output .= '<filter id="goo-' . esc_attr( $identifier ) . '">';
				$output .= '<feGaussianBlur stdDeviation="3" result="blur" in="SourceGraphic"></feGaussianBlur>';
				$output .= '<feColorMatrix result="goo" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" mode="matrix" in="blur"></feColorMatrix>';
				$output .= '</filter>';
				$output .= '</defs>';
				$output .= '<g filter="url(#goo-' . esc_attr( $identifier ) . ')">';
				$output .= '<rect fill="currentColor" rx="10" height="20" width="35" y="10" x="3" class="x-gooey-circle-center"></rect>';
				$output .= '<rect fill="currentColor" rx="20" height="40" width="40" y="0" x="-5" class="x-gooey-circle left"></rect>';
				$output .= '<rect fill="currentColor" rx="20" height="40" width="40" y="0" x="35" class="x-gooey-circle right"></rect>';
				$output .= '</g>';
				$output .= '</svg>';
			} else {
				$output .= "<span {$this->render_attributes( 'x-color-scheme-toggle__switch-thumb' )}>";

				if ( 'thumb' === $icon_placement ) {
					if ( 'animated-preset' === $icon_style ) {
						$animated_preset = isset( $settings['animatedPreset'] ) ? $settings['animatedPreset'] : 'css-rays';
						if ( 'lines' === $animated_preset ) {
							$output .= $this->get_sun_moon_lines_svg( $identifier );
						} elseif ( 'css-morph' === $animated_preset ) {
							$output .= '<div class="x-sun-moon-css-morph"></div>';
						} elseif ( 'css-rays' === $animated_preset ) {
							$output .= '<span class="x-sun-moon-css-rays">';
							for ( $i = 1; $i <= 9; $i++ ) {
								$output .= '<span class="x-sun-moon-css-rays__part"></span>';
							}
							$output .= '</span>';
						} elseif ( 'css-rays-inward' === $animated_preset ) {
							$output .= '<span class="x-sun-moon-css-rays-inward">';
							$output .= '<span class="x-sun-moon-css-rays-inward__circle"></span>';
							for ( $i = 1; $i <= 8; $i++ ) {
								$output .= '<span class="x-sun-moon-css-rays-inward__ray"></span>';
							}
							$output .= '</span>';
						}
					} else {
						$this->set_attribute( 'x-color-scheme-toggle__switch-thumb-icon--light', 'class', array( 'x-color-scheme-toggle__switch-icon', 'x-color-scheme-toggle__switch-icon--light' ) );
						$this->set_attribute( 'x-color-scheme-toggle__switch-thumb-icon--dark', 'class', array( 'x-color-scheme-toggle__switch-icon', 'x-color-scheme-toggle__switch-icon--dark' ) );

						$output .= "<span {$this->render_attributes( 'x-color-scheme-toggle__switch-thumb-icon--light' )}>";
						if ( $light_icon ) {
							$output .= $light_icon;
						}
						$output .= '</span>';
						$output .= "<span {$this->render_attributes( 'x-color-scheme-toggle__switch-thumb-icon--dark' )}>";
						if ( $dark_icon ) {
							$output .= $dark_icon;
						}
						$output .= '</span>';
					}
				}

				$output .= '</span>'; // Close thumb.
			}

			$output .= '</span>'; // Close track.
			$output .= '</button>';
		} elseif ( 'single-button' === $type ) {

			$icon_style          = isset( $settings['iconStyle'] ) ? esc_attr( $settings['iconStyle'] ) : 'animated-preset';
			$animation           = isset( $settings['singleButtonAnimation'] ) ? esc_attr( $settings['singleButtonAnimation'] ) : 'none';
			$enable_tooltips     = isset( $settings['enableTooltips'] );
			$tooltip_text        = ! empty( $settings['tooltipText'] ) ? esc_attr( bricks_render_dynamic_data( $settings['tooltipText'] ) ) : '';
			$tooltip_position    = ! empty( $settings['tooltipPosition'] ) ? esc_attr( $settings['tooltipPosition'] ) : 'top';
			$light_label         = ! empty( $settings['lightLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['lightLabel'] ) ) : esc_attr__( 'Light', 'bricksextras' );
			$dark_label          = ! empty( $settings['darkLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['darkLabel'] ) ) : esc_attr__( 'Dark', 'bricksextras' );
			$toggle_aria_label   = ! empty( $settings['toggleAriaLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['toggleAriaLabel'] ) ) : esc_attr__( 'Color scheme', 'bricksextras' );
			$aria_label_template = ! empty( $settings['switchAriaLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['switchAriaLabel'] ) ) : esc_attr__( 'Color scheme: {x_color_scheme}. Click to toggle.', 'bricksextras' );

			$this->set_attribute( 'x-color-scheme-toggle__single-button', 'type', 'button' );
			$this->set_attribute( 'x-color-scheme-toggle__single-button', 'class', 'x-color-scheme-toggle__single-button' );
			$this->set_attribute( 'x-color-scheme-toggle__single-button', 'role', 'switch' );
			$this->set_attribute( 'x-color-scheme-toggle__single-button', 'aria-label', $toggle_aria_label );
			$this->set_attribute( 'x-color-scheme-toggle__single-button', 'aria-checked', 'false' );
			$this->set_attribute( 'x-color-scheme-toggle__single-button', 'data-light-label', $light_label );
			$this->set_attribute( 'x-color-scheme-toggle__single-button', 'data-dark-label', $dark_label );
			$this->set_attribute( 'x-color-scheme-toggle__single-button', 'data-aria-label-template', $aria_label_template );
			$this->set_attribute( 'x-color-scheme-toggle__single-button', 'data-animation', $animation );
			$this->set_attribute( 'x-color-scheme-toggle__single-button', 'data-icon-style', $icon_style );
			if ( $enable_tooltips ) {
				$tooltip_content = $tooltip_text ? $tooltip_text : $toggle_aria_label;
				$this->set_attribute( 'x-color-scheme-toggle__single-button', 'data-balloon', $tooltip_content );
				$this->set_attribute( 'x-color-scheme-toggle__single-button', 'data-balloon-pos', $tooltip_position );
			}

			$output .= "<button {$this->render_attributes( 'x-color-scheme-toggle__single-button' )}>";

			$this->set_attribute( 'x-color-scheme-toggle__single-button-inner', 'class', 'x-color-scheme-toggle__single-button-inner' );
			$output .= "<span {$this->render_attributes( 'x-color-scheme-toggle__single-button-inner' )}>";

			if ( 'animated-preset' === $icon_style ) {
				$animated_preset = isset( $settings['animatedPreset'] ) ? $settings['animatedPreset'] : 'css-rays';
				if ( 'lines' === $animated_preset ) {
					$output .= $this->get_sun_moon_lines_svg( $identifier );
				} elseif ( 'css-morph' === $animated_preset ) {
					$output .= '<div class="x-sun-moon-css-morph"></div>';
				} elseif ( 'css-rays' === $animated_preset ) {
					$output .= '<span class="x-sun-moon-css-rays">';
					for ( $i = 1; $i <= 9; $i++ ) {
						$output .= '<span class="x-sun-moon-css-rays__part"></span>';
					}
					$output .= '</span>';
				} elseif ( 'css-rays-inward' === $animated_preset ) {
					$output .= '<span class="x-sun-moon-css-rays-inward">';
					$output .= '<span class="x-sun-moon-css-rays-inward__circle"></span>';
					for ( $i = 1; $i <= 8; $i++ ) {
						$output .= '<span class="x-sun-moon-css-rays-inward__ray"></span>';
					}
					$output .= '</span>';
				}
			} else {
				$light_icon = ! empty( $settings['lightIcon'] ) ? self::render_icon( $settings['lightIcon'] ) : $this->get_default_icon( 'light' );
				$dark_icon  = ! empty( $settings['darkIcon'] ) ? self::render_icon( $settings['darkIcon'] ) : $this->get_default_icon( 'dark' );

				$this->set_attribute( 'x-color-scheme-toggle__single-button-icon--light', 'class', array( 'x-color-scheme-toggle__single-button-icon', 'x-color-scheme-toggle__single-button-icon--light' ) );
				$this->set_attribute( 'x-color-scheme-toggle__single-button-icon--dark', 'class', array( 'x-color-scheme-toggle__single-button-icon', 'x-color-scheme-toggle__single-button-icon--dark' ) );

				$output .= "<span {$this->render_attributes( 'x-color-scheme-toggle__single-button-icon--light' )}>";
				if ( $light_icon ) {
					$output .= $light_icon;
				}
				$output .= '</span>';
				$output .= "<span {$this->render_attributes( 'x-color-scheme-toggle__single-button-icon--dark' )}>";
				if ( $dark_icon ) {
					$output .= $dark_icon;
				}
				$output .= '</span>';
			}

			$output .= '</span>';
			$output .= '</button>';
		}

		$output .= '</div>';

		echo $output;
	}
}
