[data-role*='textbox'] {
	&:not([loaded]) {
		.input {
			input {
				color: transparent;
			}
		}
	}
}
[data-role*='textbox'] {
	position: relative;

	input::-webkit-input-placeholder,
	textarea::-webkit-input-placeholder {
		color: transparent;
	}

	input:-moz-placeholder,
	textarea:-moz-placeholder {
		color: transparent;
	}

	input:-ms-input-placeholder,
	textarea:-ms-input-placeholder {
		color: transparent;
	}

	.input,
	.textarea {
		> label {
			padding: 0;
			pointer-events: none;
			margin: 0;
			position: absolute;
			transform: translateY(-50%);
			border: none;
			z-index: 1;
			opacity: 0.8;
			text-align: left;
			@include singleline();
			transition: all 0.2s ease-in-out;
			pointer-events: none;
		}
	}

	.input {
		> label {
			left: $g1;
			right: auto;
			top: 50%;
			width: calc(100% - #{$g1});
		}

		> input {
			padding-top: calc(#{$g0} + #{$font-size-5});
			padding-bottom: $g0;
		}

		&.small {
			&.input {
				> input {
					padding-top: $font-size-5;
					padding-bottom: 0;
				}

				&.right {
					> input {
						padding-right: $comp-size-3;
					}
				}

				&.left {
					> label {
						left: $comp-size-3;
					}

					> input {
						padding-left: $comp-size-3;
					}
				}
			}
		}

		&.left,
		&.right {
			> label {
				width: calc(100% - #{$comp-size-4});
			}
		}

		&.right.left {
			> label {
				width: calc(100% - #{$comp-size-4} * 2);
			}
		}

		&.right {
			> input {
				padding-right: $comp-size-4;
			}
		}

		&.left {
			> label {
				left: $comp-size-4;
			}

			> input {
				padding-left: $comp-size-4;
			}
		}
	}

	.textarea {
		background-color: $color-bg;
		border: 1px solid $color-l1;

		label {
			padding: 0 $g0;
			left: 0;
			right: 0;
			top: $g3;
		}

		textarea {
			border: none;
			margin: $g3 0 $g0;
			padding: 0 $g1;
			min-height: 6.8rem;
			overflow: hidden;
			width: 100%;
		}
	}

	&.focus {
		input,
		textarea {
			color: inherit;
		}

		.input,
		.textarea {
			> label {
				top: $gxs;
				right: auto;
				transform: translateY(0);
				transform-origin: left;
				font-size: $font-size-7;
			}

			&.large {
				> label {
					top: $g0;
				}
			}
		}
	}
}