/* Forms */
form {
	display: grid;
	grid-template-columns: var(--columns-2);
	gap: var(--gap);
	margin-block: var(--gap);
}
fieldset {
	border: none;
}
form * {
	max-width: calc(100dvw - var(--gap) * 4) !important;
}

form .full {
	grid-column: 1 / -1;
}

form label {
	font-weight: 100;
}
form input + p {
	font-weight: 100;
	font-size: .9em;
}
select,
textarea,
input[type=search],
input[type=file],
input[type=text],
input[type=password],
input[type=email],
input[type=date],
input[type=number] {
	appearance: none;
	background: white;
	width: 100%;
	display: block;
	border: 1px solid rgb(var(--fc));
	border-radius: 0;
	padding: calc(var(--gap) / 3) var(--gap);
	outline: none;
	height: calc(var(--fontsize) + calc(var(--gap) * 1.5));
}
input[type=number]:not(:in-range) {
	background: rgba(var(--red),.5);
	border-color: rgb(var(--red));
}
input[type=number]::-webkit-inner-spin-button {
	display: none;
}
input[type=number] {
	-moz-appearance: textfield; 
}
label:has(+ input:required):after {
	content: " *";
}

select {
	background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>');
	background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}

textarea {
	height: auto;
}

[type="checkbox"] {
  position: relative;
  left: calc(var(--fontsize) * 2);
  top: 0px;
  z-index: 0;
  -webkit-appearance: none;
}
[type="checkbox"] + label {
  position: relative;
  display: block;
  cursor: pointer;
  font-size: var(--fontsize);
  padding-left: calc(var(--fontsize) * 2 + 10px);
  position: relative;
  margin-top: calc(var(--fontsize) * -1);
}
[type="checkbox"] + label:before {
  width: calc(var(--fontsize) * 2);
  height: var(--fontsize);
  border-radius: var(--fontsize);
  border: 2px solid rgb(var(--fc));
  background-color: rgba(var(--red), .1);
  content: "";
  margin-right: calc(var(--fontsize) * 1);
  transition: background-color 0.5s linear;
  z-index: 5;
  position: absolute;
  left: 0px;
}
[type="checkbox"] + label:after {
  width: calc(var(--fontsize) * 1);
  height: calc(var(--fontsize) * 1);
  border-radius: calc(var(--fontsize) * 1);
  background-color: rgb(var(--bg));
  content: "";
  transition: margin 0.1s linear;
  box-shadow: 0px 0px 5px rgb(var(--bga));
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 10;
}
[type="checkbox"]:checked + label:before {
  background-color: rgba(var(--green), .1);
}
[type="checkbox"]:checked + label:after {
  	margin: 0 0 0 calc(var(--fontsize) * 1);
	background-color: rgb(var(--green));
}

*:has(> [type="checkbox"]) {
	display: flex;
	gap: var(--gap);
	align-content: flex-end;
	align-items: flex-end;
	justify-content: flex-start;
}


.valid {
	color: rgb(var(--green));
}
.valid:before {
	position: relative;
	left: -5px;
	content: "✔";
}
.invalid {
	color: rgb(var(--red));
}
.invalid:before {
	position: relative;
	left: -5px;
	content: "✖";
}

.notify {
	padding: var(--gap);
	border: 2px solid rgb(var(--red));
	background: rgba(var(--red),.5);
	&.success {
		border-color: rgb(var(--green));
		background-color: rgba(var(--green), .5);
	}
}