@use 'sass:math';

.c-forms__label,
.c-forms__hint,
.c-forms__error,
.c-forms__legend {
	display: block;
}

.c-forms__hint,
.c-forms__error {
	font-weight: normal;
}

.c-forms__input-container {
	position: relative;
}

.c-forms__fieldset,
.c-forms__error-summary,
.c-forms__field,
.c-forms__field * {
	line-height: $global-forms-line-height;
}

.c-forms__field,
.c-forms__error-summary {
	font-size: $global-forms-input-font-size;
}

.c-forms__field small {
	font-size: inherit;
}

.c-forms__fieldset,
.c-forms__legend {
	padding: 0;
	border: 0;
}

.c-forms__error-summary,
.c-forms__input-container,
.c-forms__field {
	max-width: $global-forms-input-width-maximum;
}

.c-forms__inline-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--global-form-inline-gap, #{$global-forms-input-padding-inline});
}

.c-forms__inline-fields--nowrap {
	flex-wrap: nowrap;
}

.c-forms__inline-fields .c-forms__field--globalFormText {
	/* ↓ Make it max out the available space with a super high value */
	flex-grow: 666;
}

.c-forms__inline-fields .c-forms__input {
	height: 100%;
}

.c-forms__pictographic-radios {
	display: flex;
	flex-direction: column;
	gap: $global-forms-pictographic-radio-spacing;
	flex-wrap: wrap;
}

@include media-query('xs') {
	.c-forms__pictographic-radios {
		flex-direction: row;
	}

	.c-forms__pictographic-radios .c-forms__label + .c-forms__label {
		margin-top: 0;
	}
}

* + .c-forms__error-summary,
* + .c-forms__fieldset,
* + .c-forms__field {
	margin-top: $global-forms-field-stack-spacing;
}

.c-forms__inline-fields * {
	margin: 0;
}

.c-forms__field .u-visually-hidden + * {
	margin-top: 0;
}

.c-forms__legend * {
	margin: 0;
}

.c-forms__input {
	box-sizing: border-box;
	border: $global-forms-input-border-width solid;
	color: $global-forms-input-font-color;
	width: 100%;
	padding: $global-forms-input-padding-block $global-forms-input-padding-inline;
	background-color: $global-forms-input-background-color;
	font-weight: $global-forms-input-font-weight;
}

*+.c-forms__input,
*+.c-forms__input-container {
	margin-top: $global-forms-input-stack-spacing;
}

.c-forms__input:focus {
	outline: 3px solid $global-forms-input-focus-outline-color;
}

.c-forms__input[invalid] {
	border-color: $global-forms-message-color-error;
	border-width: #{calc($global-forms-input-border-width * 2)};
}

.c-forms__input[disabled] {
	cursor: not-allowed;
	border-color: $global-forms-input-border-color-disabled;
}

.c-forms__label {
	font-size: $global-forms-label-font-size;
	font-weight: $global-forms-label-font-weight;
	color: $global-forms-label-color;
	padding: 0;
}

.c-forms__label + .c-forms__label {
	margin-top: $global-forms-input-stack-spacing;
}

.c-forms__hint {
	font-weight: $global-forms-hint-font-weight;
	margin-top: $global-forms-input-stack-spacing;
	color: $global-forms-hint-color;
}

.c-forms__error {
	color: $global-forms-message-color-error;
	display: flex;
	align-items: flex-start;
}

label+.c-forms__error,
.c-forms__error+label {
	margin-top: $global-forms-input-stack-spacing;
}

.c-forms__error .c-forms__icon {
	color: $global-forms-message-color-error;
}

