.form .input {
	position: relative;
}

input::placeholder {
	color: transparent;
}

.form .input textarea,
.form .input input {
	width: 100%;
	padding: 1rem 0.5rem .5rem;
	margin-bottom: 2rem;
	border: none;
	border-bottom: 1px solid #000;
	border-top-left-radius: .25rem;
	border-top-right-radius: .25rem;
	outline: none;
	background: transparent;
}
.form .input textarea {
	min-height: 5rem;
	field-sizing: normal; /* used to be `form-sizing` but changed to this */
}
.form .input textarea:focus,
.form .input input:focus {
	background-color: #00000008;
}



.form .input label:has(+ input, +textarea) {
	position: absolute;
	top:0;
	left: 0;
	padding: 1rem 0;
	pointer-events: none;
	transition: .5s;
}

.form .input label:has(+ input:focus),
.form .input label:has(+ input:not(:placeholder-shown)),
.form .input label:has(+ input:focus:not(:placeholder-shown)),
.form .input label:has(+ textarea:focus),
.form .input label:has(+ textarea:not(:placeholder-shown)),
.form .input label:has(+ textarea:focus:not(:placeholder-shown)) {
	top: -1.8rem;
	left: 0;
	color: #444;
	font-size: .75rem;
}


.form .form-control .error {
	border-color: #800;
}


.form-control span.error {
	position: relative;
	top: -1.9rem;
	font-size: .9rem;
	color: #800;
	display: inline-block;
	width: 100%;
	text-align: right;
}





.form .form-check label {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: 2rem;
	font-size: .95rem;
}

.form .form-check input {
	width: unset;
	margin: unset;
	border: unset;
	padding: unset;
}

.form .form-check input[type="checkbox"],
.form .form-check input[type="radio"] {
	-webkit-appearance:none;
	appearance:none;
	position:relative;
	display:inline-block;
	line-height:1em;
	height:1em;
	width:1em;
	vertical-align:top;
	text-align:center;
	border: 0.0625em solid #666;
	border-radius: 0.25em;
	transition: all 0.5s;
	cursor:pointer;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
	box-shadow: 0 0 2px 1px #000;
}

input[type="checkbox"]:before,
input[type="radio"]:before {
	content:"";
	position:relative;
	display:block;
	transition:all 0.5s;
}

input[type="checkbox"]:not(.switch):before {
	content:"\2714";
	top:-0.1em;
	left:0.1em;
	color:#333;
	transform:scale(0);
	transform-origin:50% 65%;
}

input[type="checkbox"]:not(.switch):checked {
	/*background:#CFC;*/
}

input[type="checkbox"]:not(.switch):checked:before {
	transform:scale(1.25);
}

input[type="checkbox"].alternate:before {
	content:"\1F5D9";
	top:-0.1125em;
	left:-0.0625em;
	color:#F00;
	transform:scale(0);
}

input[type="checkbox"].alternate:checked {
	background:#FCC;
}

input[type="checkbox"].alternate:checked:before {
	transform:scale(0.8);
}

input[type="checkbox"].switch {
	width:1.5em;
	background:#FCC;
	border:0.125em solid #C00;
	border-radius:1em;
}

input[type="checkbox"].switch:before {
	position:absolute;
	left:0;
	top:0;
	width:0.75em;
	height:0.75em;
	background:#C00;
	border:0.125em solid #FCC;
	border-radius:50%;
}

input[type="checkbox"].switch:checked {
	background:#8F8;
	border-color:#0A0;
}

input[type="checkbox"].switch:checked:before {
	left:0.5em;
	background:#0A0;
	border-color:#8F8;
}

input[type="radio"] {
	padding:0.125em;
	border-width:0.125em;
	border-radius:50%;
	background:#FFF;
}

input[type="radio"]:before {
	width:100%;
	height:100%;
	border-radius:50%;
	background:#06C;
	transform:scale(0);
}

input[type="radio"]:checked:before {
	transform:scale(1);
}







.form-control:has(textarea) {
	/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
	display: grid;
}
.form-control:has(textarea)::after {
	/* Note the weird space! Needed to preventy jumpy behavior */
	content: attr(data-replicated-value) " ";

	/* This is how textarea text behaves */
	white-space: pre-wrap;

	/* Hidden from view, clicks, and screen readers */
	visibility: hidden;
}
.form-control:has(textarea) > textarea {
	/* You could leave this, but after a user resizes, then it ruins the auto sizing */
	resize: none;

	/* Firefox shows scrollbar on growth, you can hide like this. */
	overflow: hidden;
}
.form-control:has(textarea) > textarea,
.form-control:has(textarea)::after {
	/* Identical styling required!! */
	border: 1px solid black;
	font: inherit;
	padding: 1rem 0.5rem .5rem;
	margin-bottom: 2rem;
	/* Place on top of each other */
	grid-area: 1 / 1 / 2 / 2;
}

.form .submit {
	text-align: center;
}
.form .submit button {
	border: 1px solid #000;
	border-radius: 3rem;
	padding: .5rem 3rem;
	cursor: pointer;
	background-color: #000;
	color: #eee;
	transition: all .2s ease-in-out;

	&:hover {
		background-color: #0001;
		color: #000;
	}
}