<?php
/**
 * WeCodeArt Framework
 *
 * WARNING: This file is part of the core WeCodeArt Framework. DO NOT edit this file under any circumstances.
 * Please do all modifications in the form of a child theme.
 *
 * @package 	WeCodeArt Framework 
 * @subpackage 	Markup\Inputs
 * @copyright   Copyright (c) 2025, WeCodeArt Framework
 * @since		6.0.0
 * @version		6.4.1
 */

namespace WeCodeArt\Support\DOM\Inputs;

defined( 'ABSPATH' ) || exit;

use WeCodeArt\Support\DOM\Inputs\Basic;
use function WeCodeArt\Functions\get_prop;

/**
 * Standard Inputs Markup
 */
class Range extends Basic {
    /**
	 * Constructor 
	 */
	public function __construct( string $type = 'range', array $args = [] ) {
        parent::__construct( $type, $args );
    }

    /**
     * Get input's class.
     * 
     * @since   6.4.1
     * @version 6.4.1
     *
     * @param 	string
     */
    public function input_class(): string {
        return 'form-range';
    }

    /**
	 * Input styles.
	 *
	 * @return 	string
	 */
	public static function styles(): string {

		return '
            .form-range {
                --wp--range-focus-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem var(--wp--preset--color--primary);
                --wp--range-thumb-color: var(--wp--preset--color--primary);
                --wp--range-track-radius: 1rem;
                width: 100%;
                height: 1.5rem;
                padding: 0;
                background-color: transparent;
                appearance: none;
            }
            .form-range:focus {
                outline: 0;
            }
            .form-range::-moz-focus-outer {
                border: 0;
            }

            .form-range:focus::-webkit-slider-thumb {
                box-shadow: var(--wp--range-focus-shadow);
            }
            .form-range::-webkit-slider-thumb {
                width: 1rem;
                height: 1rem;
                margin-top: -0.25rem;
                background-color: var(--wp--range-thumb-color);
                border: 0;
                border-radius: var(--wp--range-track-radius);
                transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
                appearance: none;
            }
            .form-range::-webkit-slider-thumb:active {
                background-color: var(--wp--input--background-color);
            }
            .form-range::-webkit-slider-runnable-track {
                width: 100%;
                height: 0.5rem;
                color: transparent;
                cursor: pointer;
                background-color: var(--wp--input--background-color);
                border-color: transparent;
                border-radius: var(--wp--range-track-radius);
            }

            .form-range:focus::-moz-range-thumb {
                box-shadow: var(--wp--range-focus-shadow);
            }
            .form-range::-moz-range-thumb {
                width: 1rem;
                height: 1rem;
                background-color: var(--wp--range-thumb-color);
                border: 0;
                border-radius: var(--wp--range-track-radius);
                transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
                appearance: none;
            }
            .form-range::-moz-range-thumb:active {
                background-color: var(--wp--input--background-color);
            }
            .form-range::-moz-range-track {
                width: 100%;
                height: 0.5rem;
                color: transparent;
                cursor: pointer;
                background-color: var(--wp--input--background-color);
                border-color: transparent;
                border-radius: var(--wp--range-track-radius);
            }

            .form-range:disabled {
                pointer-events: none;
            }
            .form-range:disabled::-webkit-slider-thumb {
                background-color: var(--wp--input--disabled-color);
            }
            .form-range:disabled::-moz-range-thumb {
                background-color: var(--wp--input--disabled-color);
            }

            @media (prefers-reduced-motion: reduce) {
                .form-range::-moz-range-thumb {
                    transition: none;
                }
            }
        ';
	}
}