.c-forms__icon svg {
	height: $global-forms-message-icon-size;
	width: $global-forms-message-icon-size;
	vertical-align: calc((#{$global-forms-input-padding-inline} / 8) * -1);
	overflow: visible;
	pointer-events: none;
}

.c-forms__input--select {
	cursor: pointer;
	appearance: none;
	padding-right: #{$global-forms-input-padding-inline * 3};
}

.c-forms__input-container--select .c-forms__icon {
	position: absolute;
	right: $global-forms-input-padding-inline;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
}

.c-forms__input--radio,
.c-forms__input--checkbox,
.c-form__label--visually-hidden {
	/* hide visually, not to assistive tech */
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.c-forms__label--inline {
	display: flex;
	align-items: center;
	font-weight: $global-forms-label-inline-font-weight;
	cursor: pointer;
	padding: 0;
}

.c-forms__label--inline::before {
	content: '';
	flex-shrink: 0;
	width: $global-forms-checkbox-size;
	height: $global-forms-checkbox-size;
	background-color: $global-forms-input-background-color;
	border: #{calc($global-forms-checkbox-border-size)} solid $global-forms-checkbox-border-color;
	margin-right: $global-forms-checkbox-spacing;
}

.c-forms__label--pictographic-radio {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: $global-forms-input-padding-inline;
	font-weight: $global-forms-label-inline-font-weight;
	cursor: pointer;
}

@include media-query('xs') {
	.c-forms__label--pictographic-radio {
		flex-direction: column;
		justify-content: space-between;
	}
}

.c-forms__label--pictographic-radio svg {
	box-sizing: content-box;
	flex: 0 0 auto;
	width: var(--forms--pictographic-radio-icon-size, $global-forms-pictographic-radio-icon-size);
	height: var(--forms--pictographic-radio-icon-size, $global-forms-pictographic-radio-icon-size);
	fill: $global-forms-pictographic-radio-unchecked-icon-fill;
	stroke: $global-forms-pictographic-radio-unchecked-icon-stroke;
	background-color: $global-forms-pictographic-radio-unchecked-icon-background;
}

:checked+.c-forms__label--pictographic-radio svg {
	fill: $global-forms-pictographic-radio-checked-icon-fill;
	background-color: $global-forms-pictographic-radio-checked-icon-background;
	stroke: $global-forms-pictographic-radio-checked-icon-stroke;
}

.c-forms__label--boxed-icon svg {
	padding: $global-forms-input-padding-inline;
	border: 2px solid $global-forms-pictographic-radio-unchecked-icon-border;
}

:checked+.c-forms__label--boxed-icon svg {
	border-color: $global-forms-pictographic-radio-checked-icon-border;
}

:focus+.c-forms__label--pictographic-radio svg,
.c-forms__label--pictographic-radio:hover svg {
	box-shadow: 0 0 0 3px $global-forms-input-focus-outline-color;
}

:checked+.c-forms__label--inline::before {
	border-color: $global-forms-checkbox-checked-icon-stroke;
}

:focus+.c-forms__label--inline::before {
	box-shadow: 0 0 0 3px $global-forms-input-focus-outline-color;
}

.c-forms__label--radio::before {
	border-radius: 50%;
}

.c-forms__label--checkbox::before {
	border-radius: 0.125em;
}

[invalid]+.c-forms__label--checkbox::before {
	border-color: $global-forms-message-color-error;
}

:checked+.c-forms__label--radio::before {
	background: radial-gradient(#{$global-forms-checkbox-checked-icon-fill} 0%, #{$global-forms-checkbox-checked-icon-fill} 40%, #fff 40%);
}

:checked+.c-forms__label--checkbox::before {
	background-color: $global-forms-checkbox-checked-icon-fill;
	background-image: url('#{$global-forms-checkbox-checked-icon-data-uri}');
	border-color: $global-forms-checkbox-checked-icon-stroke;
	background-size: 100%;
	background-repeat: none;
	background-position: center;
}

.c-forms__sub-fields {
	margin-top: $global-forms-input-stack-spacing;
	margin-left: calc(#{$global-forms-checkbox-size} / 4);
	padding-top: $global-forms-field-stack-spacing;
	padding-left: $global-forms-field-stack-spacing;
	position: relative;
	display: none;
}

.c-forms__sub-fields::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(#{$global-forms-checkbox-size} / 2);
	background-color: $global-forms-indent-border-color;
	border-radius: $global-forms-indent-border-radius;
}

:checked~.c-forms__sub-fields {
	display: block;
}

.c-forms__error-summary {
	background-color: $global-forms-input-background-color;
	box-sizing: border-box;
	display: flex;
	gap: $global-forms-input-padding-inline;
	padding: $global-forms-input-padding-inline;
	color: $global-forms-message-color-error;
	border: $global-forms-input-border-width solid $global-forms-indent-border-color;
	border-bottom: 4px solid $global-forms-message-color-error;
}

.c-forms__error-summary .c-forms__icon svg {
	width: #{$global-forms-input-font-size * 2};
	height: #{$global-forms-input-font-size * 2};
}

.c-forms__error-summary-errors {
	padding: 0;
	margin-bottom: 0;
	margin-top: $global-forms-input-padding-block;
	list-style: none;
}

.c-forms__error-summary-errors a {
	color: inherit;
	text-decoration: underline;
}

.c-forms__error-summary-title {
	color: initial;
	font-weight: bold;
}

.c-forms__error-summary-errors li+li {
	margin-top: $global-forms-input-stack-spacing;
}