src_front/less/form.less
input, textarea, select, .input-field {
	.bevel();
	border: none;
	font-size: 1em;
	padding: .25em .5em;
	color: inherit;
	background-color: var(--background-color-fader);
	border-radius: var(--border-radius);
	font-family: var(--font-inter);

	&.primary {
		color: var(--color-light);
		background-color: var(--color-primary);

		&.light {
			background-color: var(--color-light);
			color: var(--color-primary);
		}
	}

	&.secondary {
		color: var(--color-light);
		background-color: var(--color-secondary);

		&.light {
			color: var(--color-secondary);
			background-color: var(--color-light);
		}
	}

	&.premium {
		color: var(--color-light);
		background-color: var(--color-premium);

		&.light {
			color: var(--color-premium);
			background-color: var(--color-light);
		}
	}

	option {
		color: var(--color-text);
		background-color: var(--background-color-secondary);
	}

	optgroup {
		color: var(--color-text);
		background-color: #008667;
	}

	&:disabled {
		cursor: auto;
		opacity: .5;
	}

	&::placeholder {
		font-style: italic;
		color: var(--color-text-fade);
	}
	&:-webkit-autofill,
	&:-webkit-autofill:hover,
	&:-webkit-autofill:active,
	&:-webkit-autofill:valid,
	&:-webkit-autofill:focus {
		color: var(--color-dark);
		background-color: var(--color-primary-extralight);
		box-shadow: none !important;
	}

	&::-webkit-scrollbar-thumb {
		border-radius:20px;
		background-color: var(--color-light);
		background-color: var(--color-primary);
	}

	//Show number +/- buttons only on hover
	&[type="number"] {
		&::-webkit-outer-spin-button,
		&::-webkit-inner-spin-button {
			display: none;
		}
		&:hover {
			&::-webkit-outer-spin-button,
			&::-webkit-inner-spin-button {
				display: inline;
			}
		}
	}
}

body.dark {
	//Calendar icon on datetime fields
	input::-webkit-calendar-picker-indicator {
		color-scheme: dark;
	}
}

button {
	font-family: var(--font-inter);
	background: none;
	border: none;
	padding: 0;
	font-size: 1em;
	cursor: pointer;
}

@supports(-webkit-appearance: none) or (-moz-appearance: none) {
	input[type='radio'] {
		appearance: none;
		height: 1em;
		width: 1em;
		outline: none;
		display: inline-block;
		margin: 0;
		cursor: pointer;
		transition: background .3s;
		border-radius: 50%;
		background: rgba(0, 0, 0, .5);
		&:checked {
			opacity: 1;
			background: var(--color-secondary);
		}
	}

	body.dark {
		input[type='radio'] {
		background: rgba(255, 255, 255, .5);
			&:checked {
				background: var(--color-secondary);
			}
		}
	}
}

.vs__dropdown-toggle {
	.bevel();
	border: none;
	background-color: var(--background-color-fader) !important;
	border-radius: var(--border-radius) !important;
	margin: 0;

	.vs__deselect {
		svg {
			fill: var(--color-primary);
		}
	}

	.vs__selected {
		color: var(--color-primary);
		font-size: 1em !important;
		word-break: break-word;
		.text:not(:first-child) {
			margin-left: .5em;
		}
	}
	.vs__search {
		font-size: 1em !important;
		&::placeholder {
			font-style: italic;
			color: var(--color-text-fadest);
		}
	}
}
.vs__open-indicator, .vs__clear, .vs__submit {
	fill: var(--color-text) !important;
}
.vs--single .vs__selected {
	color: var(--color-text) !important;
}
.vs__dropdown-menu {
	border-top: 1px solid rgba(0, 0, 0, .2) !important;
}

.vs__selected-options > .vs__search {
	margin: 0;
	&::placeholder {
		font-style: italic;
		color: var(--color-text-fade);
	}
}

.vs__dropdown-option {
	&.vs__dropdown-option--highlight {
		background-color: var(--color-secondary);
		.listIcon {
			filter: brightness(10);
		}
	}
	&>.category {
		font-weight: bold;
		font-size: 1.2em;
		color:var(--color-primary);
	}
	&>.subItem {
		padding-left: 1em;
	}
	.listIcon {
		height: 1.5em;
		max-width: 1.5em;
		padding: .25em;
		margin-right: .25em;
		vertical-align: middle;
		border-radius: .25em;
	}
	.image {
		height: 2.5em;
		max-width: 2.5em;
		vertical-align: middle;
	}
	.labelSmall {
		font-size: .8em;
		font-style: italic;
		margin-left: .5em;
	}
	.text:not(:first-child) {
		margin-left: .5em;
	}
}
