/*
	form.css
*/
:root{
	--f-padding-v: 15px;
	--f-padding-h: 15px;
	--f-line-height: 1.5;
}

form{
	--padding-h: 15px;
	--padding-v: 15px;
	--line-height: 1.5;
	margin:0;
	padding:0;
	
	/* row */
	[row]{
		display:flex;gap:10px;
		flex-direction:column;
		font-size:inherit;
		line-height:var(--f-line-height);
	}
	
	[row="horizontal"]{
		flex-direction:row;
		gap:10px;
	}
	
	/* icon - use the HTML entity code */
	[icon]{
		&:before{content:attr(icon);font-family:var(--icon);color:inherit;
			font-size:inherit;display:inline-block;font-style:normal;vertical-align:middle;}
	}
}

label{
	font-weight:400;
	font-size:1rem;
	color:var(--text-dark);
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea{
	appearance:none;
	padding:var(--f-padding-v) var(--f-padding-h);
	border:1px solid var(--brand-10);
	background:white;
	color:var(--text);
	width:100%;
	font-size:inherit;
	transition:all 0.3s ease;
	&:focus{
		outline:1px solid var(--brand);
		outline-offset: -1px;
	}
}

select{
	appearance:none;
	padding:var(--f-padding-v) var(--f-padding-h);
	border:1px solid var(--brand-10);
	background:white;
	color:var(--text);
	width:100%;
	font-size:inherit;
}

input[type="radio"]{}
input[type="checkbox"]{}

ul[buttons],
ul.buttons{
	margin:0;padding:0;
	list-style-type:none;
	display:flex;
	&>*{flex:1;margin:0;padding:0;}
}

button,
[button],
ul.buttons a,
ul[buttons] a{
	display:inline-block;
	border:1px solid transparent;
	background:var(--brand);
	color:white;
	padding:var(--f-padding-v) var(--f-padding-h);
	white-space:nowrap;
	font-size:calmp(0.95, 3vw, 1rem);
	text-align:center;
	width:100%;
	cursor:pointer;
	position:relative;
	line-height:var(--f-line-height);
	text-decoration:none;
	&:before{/* icon */
		position:absolute;top:50%;transform:translateY(-50%);
		margin-top:2px;right:var(--padding-h);opacity:0.8;
	}
}

/*
	formbuilder - UIKIT overrides
*/

body[formbuilder]{
	--bg: var(--brand);
	--tint-light: hsl(from var(--bg) h s 97% / alpha);
	--tint-dark: hsl(from var(--bg) h s 45% / alpha);
	--border: hsl(from var(--bg) h s 45% / 0.3);
	padding:0;
	
	form{
	background:var(--brand-5);
	padding:var(--padding-large);
	}
	
	input[type="text"],
	input[type="search"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	input[type="url"],
	input[type="number"],
	textarea, 
	select{
		border:1px solid var(--border) !important;
	}
	
	label{font-size:1rem !important;}
	
	.uk-button{
		background:var(--brand);
		color:white;font-weight:500;
		padding:var(--f-padding-v) var(--f-padding-h);
	}

}