// Base form styles.
$float-labels: () !default;

$float-labels-defaults: (
	base-height             : 24px,
	base-padding            : 6px,
	border-radius           : 3px,
	border-width            : 1px,
	margin-bottom           : 24px,
	color-background        : #fff,
	color-background-active : #fff,
	color-background-focus  : #fff,
	color-border            : #dfdfdf,
	color-border-active     : #dfdfdf,
	color-border-focus      : #1976D2,
	color-placeholder       : #bbb,
	color-required          : #D32F2F,
	color-text              : #444,
	color-text-focus        : #1976D2,
	line-height             : 1.5,
	font-size               : 16px,
	font-size-small         : 12px,
	font-weight             : 400,
	parent                  : '',
	prefix                  : 'fl-',
	transition-easing       : ease-in-out,
	transition-speed        : 0.2s,
);

@function fl($value) {
	@return map-get(map-merge($float-labels-defaults, $float-labels), $value);
}

@function str-replace($string, $search, $replace: '') {
	$index: str-index($string, $search);
	@if $index {
		@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
	}
	@return $string;
}

form {
	position: relative;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

input,
select,
textarea {
	outline: 0;
	font-size: fl(font-size);
	line-height: fl(line-height);
	border-radius: fl(border-radius);
	border: fl(border-width) solid fl(color-border);
	background-color: fl(color-background);
	box-sizing: border-box;
	transition: all fl(transition-speed) fl(transition-easing);
	margin-bottom: fl(margin-bottom);
	padding: fl(base-padding)*2;

	&:-moz-placeholder {
		filter: contrast(0%);
		color: fl(color-placeholder);
	}
	&::-moz-placeholder {
		filter: contrast(0%);
		color: fl(color-placeholder);
	}
	&:-ms-input-placeholder {
		filter: contrast(0%);
		color: fl(color-placeholder);
	}
	&::-webkit-input-placeholder {
		filter: contrast(0%);
		color: fl(color-placeholder);
	}
}

form:not( .wpuf-theme-style ) input {
	width: auto;
}

form.wpuf-theme-style input {
	width: 100%;
}

select,
textarea {
	width: 100%;
}

button, input, optgroup, select, textarea {
	color: fl(color-text);
}

input[type=radio],
input[type=submit],
input[type=checkbox] {
	width: auto;
}

select {
	position: relative;
	height: fl(base-height) + fl(base-padding)*4 + fl(border-width)*2;
	color: fl(color-placeholder);
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	&::-ms-expand {
		display: none;
	}
	&.light {
		background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6dHJhbnNwYXJlbnQ7fS5jbHMtMntmaWxsOiMzMzN9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
	}
	&.dark {
		background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6dHJhbnNwYXJlbnQ7fS5jbHMtMntmaWxsOiNmZmZ9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
	}
}

input:active,
select:active,
textarea:active {
	color: fl(color-text);
	background-color: fl(color-background-active);
	border-color: fl(color-border-active);
}

input:focus,
select:focus,
textarea:focus {
	background-color: fl(color-background-focus);
	border-color: fl(color-border-focus);
}

:required:before {
	opacity: 1;
	content: '*';
	display: block;
	position: absolute;
	top: fl(border-width);
	right: fl(base-height)/2 + fl(base-padding)/2;
	font-size: fl(font-size);
	line-height: 1.75;
	color: fl(color-required);
	transition: all fl(transition-speed) fl(transition-easing);
	padding: fl(base-padding) 0 0;
	z-index: 1;
}

:required:active:before {
	opacity: 0;
}

label {
	top: fl(border-width);
	left: fl(border-width) + fl(base-padding)*1.5;
	padding: fl(base-padding) fl(base-padding)/2 fl(base-padding)/2;
}
:required:before {
	padding-top: fl(base-padding)*2;
}


#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}wrap-select:after {
	content: '';
	position: absolute;
	display: block;
	background: none;
	border-top: 7px solid currentColor;
	border-top-color: fl(color-placeholder);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: none;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 0;
	height: 12px;
	z-index: 2;
}