@layer form-controller {
	:root {
		--transition-delay: 150ms;
	}

	.form-controller {
		/* ------------------------------------------------------------
	   FORM ELEMENT SPACING
	   ------------------------------------------------------------ */

		.fields {
			container-type: inline-size;
			container-name: fields;
		}

		:where(.fields, .field__group, .fieldset__fields, .field__options) {
			display: flex;
			flex-direction: column;
		}

		.fields {
			row-gap: 2rem;
		}

		:where(.field__group, .fieldset__fields) {
			row-gap: 1rem;
		}

		.field__html > :first-child {
			margin-block-start: 0;
		}

		.field__html > :last-child {
			margin-block-end: 0;
		}

		.field__options {
			row-gap: 0.25rem;
		}

		/* ------------------------------------------------------------
	   FIELDSETS
	   ------------------------------------------------------------ */

		.fieldset {
			padding: 1rem;
			padding-block-start: 0.5rem;
			border: 2px solid var(--color-base--80);
			border-radius: 1rem;
		}

		.fieldset:not(:has(.fieldset__label)) {
			padding-block-start: 0.75rem;
		}

		/* ------------------------------------------------------------
	   FIELD LABELS
	   ------------------------------------------------------------ */

		.fieldset__label {
			margin-inline-start: -1.3rem;
			padding-inline-end: 1rem;
		}

		.fieldset__labeltext,
		.field__labeltext {
			font-weight: 600;
			color: var(--color-text-primary);
			line-height: 1.3;
		}

		.fieldset__labeltext {
			font-size: 1.25rem;
			letter-spacing: 0.05em;
			text-transform: uppercase;
			color: var(--color-base-10);
		}

		.field__labeltext--checkbox,
		.field__labeltext--radio {
			font-weight: normal;
		}

		.field__required-flag {
			margin-inline-start: 0.25rem;
		}

		/* ------------------------------------------------------------
	   FIELD CONTROLS
	   ------------------------------------------------------------ */

		.field__controlgroup {
			margin-block-start: 0.2rem;
		}

		.field__controlgroup :where(input, select, textarea) {
			width: 100%;
			display: block;
			box-sizing: border-box;
			padding: 0.5rem 0.75rem;
			border: none;
			border-radius: 0.5rem;
			background-color: var(--color-gray--90);
			color: var(--color-text-primary);
		}

		.field__controlgroup textarea {
			resize: vertical;
			field-sizing: content;
			min-height: 3lh;
			max-height: 10lh;
		}

		.field__control {
			font-family: inherit;
			font-size: 1rem;
			line-height: 1.3;
		}

		.field--checkbox,
		.field--radio {
			display: grid;
			grid-template-columns: auto 1fr;
			grid-template-rows: repeat(4, auto);
			align-items: start;
		}

		.field__checkbox,
		.field__radio {
			grid-row: 1 / -1;
			margin-block-start: 0.25rem;
			accent-color: var(--color-base-0);
		}

		:where(.field--checkbox, .field--radio)
			:where(.field__description, .field__hint, .field__message) {
			padding-inline-start: 0.5rem;
		}

		:where(.field--checkbox, .field--radio) .field__label {
			display: inline-block;
			width: fit-content;
			padding-inline: 0.5rem;
		}

		:where(.field--checkbox-group, .field--radio-group) .field__options {
			margin-block-start: 0.25rem;
			margin-block-end: 0.25rem;
		}

		/* ------------------------------------------------------------
	   FIELD TEXTUAL ELEMENTS
	   ------------------------------------------------------------ */

		.field__description {
			font-size: 0.9rem;
			color: var(--color-gray-70);
		}

		.field__hint {
			font-size: 0.9rem;
			color: var(--color-gray-40);
			font-style: italic;
		}

		.field__message {
			font-size: 1rem;
			color: var(--color-gray-70);
		}

		:where(.field__description, .field__hint, .field__message):empty {
			margin: 0;
			padding: 0;
		}

		:where(.field__description, .field__hint, .field__message):not(:empty) {
			margin-block-start: 0.25rem;
			line-height: 1.3;
			font-weight: 400;
		}

		.field__message:not(:empty) {
			margin-block-start: 0.5rem;
			margin-block-end: 0.75rem;
		}

		/* ------------------------------------------------------------
	   FILE INPUT LAYOUT (input[type=file] + clear button)
	   ------------------------------------------------------------ */

		.field__controlgroup:has(.field__button--clear-file) {
			display: flex;
			flex-direction: column;
			row-gap: 1rem;
		}

		.field__button--clear-file {
			align-self: end;
		}

		@container fields (width > 50ch) {
			.field__controlgroup:has(.field__button--clear-file) {
				display: grid;
				grid-template-columns: 1fr max-content;
				column-gap: 2rem;
			}

			.field__button--clear-file {
				align-self: center;
			}
		}

		.field__filelist:not(:empty) {
			padding: 1rem 1rem 0.5rem;
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
		}

		.field__filelisthead {
			font-size: 1rem;
		}

		.field__filelistitem {
			font-size: 0.9rem;
		}

		/* ------------------------------------------------------------
	   FILE SELECTOR BUTTON
	   ------------------------------------------------------------ */

		.field__input::file-selector-button {
			font: inherit;
			padding: 0.5rem 1rem;
			border: none;
			border-radius: 0.75rem;
			cursor: pointer;
			margin-inline-end: 1rem;

			background-color: var(--color-gray--70);
			color: var(--color-text-primary);
		}

		.field__input::file-selector-button:hover {
			background-color: var(--color-gray--60);
		}

		.field__input::file-selector-button:active {
			background-color: var(--color-gray--40);
		}

		/* ------------------------------------------------------------
	   BUTTONS
	   ------------------------------------------------------------ */

		.field__button {
			display: inline-block;
			padding: 0.5rem 1rem;
			border: none;
			border-radius: 0.75rem;
			box-sizing: border-box;
			cursor: pointer;
			box-shadow: 0 0 0 0 transparent;
			font: inherit;
		}

		/* Primary buttons */

		.field__button--primary {
			background-color: var(--color-base-0);
			color: var(--color-ue-white);
		}

		.field__button--primary:hover {
			background-color: var(--color-base-10);
		}

		.field__button--primary:active {
			background-color: var(--color-base-20);
			transform: translateY(1px);
		}

		/* Secondary buttons */

		.field__button--secondary {
			background-color: white;
			color: var(--color-base-0);
		}

		.field__button--secondary:hover {
			background-color: var(--color-base--90);
		}

		.field__button--secondary:active {
			background-color: var(--color-base--80);
			transform: translateY(1px);
		}

		/* Disabled */

		.field__button:disabled,
		.field__button:disabled:hover,
		.field__button:disabled:active,
		.field__button--primary:disabled,
		.field__button--secondary:disabled {
			background-color: var(--color-gray--60);
			color: var(--color-gray-0);
			cursor: not-allowed;
			transform: none;
		}

		/* ------------------------------------------------------------
	   FOCUS OUTLINES
	   ------------------------------------------------------------ */

		:where(
			.field__input,
			.field__checkbox,
			.field__radio,
			.field__select,
			.field__textarea
		) {
			transition:
				box-shadow var(--transition-delay) ease,
				border-color var(--transition-delay) ease,
				background-color var(--transition-delay) ease,
				color var(--transition-delay) ease;
		}

		:where(.field__button) {
			transition:
				box-shadow var(--transition-delay) ease,
				border-color var(--transition-delay) ease,
				background-color var(--transition-delay) ease,
				color var(--transition-delay) ease;
		}

		:where(
			.field__input,
			.field__checkbox,
			.field__radio,
			.field__select,
			.field__textarea
		):focus {
			outline: none;
			box-shadow:
				0 0 0 2px var(--color-ue-white),
				0 0 0 4px var(--color-base--30);
		}

		:where(.field__button):focus {
			outline: none;
			box-shadow:
				0 0 0 2px var(--color-ue-white),
				0 0 0 4px var(--color-base--30);
		}

		.fieldset {
			transition: border-color var(--transition-delay) ease;
		}

		.fieldset__labeltext {
			transition: color var(--transition-delay) ease;
		}

		.fieldset:focus-within {
			border-color: var(--color-base--30);

			.fieldset__labeltext {
				color: var(--color-base-30);
			}
		}

		/* ------------------------------------------------------------
	   MISC
	   ------------------------------------------------------------ */
		:where(.field__input, .field__textarea)::selection {
			color: var(--color-ue-white);
			background-color: var(--color-base--30);
		}

		.service-error {
			background-color: var(--color-base--90);
			padding: 1rem;
			border: 4px solid red;
			border-radius: 1rem;
		}

		.service-error__header :first-child {
			margin-block-start: 0;
		}

		.service-error__info {
			margin-block-start: 1rem;
		}

		.service-error__message {
			font-weight: bold;
		}

		.service-error__detail {
			ul {
				margin-block: 0;
				padding-inline: 2rem;
				display: flex;
				flex-direction: column;
				gap: 0.25rem;
			}
		}

		.service-error__type {
			font-size: 0.8rem;
		}

		.service-error__component {
			font-size: 0.8rem;
		}

		.service-error__message + .service-error__detail {
			margin-block-start: 0.5rem;
		}

		:where(.service-error__message, .service-error__detail)
			+ :where(.service-error__type, .service-error__component):not(
				:empty
			) {
			margin-block-start: 1rem;
		}
	}
}