.label.svelte-ym31de {
		margin-bottom: var(--s4);
		color: var(--color-input-label);
	}

	.instructions.svelte-ym31de {
		margin-bottom: var(--s12);
		white-space: pre-wrap;
	}

	.field.svelte-ym31de {
		width: 100%;
		height: 100%;
		padding: var(--s4);

		display: flex;
		flex-wrap: wrap;
		column-gap: var(--s16);
		row-gap: var(--s16);

		color: var(--color-input-text);
		background-color: var(--color-input-background);
		border-radius: var(--border-radius);
	}

	.input.svelte-ym31de {
		flex: 1 1 40%; /* Grow, shrink, base width 0 */

		display: grid;
		grid-template-areas: 'input';
	}

	input.svelte-ym31de {
		grid-area: input;

		width: 100%;
		height: 100%;

		opacity: 0;

		cursor: pointer;
	}

	input.svelte-ym31de:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	input.svelte-ym31de::placeholder {
		color: transparent;
	}

	.input-label.svelte-ym31de {
		grid-area: input;

		width: 100%;
		height: 100%;
		padding: var(--s8) var(--s8);

		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		border-radius: var(--border-radius);
	}

	.input-label.active.svelte-ym31de {
		background-color: var(--color-blue);
		color: var(--color-white);
	}

	.input-label.icon.svelte-ym31de {
		position: relative;
		width: 40px;
		height: 32px;

		padding: var(--s8) var(--s12);

		display: grid;
		place-items: center;
	}

	.note.svelte-ym31de {
		margin-top: var(--s4);
		padding-left: var(--s4);
		opacity: 0.5;
	}