$float-labels: (
		base-height             : auto,
		base-padding            : 8px,
		border-radius           : $input-border-radius,
		border-width            : $input-border-width,
		margin-bottom           : 0,
		color-background        : transparent,
		color-background-active : transparent,
		color-background-focus  : transparent,
		color-border            : $input-border-color,
		color-border-active     : #dfdfdf,
		color-border-focus      : #1976D2,
		color-placeholder       : $input-placeholder-color,
		color-required          : #D32F2F,
		color-text              : $input-color,
		color-text-focus        : $input-color,
		line-height             : $input-line-height,
		font-size               : $font-size-base,
		font-size-small         : 12px,
		font-weight             : 300,
		parent                  : '',
		prefix                  : 'fl-',
		transition-easing       : ease-in-out,
		transition-speed        : 0.2s,
);

//@import "~float-labels.js/src/float-labels";

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

@mixin fl-style-2 {
	input.#{fl(prefix)}input,
	select.#{fl(prefix)}select,
	textarea.#{fl(prefix)}textarea {
		padding: fl(base-padding)*2 fl(base-padding)*3;

		&.custom-select-sm,
		&.form-control-sm {
			padding-top: 0;
			padding-bottom: 0;
		}
	}
	select.#{fl(prefix)}select {
		padding-right: 3rem;
		//height: fl(base-height) + fl(base-padding)*4 + fl(border-width)*2;
	}
	.#{fl(prefix)}is-active input.#{fl(prefix)}input,
	.#{fl(prefix)}is-active select.#{fl(prefix)}select,
	.#{fl(prefix)}is-active textarea.#{fl(prefix)}textarea {
		padding: fl(base-padding)*3.25 fl(base-padding)*3 fl(base-padding)*.75;

		&.custom-select-sm,
		&.form-control-sm {
			padding-top: fl(base-padding)*3 - 4;
			padding-bottom: fl(base-padding)*1 - 4;
		}
	}
	.#{fl(prefix)}is-active textarea.#{fl(prefix)}textarea {
		padding-top: fl(base-padding)*3.25 + 4px;
	}
	label.#{fl(prefix)}label {
		top: fl(border-width);
		left: fl(border-width) + fl(base-padding)*3;
		padding: fl(base-padding)*1.75 fl(base-padding)/2 fl(base-padding)/2 0;
	}
	.#{fl(prefix)}is-required:before {
		padding-top: fl(base-padding)*2;
	}
}

#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}wrap {
	position: relative;
}

#{fl(parent)}.#{fl(prefix)}form input.#{fl(prefix)}input,
#{fl(parent)}.#{fl(prefix)}form select.#{fl(prefix)}select,
#{fl(parent)}.#{fl(prefix)}form textarea.#{fl(prefix)}textarea {
	transition: all fl(transition-speed) fl(transition-easing);
}

#{fl(parent)}.#{fl(prefix)}form select.#{fl(prefix)}select {
	position: relative;
	color: fl(color-placeholder);
	cursor: pointer;
	appearance: none;
}

#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}is-active input.#{fl(prefix)}input,
#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}is-active select.#{fl(prefix)}select,
#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}is-active textarea.#{fl(prefix)}textarea {
	color: fl(color-text);
}

#{fl(parent)}.#{fl(prefix)}form label.#{fl(prefix)}label {
	opacity: 0;
	visibility: hidden;
	display: block;
	position: absolute;
	top: - fl(font-size-small);
	left: 0;
	font-size: fl(font-size-small);
	font-weight: fl(font-weight);
	line-height: 1;
	color: fl(color-placeholder);
	transition: all fl(transition-speed) fl(transition-easing);
	z-index: 1;
	pointer-events: none;
}

#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}is-active label.#{fl(prefix)}label {
	opacity: 1;
	visibility: visible;
}

#{fl(parent)}.#{fl(prefix)}form .#{fl(prefix)}has-focus label.#{fl(prefix)}label {
	color: fl(color-text-focus);
}

#{fl(parent)}.#{fl(prefix)}form.#{fl(prefix)}style-2 {
	@include fl-style-2;
}