fieldset {
	margin: 1em 0;
	border: 0.125em solid var(--border);
	border-radius: 0.5em;
	background-color: var(--bg-dark);
}
legend {
	/* 0.125 / 1.5 */
	border: 0.083em solid var(--border);
	border-radius: 0.833em;
	padding: 0.1em 0.3em;
	background-color:#fff;
	font-size: 1.5em;
	line-height: 1.3em;
}
.number {
	display: inline-flex;
    border-radius: 0.833em;  /* half of 1.666em */
    border: 0.083em solid var(--border);
	width: 1.666em;
	height: 1.666em;
	line-height: 1.666em;
	text-align: center;
	justify-content: center;
}
legend .number {
	margin: -0.183em 0 -0.183em -0.383em;
	/* 2 * 0.083 + 2 * 0.1 + 1.3 */
	vertical-align: bottom;
}
ul.errorlist {
	color:red;
	margin:2em 0 1em;
	padding:0 0 0 1.2em;
}

.input {
    display: inline-block;
    color: unset;
    text-decoration: unset;
}
input, button, select, textarea, .input {
	border: 0.125em solid var(--border);
	background-color: var(--bg);
	transition: border .4s;
	padding: 0.125em 0.25em;
	border-radius: 0.5em;
	font-size: inherit;
}
:is(input, button, select, textarea):focus {
	border-color: var(--primary);
}
textarea {
	padding: 0.125em;
}

:is([type=checkbox], [type=radio]) {
	appearance: none;
	width: 1em;
	height: 1em;
	padding: 0;
	margin: 0;
	vertical-align: -0.125em;  /* border */
	position: relative;
}
input[type=radio] {
	border-radius: 50%;
}
/* we don't add "input" to reduce the specificity */
[type=radio]::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60%;
	height: 60%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: var(--primary);
	transition: width 0.15s, height 0.15s;
}
[type=radio]:not(:checked)::before {
	width: 0;
	height: 0;
}
[type=checkbox] {
	border-radius: 0.25em;
}
:is([type=checkbox], .input--tick, .input--cross)::before,
:is([type=checkbox], .input--tick, .input--cross)::after {
	content: "";
	position: absolute;
	width: 0.1875em;
	border-radius: 0.09375rem;
	background-color: var(--primary);
	transition: all .4s;
}

/* position the elements inside the checkbox */
[type=checkbox], .input--tick, .input--cross, .input--yesno {
	--pos: 0.5;
}
:is([type=checkbox], .input--tick, .input--cross, .input--yesno)::before,
:is([type=checkbox], .input--tick, .input--cross, .input--yesno)::after {
	left: calc(var(--left-pos) + var(--pos) * (100% - var(--left-pos) - var(--right-pos)));
}

/* tick (default style for a checked checkbox, style for a checked yes-no checkbox) */
/* we don't add "input" to reduce the specificity */
/*
Here is the tick:
             __
            /  /
           /  /
 __       /  /
\  \     /  /
 \  \   /  /
  \  \_/  /
   \     /
    \   /
     \_/
<----><-------->
   a       b
    /   \ this diagonal is 0.4
   / and that one is 0.7
a = 0.4 / sqrt(2) = 0.28284
b = 0.7 / sqrt(2) = 0.49497
*/
:is([type=checkbox], .input--tick, .input--yesno:checked)::before,
:is([type=checkbox], .input--tick, .input--yesno:checked)::after {
	--left-pos: 0.28284em;  /* first tick: a */
	--right-pos: 0.49497em;  /* second tick: b */
	top: unset;
	bottom: calc(50% - var(--right-pos) / 2);
	transform-origin: 50% calc(100% - 0.09375em);
}
/* translateX(-50%) is necessary because the transform-origin x is 50% */
:is([type=checkbox], .input--tick, .input--yesno:checked)::before {
	height: 0.4em;
	transform: translateX(-50%) rotate(-45deg);
}
:is([type=checkbox], .input--tick, .input--yesno:checked)::after {
	height: 0.7em;
	transform: translateX(-50%) rotate(45deg);
}
/*
for everything except:
- radio buttons (both width and height change)
- yes-no checkboxes (there is always everything displayed)
- indeterminate checkboxes (they are unchecked but we want to display the horizontal line)
hide when it's not checked
*/
:is([type=checkbox], .input--tick, .input--cross):not(.input--yesno):not(:checked):not([type=checkbox]:indeterminate)::before,
:is([type=checkbox], .input--tick, .input--cross):not(.input--yesno):not(:checked):not([type=checkbox]:indeterminate)::after {
	height: 0;
}

