.field {
	@apply flex items-center relative text-base whitespace-nowrap basis-full max-w-full;
	min-height: var(--height);
}

.wrap {
	@apply max-w-full overflow-hidden relative self-stretch flex items-center basis-full;
}

.content {
	@apply opacity-0 max-w-full overflow-hidden w-full pt-4 leading-10 flex;
	min-height: var(--height);
}

.label {
	@apply absolute left-0 inline-block transition origin-top-left text-muted pointer-events-none -translate-y-1/2;
	top: 28px;
}

.before {
	@apply mr-2.5 flex-shrink-0 text-muted;
}

.after {
	@apply pl-2.5 flex-shrink-0 flex;
}

.invalid .label,
.invalid .before {
	@apply text-negative;
}

.loading {
	@apply pointer-events-none;
}

.show-content .content {
	@apply opacity-100;
}

.show-content .label {
	@apply -translate-y-5 scale-75;
}

.field.bordered {
	@apply border border-muted-sm rounded-lg px-3;
}

.bordered.invalid {
	@apply text-negative border-negative;
}

.material.focused .border::before {
	@apply scale-x-100 opacity-100;
}

.material.invalid .border::before {
	@apply scale-x-100 opacity-100 bg-negative;
}

.material .border {
	@apply h-px absolute inset-x-0 bottom-0 bg-muted-sm;
}

.material .border::before {
	@apply block h-0.5 bg-primary scale-x-0 opacity-0 origin-center transition;
	content: '';
}