@charset "UTF-8";

@layer FormHelp
{
	.formControlAndHelpButton
	{
		align-items: center;
		display: flex;
		gap: 0.5rem;

		& .formControl
		{
			flex: 1 0 0;
			min-width: 0;
		}

		& .formHelpButton
		{
			align-items: center;
			background: #333333;
			border-radius: 50%;
			border: none;
			color: #FFFFFF;
			cursor: help;
			display: inline-flex;
			flex: 0 0 auto;
			font-size: smaller;
			font-weight: bold;
			height: 1.5rem;
			justify-content: center;
			width: 1.5rem;
		}
	}

	.formCurrencyAndHelpButton
	{
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(2, minmax(0, 1fr)) max-content;
		grid-template-areas:
			"currencyLabel currencyMinorUnitLabel ."
			"currencyControl currencyMinorUnitControl formHelpButton";

		& select
		{
			width: 100%;
		}

		& .currencyControl
		{
			grid-area: currencyControl;
		}

		& .currencyControl select + div
		{
			margin-block-start: 1rem;
		}

		& .currencyLabel
		{
			grid-area: currencyLabel;
		}

		& .currencyMinorUnitControl
		{
			grid-area: currencyMinorUnitControl;
		}

		& .currencyMinorUnitControl select + div
		{
			margin-block-start: 1rem;
		}

		& .currencyMinorUnitLabel
		{
			grid-area: currencyMinorUnitLabel;
		}

		& .formHelpButton
		{
			background: #333333;
			border-radius: 50%;
			border: none;
			color: #FFFFFF;
			cursor: help;
			font-size: smaller;
			font-weight: bold;
			grid-area: formHelpButton;
			height: 1.5rem;
			margin-inline-start: -0.5rem;
			width: 1.5rem;
		}
	}

	.formHelpText
	{
		display: none;
		font-size: smaller;
	}
}