// Form element: label

.form-label {
	font-size: $font-size-sm;
	text-transform: uppercase;
	color: $lightgray-500;
	width: 100%;
	display: block;
	padding: 0;
	line-height: $unit-6;
	font-weight: 600;

	i {
		font-size: $unit-4;
		line-height: $unit-4;
	}

	&.tooltip::after {
		text-transform: initial;
		width: inherit;
		font-size: inherit;
		line-height: 1.2em;
		white-space: normal;
	}
}

.form-label--compact {
	position: absolute;
	top: 0;
	line-height: $control-size-lg;
	font-size: 0.75rem;
	font-weight: 500;
	left: $unit-2;
	z-index: 1;
	text-transform: none;
	pointer-events: none;
	transition: all 0.1s ease-in;
	&--focus {
		line-height: $control-size-lg / 2;
		text-transform: uppercase;
		font-size: 0.5rem;
		transition: all 0.1s ease-out;
	}
}