/* indeterminate */
input[type=checkbox]:indeterminate::before,
input[type=checkbox]:indeterminate::after {
	left: 50%;
	bottom: 50%;
	transform-origin: 50% 50%;
	transform: translate(-50%, 50%);
}
input[type=checkbox]:indeterminate::before {
	transform: translate(-50%, 50%) rotate(-90deg);
}
input[type=checkbox]:indeterminate::after {
	transform: translate(-50%, 50%) rotate(90deg);
}

/* cross (style for an unchecked yes-no checkbox) */
:is(.input--cross, .input--yesno:not(:checked))::before,
:is(.input--cross, .input--yesno:not(:checked))::after {
	height: 0.7em;
	--left-pos: calc(0.24749em + 0.125em);  /* 0.7 / sqrt(2) / 2 + border */
	--right-pos: var(--left-pos);
	top: unset;  /* for the radio inputs */
	bottom: 50%;
	transform: translate(-50%, 50%);
	transform-origin: 50% 50%;
}
:is(.input--cross:checked, .input--yesno:not(:checked))::before {
	transform: translate(-50%, 50%) rotate(-45deg);
}
:is(.input--cross:checked, .input--yesno:not(:checked))::after {
	transform: translate(-50%, 50%) rotate(45deg);
}

/* toggle */
.input--toggle {
	border-radius: 0.5em;
	width: 2em;
	/* red ball background */
	--color: var(--warning);
	/* sqrt(2) / 2 */
	background-image: radial-gradient(circle at center, var(--color) 0% 70.7%, transparent 70.7%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0.75em;  /* height of the inside */
	transition: background-position 0.4s;
}
.input--toggle::before, .input--toggle::after {
	background-color: var(--bg-light) !important;
}
.input--toggle:not(:checked):not(:indeterminate) {
	--color: var(--danger);
	--pos: 0;
	background-position: left;
}
.input--toggle:checked:not(:indeterminate) {
	--color: var(--success);
	--pos: 1;
	background-position: right;
}

/* colors for yes-no checkboxes and labels */
:is(.input--yes, .input--yesno:checked)::before,
:is(.input--yes, .input--yesno:checked)::after {
	background-color: var(--success);
}
:is(.input--no, .input--yesno:not(:checked))::before,
:is(.input--no, .input--yesno:not(:checked))::after {
	background-color: var(--danger);
}
:is(.input--yes, .input--yesno:checked) + label {
	color: var(--success);
}
:is(.input--no, .input--yesno:not(:checked)) + label {
	color: var(--danger);
}

:is(input, button, select, textarea):disabled {
	filter: grayscale(100%);
}
:is(input, button, select, textarea):focus {
	outline: 0px;
}
:is(input, button, select, textarea):invalid {
	border-color: var(--danger);
}
select:not([multiple]) {
	appearance: none;
	background-position: right 0.15em center;
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M5 6l5 5 5-5 2 1-7 7-7-7 2-1z" fill="%23000"/></svg>');
	padding-right: 1.5em;
	position: relative;
}
input[type=number] {
	appearance: textfield;
}
input::-webkit-inner-spin-button {
	display: none;
}
.input__button, [type=submit], [type=button], button:not(.swal-button) {
	cursor: pointer;
	padding: 0.25em 0.5em;
	background-color: var(--primary);
	color: var(--bg-dark);
}
:is(.input__button, [type=submit], [type=button], button:not(.swal-button)):hover {
	background-color: var(--secondary);
}
textarea {
	display: block;
	margin-top: 0.5em;
}

.form__inline {
	margin: 0;
	display: inline;
}
.input__link {
	color: var(--info);
	text-decoration: underline;
	cursor: pointer;
	border: none;
	padding: 0;
	background: none !important;
	border-radius: 0;
	font-size: inherit;
	height: unset;
}