﻿select option:first-child,
summary::-webkit-details-marker, 
summary::marker, 	
input[type=checkbox], 
input[type=radio]        { display: none; content: none; }		
.pwm-field-icon          { display: none; }
::placeholder            { opacity: 0; }
:disabled                { opacity: 0.75; }
button                   { background-color: transparent; }
textarea                 { resize: vertical; }
select, input, textarea	 { appearance: none; -webkit-appearance: none; -moz-appearance: none; }
select option            { font: -moz-pull-down-menu; }
input, textarea          { border-width: 2px; }
*:focus                  { outline: none; outline: -webkit-focus-ring-color auto 0; }
*:focus-visible          { outline: none; }  
*:-moz-focusring         { outline: 0; }
:is(input, textarea):is(:hover, :focus) { border-color: var(--acc-3); }


input, textarea 	{ 	width: 100.0%; height: 100.0%; padding: 1.00em; border-radius: 0.50em; font-family: sofo-500; font-size: 1.00em; }


div:has(form) 		{ 	background-color: var(--acc-1);
						> div		{ 	width: min(100.0%, 80.00em); margin: 0 auto; padding: var(--spa-v) var(--spa-h); 
							> form	{ 	display: flex; gap: var(--gap); flex-flow: row wrap; justify-content: space-between;  
							> div	{ 	flex: 1 1 20.00em; display: flex; gap: 0.50em; flex-flow: column wrap; justify-content: space-between; }}}
					}


.flg	{ 	position: relative; display: block; width: 100.0%; --flg: 4.00em;

			> :is(input, textarea) { 	padding-left: var(--flg); + span 	{ 	position: absolute; top: 0; left: var(--flg); right: auto; padding-top: calc(var(--flg) / 2.75); width: calc(100.0% - var(--flg)); height: 100.0%; color: var(--acc-3); }	
										&:not(:placeholder-shown) + span 	{ 	text-align: right; padding-top: 1.00em; padding-right: 1.50em; font-size: 0.85em; opacity: 0.50; }}
			
			&:has(input)	{ 	height: var(--flg); }	
			&:has(textarea)	{ 	height: 100.0%; min-height: calc((var(--flg) * 3) + 2.00em); > textarea { padding-top: 1.50em; }}	
			
			&:before		{ 	position: absolute; z-index: 2; top: 1.00em; left: 1.00em; width: 2.50em; aspect-ratio: 1; scale: 2; display: grid; place-items: center; font-family: icongo; color: var(--acc-3); opacity: 0.50; }	
			&:hover:before	{ 	opacity: 1.00; }	
			
				&:has(input[name="name"]):before	{ 	content: 'person'; 			}	
				&:has(input[name="email"]):before	{ 	content: 'mail_outline'; 	}	
				&:has(input[name="phone"]):before	{ 	content: 'phone'; 			}	
				&:has(textarea):before				{ 	content: 'edit_note'; 		}	
		}	
	
	
label:has(input.check) 	
		{ 	display: inline-grid; grid-template-columns: 3.00em 1fr;  place-items: center start;  
			&:before 							{ 	height: 100.0%; display: inline-grid; place-content: left start; font-family: icongo; font-size: 2.00em; font-variation-settings: 'FILL' 0; } 			
			&:has([type="checkbox"]):before 	{ 	content: 'check_box_outline_blank'; } 	&:has([type="checkbox"]:checked):before 	{ 	content: 'check_box';    }
			&:has([type="radio"]):before 		{ 	content: 'radio_button_unchecked';  } 	&:has([type="radio"]:checked):before  	{ 	content: 'check_circle'; }
		}						
						
/*	=================================
		END
	================================= */