@import (reference) '../../style/themes/index';

@form-item-prefix-cls: ~'@{form-prefix-cls}-item';

.@{form-item-prefix-cls}-label-float {
	position: relative;

	.@{form-item-prefix-cls} {
		&-label {
			position: absolute;
			z-index: 1;
			top: 0.5rem;
			left: 1rem;
			user-select: none;
			pointer-events: none;
			transition: top ease 0.1s;

			> label {
				transition: font-size ease 0.2s;
			}
		}

		&-control {
			z-index: 0;

			[class$='placeholder'] {
				color: transparent;
				transition: color ease 0.2s;
			}

			input,
			textarea {
				&::placeholder {
					color: transparent;
					transition: color ease 0.2s;
				}
			}
		}
	}

	&:focus-within,
	&&-fill {
		.@{form-item-prefix-cls} {
			&-label {
				top: -0.75rem;
				user-select: auto;
				pointer-events: all;
				padding: 0 0.3rem;
				background: @white;
				background: linear-gradient(0deg, @white 0%, @white 50%, transparent 100%);

				> label {
					font-size: 85%;
				}
			}

			&-control {
				[class$='placeholder'] {
					color: @input-placeholder-color;
				}
				input,
				textarea {
					&::placeholder {
						color: @input-placeholder-color;
					}
				}
			}
		}
	}
}