<?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		5.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 Floating extends Basic {

    /**
     * Input's Type / Label Position.
     *
     * @since   5.0.0
     * @var     string
     */
    public $type    = 'floating';
    public $_label  = 'none';

    /**
	 * Constructor 
	 */
	public function __construct( string $type = 'floating', array $args = [] ) {
        $this->args = $args;
    }
	
	/**
	 * Create HTML Inputs
	 *
	 * @since	unknown
	 * @version	5.0.0
	 */
	public function content() {
        wecodeart( 'dom' )::wrap( 'form-floating', [
            [
                'tag' => 'div',
                'attrs' => [
                    'class' => 'form-floating',
                ]
            ]
        ], 'wecodeart_input', [ get_prop( $this->args, 'type', 'text' ), wp_parse_args( [
            '_label' => 'after'
        ], $this->args ) ] );
    }

    /**
	 * Input styles.
	 *
	 * @return 	string
	 */
	public static function styles(): string {
		return '
            .form-floating {
                position: relative;
            }
            .form-floating > :is(.form-control,.form-control-plaintext,.form-select) {
                height: calc(3.5rem + 2px);
                line-height: 1.25;
            }
            .form-floating > label {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 1rem var(--wp--input--padding-x);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                pointer-events: none;
                border: 1px solid transparent;
                transform-origin: 0 0;
                transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
            }
            .theme-is-dark .form-floating > label {
                color: var(--wp--preset--color--cyan-bluish-gray);
            }
            .form-floating > :is(.form-control,.form-control-plaintext) {
                padding: 1rem var(--wp--input--padding-x);
            }
            .form-floating > .form-control::placeholder,
            .form-floating > .form-control-plaintext::placeholder {
                color: transparent;
            }
            .form-floating > :is(.form-control:focus,.form-control:-webkit-autofill,.form-control:not(:placeholder-shown),
            .form-control-plaintext:focus,.form-control-plaintext:-webkit-autofill,.form-control-plaintext:not(:placeholder-shown),.form-select) {
                padding-top: 1.625rem;
                padding-bottom: 0.625rem;
            }
            .form-floating > :is(.form-control:focus,.form-control:-webkit-autofill,.form-control:not(:placeholder-shown),
            .form-control-plaintext,.form-select) ~ label {
                opacity: 0.65;
                transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
            }
            .form-floating > .form-control-plaintext ~ label {
                border-width: 1px 0;
            }

            @media (prefers-reduced-motion: reduce) {
                .form-floating > label {
                    transition: none;
                }
            }
        ';
	}
}