/* Patterns - Interaction - Animated Label */
////
/// @group Patterns-Animated_Label
/// Patterns - Interaction - Animated Label

///
.animated-label {
	position: relative;

	&.active {
		.animated-label-text {
			font-size: var(--font-size-xs);
			top: -10px;
		}

		.animated-label-input {
			.form-control[data-input]::-webkit-datetime-edit {
				color: var(--color-neutral-9);
			}

			[data-textarea] {
				padding-bottom: var(--space-xs);
			}
		}
	}

	&-text {
		color: var(--color-neutral-8);
		font-size: var(--font-size-s);
		pointer-events: none;
		position: absolute;
		top: 8px;
		transition: all 300ms ease;
		z-index: var(--layer-global-screen);

		.icon {
			padding-right: var(--space-base);
		}

		// Service Studio Preview
		& {
			-servicestudio-left: 0 !important;
			-servicestudio-position: static !important;
		}
	}

	&-input {
		&:empty {
			-servicestudio-min-height: 40px;
		}

		.form-control {
			&[data-input],
			&[data-textarea] {
				background-color: transparent;
				border: var(--border-size-none);
				border-bottom: var(--border-size-s) solid var(--color-neutral-5);
				border-radius: var(--border-radius-none);
				padding: var(--space-none);
				transition: all 100ms ease-in-out;

				&:focus {
					border-bottom: var(--border-size-s) solid var(--color-primary);

					&::-webkit-datetime-edit {
						color: var(--color-neutral-9);
					}
				}

				&.not-valid {
					border-bottom: var(--border-size-s) solid var(--color-error);

					&:focus {
						border: var(--border-size-none);
						border-bottom: var(--border-size-s) solid var(--color-error);
					}
				}

				/* Removes placeholder text for input type date and time*/
				&::-webkit-datetime-edit {
					color: transparent;
				}

				&::-webkit-calendar-picker-indicator {
					display: none;
				}

				&:-webkit-autofill {
					animation-name: onAutoFillStart;
				}

				&:not(:-webkit-autofill) {
					animation-name: onAutoFillCancel;
				}
			}

			&[data-textarea] {
				margin-top: var(--space-s);

				& + span.validation-message {
					bottom: 7px;
				}
			}
		}
	}
}

/* Fix for animated labels inside lists */
.list.list-group > [data-block*='AnimatedLabel']:first-child .animated-label {
	margin-top: var(--space-s);
}

///
.form {
	.animated-label {
		&-input .form-control[data-textarea] + span.validation-message {
			position: relative;
			bottom: var(--space-m);
		}
	}
}

/* Chrome autofill hack ----------------------------------------
	This is an hack to solve the autoFill when Chrome at windows.
	An event added throught JS was added to proper manage the input behaviour based on this animation.
*/
@keyframes onAutoFillStart {
	from {
	}

	to {
	}
}

@keyframes onAutoFillCancel {
	from {
	}

	to {
	}
}
// End of Chrome autofill hack -----------------------------------

// Responsive --------------------------------------------------------------------
///
.tablet,
.phone {
	.animated-label-text {
		top: 14px;
	}

	.form-control {
		&[data-textarea] {
			& + span.validation-message {
				bottom: 10px;
			}
		}
	}
}

// Accessibility --------------------------------------------------------------------
///
.has-accessible-features {
	.animated-label-input {
		.form-control[data-input] {
			border-color: var(--color-neutral-7);

			&:hover {
				border-color: var(--color-neutral-8);
			}

			&:focus {
				box-shadow: 0 3px 0 0 var(--color-focus-outer);
			}
		}
	}
}

// OS HighContrast Enabled -------------------------------------------------------
///
.os-high-contrast {
	.animated-label-text {
		font-weight: var(--font-semi-bold);
		padding: var(--space-none) var(--space-s);
	}

	.animated-label {
		&.active {
			.animated-label-text {
				background-color: var(--color-neutral-8);
				font-size: var(--font-size-s);
				top: -16px;
			}
		}
	}

	.animated-label-input {
		.form-control[data-input] {
			padding: var(--space-none) var(--space-s);
		}
	}
}