$offset: -3.3rem;

.bui-form-field-bound,
.bui-form-field-detach {
	padding-top: 24px;

	--mat-mdc-form-field-floating-label-scale: 1 !important;
	--mat-mdc-form-field-floating-label-translate-y: #{$offset};

	.mdc-floating-label {
		--mat-mdc-form-field-label-transform: translateY(var(--mat-mdc-form-field-floating-label-translate-y))
			translateX(-4px) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75)) !important;
		[dir='rtl'] & {
			--mat-mdc-form-field-label-transform: translateY(var(--mat-mdc-form-field-floating-label-translate-y))
				translateX(4px) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75)) !important;
		}
		transition: none !important;
	}

	.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-self: stretch;
	}
}

.bui-form-field-bound {
	&.mat-focused {
		--mat-mdc-form-field-floating-label-translate-y: calc(#{$offset} - 1px);
	}

	.mat-mdc-form-field-hint-wrapper,
	.mat-mdc-form-field-error-wrapper {
		padding-left: initial;
		padding-inline-start: 4px;
	}

	.mat-mdc-form-field-infix {
		min-height: 48px;
	}

	.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
		width: 4px;
	}

	.mdc-notched-outline--notched .mdc-notched-outline__notch {
		border-top-width: 1px;
		border-top-style: solid;
	}

	.mdc-text-field--focused .mdc-notched-outline--notched .mdc-notched-outline__notch {
		border-top-width: 2px;
	}

	.mat-mdc-form-field-icon-prefix {
		& > .mat-icon {
			padding: 0 6px 0 12px;
		}
		& > span,
		& > div {
			padding-inline-start: 6px;
		}
	}

	.mat-mdc-form-field-icon-suffix {
		& > .mat-icon {
			padding: 0 12px 0 6px;
		}
		& > span,
		& > div {
			padding-inline-end: 6px;
		}
	}
}

.bui-form-field-detach {
	.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
		padding-top: 0px;
		padding-bottom: 0px;
	}

	.mat-mdc-form-field-hint-wrapper,
	.mat-mdc-form-field-error-wrapper {
		padding-inline-start: 0;
	}

	.mat-mdc-form-field-infix {
		min-height: 40px;
	}

	.mdc-text-field--outlined .mdc-notched-outline {
		.mdc-notched-outline__leading,
		.mdc-notched-outline__trailing,
		.mdc-notched-outline__notch {
			border: none !important;
		}

		.mdc-notched-outline__leading {
			width: 0;
		}
	}

	.mat-mdc-text-field-wrapper.mdc-text-field--outlined {
		padding-inline-start: 0;
	}
}