label { display: block; }

input[type="text"], 
input[type="password"], 
input[type="email"], 
textarea {
	min-width: 0;
	max-width: 100%;
	font-size: 0.97em;
	border: 1px dotted;
	border-radius: 0.2em;
}
label + :is(input[type="text"], input[type="password"], input[type="email"], textarea) { margin-top: 0.5em; }

input[type="text"], 
input[type="email"], 
input[type="password"] {
	width: 100%;
	max-width: 20em;
	padding: 0.5em 0.7em;
}

textarea {
	width: 100%;
	resize: none;
	padding: 1em;
	line-height: 1.5em;
}

button, .Button {
	--btn-color: var(--fg);
	display: block;
	cursor: pointer;
	color: var(--bg);
	line-height: 1em;
	font-weight: 500;
	padding: 0.7em 1em;
	white-space: nowrap;
	border-radius: 0.2rem;
	text-decoration: none;
	border: 1px dotted #00000055;
	background-color: var(--btn-color);
}

button[type="submit"] { --btn-color: var(--green); }
:is(button, .Button).mDanger { --btn-color: var(--red); }

button[disabled]:not(.sLoading) {
	cursor: not-allowed;
	--btn-color: var(--gray);
}
button[disabled].sLoading { 
	opacity: 0.7;
	cursor: progress; 
}

:is(button, .Button).mTiny {
	padding: 0.3em;
	font-size: 0.8em;
	font-weight: 400;
	color: var(--btn-color);
	background-color: transparent;
	border: 1px solid color-mix(in srgb, var(--btn-color) 30%, transparent);
}