@import "../partials/clean/constants"

.support-form
	display: flex
	flex-direction: column
	gap: 1em
	align-items: flex-start

	.fields
		list-style-type: none
		display: flex
		flex-direction: column
		gap: .75em
		width: 100%

		> li
			display: flex
			flex-direction: column
			gap: .25em
			max-width: 60ch

			> label, > .field_with_errors label
				display: block
				font-weight: bold

			.field_with_errors
				> label
					color: $error-color

				input[type=text], input[type=url]
					border-color: $error-border-color
					color: $error-color

			&[data-type=radio]
				ul
					list-style-type: none

			&[data-type=radio-grid] // Set the `--num-columns` property to configure!
				max-width: none

				ul
					list-style-type: none
					display: grid
					grid-template-columns: repeat(var(--num-columns, 1), 1fr)
					gap: .25em

				li
					display: flex
					align-items: stretch // Give the bubbles equal heights!

				label
					display: flex
					align-items: center
					gap: .5em
					padding: .5em 1em
					border: 1px solid $soft-border-color
					border-radius: 1em
					flex: 1 1 auto

					input
						margin: 0

					&:has(:checked)
						background: $module-bg-color
						border-color: $module-border-color

	input[type=text], input[type=url]
		width: 100%
		min-width: 10ch
		box-sizing: border-box

	.thumbnail-input
		display: flex
		align-items: center
		gap: .25em

		img
			width: 40px
			height: 40px

	fieldset
		display: flex
		flex-direction: column
		gap: .25em

		legend
			font-weight: bold

	.field_with_errors
		display: contents

	.actions
		display: flex
		align-items: center
		gap: 1em

	.go-to-next
		display: flex
		align-items: center
		gap: .25em
		font-size: .85em
		font-style: italic