/* ERROR */

.block_error {
	color: #ff3126;
}

/* HELP */

.block_help {
	display: none;
	width: calc(100% + var(--margin)) !important;
	padding-top: var(--margin-half);
	padding-left: var(--margin);
	position: absolute;
	top: auto !important;
	left: calc(-1 * var(--margin)) !important;
	bottom: calc(100% + var(--margin-half));
	background-color: white;
	border: 1px solid;
	border-bottom: none;
	border-right: none;
}

*:hover + .block_help,
*:focus-within + .block_help {
	display: block;
}

/* INPUTS */

.block_input {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
}

.block_input > input,
.block_input > select {
	-webkit-appearance: none;
	appearance: none;
	flex: 1 1 auto;
	width: 100%;
	/* margin: -0.5px 0; */
	padding: var(--margin-quarter) 0.75em;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	background-color: #eee;
	border: 1px solid transparent;
	border-radius: 0;
}

.block_input > input[data-width="50%"],
.block_input > select[data-width="50%"] {
	width: calc(50% - 1px);
}

.block_input > select {
	cursor: pointer;
}

.block_input > input:hover,
.block_input > input:focus,
.block_input > select:hover,
.block_input > select:focus {
	background-color: transparent;
	border-color: #ddd;
}

.block_input > input:focus,
.block_input > select:focus {
	outline: none;
}

.block_input > input::placeholder {
	color: #707070;
}

.block_input > select:invalid {
	color: #707070;
}

/* OPTIONS */

.block_options {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.block_option {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--margin);
	justify-content: space-between;
	pointer-events: none;
}

/* .block_option > a {
	width: 1em;
	text-align: center;
}

.block_option > a:first-of-type {
	margin-right: var(--margin);
}

.block_option > a:hover {
	font-weight: 700;
}

.block_option > a ~ small {
	margin-left: var(--margin);
} */

.block_option > input {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 1em;
	height: 1em;
	border: 1px solid;
	cursor: pointer;
	pointer-events: all;
}

.block_option > input:checked {
	background-color: black;
}

.block_option:hover > input,
.block_option > input:focus-visible {
	border-width: 2px;
}

.block_option > a[class*="cut-"],
.block_option > label,
.block_option > span[class*="cut-"] {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	white-space: nowrap;
	-webkit-user-select: none;
	user-select: none;
}

.block_option > label,
.block_option > a {
	cursor: pointer;
	pointer-events: all;
}

.block_option > a:not([class*="cut-"]):hover,
.block_option > a:not([class*="cut-"]):focus-visible {
	font-weight: 700;
}

.block_option:hover > label,
.block_option > input:focus-visible + label {
	font-weight: 700;
}

.block_option > input[name="tier"] + label {
	font-feature-settings: "tnum" 1;
}

.block_option > a[class*="cut-"],
.block_option > label > span[class*="cut-"],
.block_option > span[class*="cut-"] {
	font-size: var(--fs);
	text-align: left;
}

.block_option > small {
	margin-left: auto;
	font-feature-settings: "tnum" 1;
	-webkit-user-select: none;
	user-select: none;
}

.block_option > small > s {
	margin-right: 0.25em;
	font-weight: normal;
}

/* SELECT */

.block_select {
	position: relative;
	z-index: 10;
}

.block_select::before {
	content: "\2303";
	display: block;
	width: 1em;
	position: absolute;
	left: 0;
	transform: rotate(180deg);
	text-align: center;
}

.block_select:hover::before,
.block_select:focus-within::before {
	display: none;
}

.block_select::after {
	content: "\00a0";
}

.block_select > div {
	width: 100%;
	position: absolute;
	left: 0;
}

.block_select > div::before {
	content: "";
	display: none;
	position: absolute;
	top: calc(1em + 0.5rem + var(--margin-half));
	right: 0;
	bottom: calc(-1 * var(--margin) + 0.25em + 1px);
	left: calc(-1 * var(--margin));
	z-index: 0;
	background-color: white;
	border: 1px solid;
	border-top: none;
	border-right: none;
}

.block_select:hover > div::before,
.block_select:focus-within > div::before {
	display: block;
}

.block_select > div > .block_option {
	padding-top: 0;
	margin-top: 0;
	position: relative;
	z-index: 1;
	border: none;
}

.block_select > div > .block_option > input,
.block_select > div > .block_option > label {
	display: none;
}

.block_select:hover > div > .block_option > input,
.block_select:focus-within > div > .block_option > input,
.block_select > div > .block_option > input:checked {
	display: block;
}

.block_select:hover > div > .block_option > label,
.block_select:focus-within > div > .block_option > label,
.block_select > div > .block_option > input:checked + label {
	display: flex;
}

/* SUBMIT */

.block_submit {
	display: flex;
	justify-content: flex-end;
	height: calc(2.1 * var(--fs));
}

.block_submit > .sticker {
	top: 50% !important;
}

.block_submit > .sticker + .sticker {
	margin-left: var(--margin-half);
}

/* SIBLINGS */

:is(
		p,
		.block_error,
		.block_help,
		.block_input,
		.block_option,
		.block_options,
		.block_select
	)
	+ :is(
		p,
		.block_error,
		.block_input,
		.block_option,
		.block_options,
		.block_select
	) {
	margin-top: var(--margin-half);
	padding-top: var(--margin-half);
	border-top: 1px dotted black; /* 0.5px */
}

:is(
		p,
		.block_error,
		.block_help,
		.block_input,
		.block_option,
		.block_options,
		.block_select
	)
	+ :is(
		.block_input--noborder,
		.block_option--noborder,
		.block_options--noborder,
		.block_select--noborder
	) {
	margin-top: 0;
	border-top: none;
}

.block_options > .block_help + .block_option {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* VISIBILITY */

[data-source="toggle"]:has(input#toggle:checked) ~ [data-hide="toggle"],
[data-source="toggle"]:has(input#toggle:not(:checked)) ~ [data-show="toggle"] {
	display: none;
}

[data-source="toggle"]:has(input#toggle:checked) ~ [data-show="toggle"] {
	display: block;
}