/**
 * Alert.
 */
.c-alert {
    border-radius: var(--input-text-error-corner-radius, 16px);
	border-top: var(--input-text-error-border-width-top, 1px) solid var(--input-text-error-color-border, #FF0400);
	border-right: var(--input-text-error-border-width-right, 1px) solid var(--input-text-error-color-border, #FF0400);
	border-bottom: var(--input-text-error-border-width-bottom, 1px) solid var(--input-text-error-color-border, #FF0400);
	border-left: var(--input-text-error-border-width-left, 1px) solid var(--input-text-error-color-border, #FF0400);
	background: var(--input-text-error-color-surface, #FEE);
	padding: var(--input-text-error-padding-top, 12px) var(--input-text-error-padding-right, 16px) var(--input-text-error-padding-bottom, 12px) var(--input-text-error-padding-left, 16px);
}

/**
 * Button.
 */
.c-button {
    display: inline-flex;
    padding: var(--button-default-padding-top, 12px) var(--button-default-padding-right, 16px) var(--button-default-padding-bottom, 12px) var(--button-default-padding-left, 16px);
    justify-content: center;
    align-items: center;
    border: 0;
    border-radius: var(--button-default-corner-radius, 16px);
    background: var(--button-default-color-surface, #20375A);
    color: var(--button-default-color-text, #FFF);  
    text-align: center;
    font-size: var(--typography-10-size);
    font-weight: 400;
    letter-spacing: var(--typography-10-letter-spacing);
    line-height: var(--typography-10-line-height);
    text-transform: none;
    text-decoration: none;
}

.c-button:focus {
    background-color: var(--button-default-color-surface-focus);
    color: var(--button-default-color-text, #FFF);
}

.c-button:hover {
    background-color: var(--button-default-color-surface-hover);
    color: var(--button-default-color-text, #FFF);
}

.c-button:active {
    background-color: var(--button-default-color-surface-active);
    color: var(--button-default-color-text, #FFF);
}

/**
 * Input layouts.
 */
.c-input-layout {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--spacing-x-small, 24px);
}

.c-input-layout__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--input-text-spacing-label-stacked, 8px);
	align-self: stretch;
}

.c-input-layout__item-wrap-label {
	display: flex;
	padding: var(--spacing-3x-small, 4px);
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
}

.c-input-layout__item-wrap-field {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--input-text-spacing-text-supplement, 8px);
	align-self: stretch;
	flex: 1;
}

.c-input-layout__wrap-description {
	display: flex;
	padding: var(--spacing-3x-small, 4px);
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-2x-small, 8px);
	align-self: stretch;
}

.c-input-layout__controls {
	display: flex;
	width: 100%;
	justify-content: center;
}

.c-input-layout--side-by-side {
	.c-input-layout__item {
		flex-direction: row;
		gap: var(--input-text-spacing-label-inline, 16px);
	}

	.c-input-layout__item-wrap-label {
		width: var(--input-text-label-width-sidebyside, 150px);
		padding: var(--input-text-default-padding-top, 12px) 0 var(--input-text-default-padding-bottom, 12px) 0;
		align-items: flex-end;
	}
}

.c-input-layout__fieldset-birthdate {
	border: 0;
	padding: 0;
	display: flex;
	gap: var(--input-text-spacing-label-inline, 16px);

	label {
		color: var(--color-text-primary, #000);
		padding: var(--spacing-3x-small, 4px);

		/* Fluid Max/Body */
		font-family: var(--font-family-primary);
		font-size: var(--typography-10-size, 16px);
		font-style: normal;
		font-weight: 400;
		line-height: var(--typography-10-line-height, 24px); /* 150% */
		letter-spacing: var(--typography-10-letter-spacing, 0);
	}

	select,
	input[type="number"] {
		min-height: 3.1rem; /* ew. but it makes the inline heights match w/o having to do much custom select styling */
	}

	legend {
		color: var(--input-text-color-label, #20375A);
		text-align: right;
		width: 100%;

		/* Fluid Max/Input - Label */
		font-family: var(--font-family-primary);
		font-size: var(--typography-10-size, 16px);
		font-style: normal;
		font-weight: 700;
		line-height: var(--typography-10-line-height, 24px); /* 150% */
		letter-spacing: var(--typography-10-letter-spacing, 0);
	}

	.c-input-layout__fieldset-birthdate-wrap-legend {
		width: var(--input-text-label-width-sidebyside, 150px);
		padding: var(--input-text-default-padding-top, 12px) 0 var(--input-text-default-padding-bottom, 12px) 0;
	}

	.c-input-layout__fieldset-birthdate-fields {
		display: flex;
		gap: var(--spacing-x-small, 24px);
	}

	.c-input-layout__item {
		flex-direction: column;
	}
}

@media screen and (max-width: 32.25rem) {
	.c-input-layout--side-by-side {
		.c-input-layout__item {
			flex-direction: column;
			gap: var(--input-text-spacing-label-stacked, 8px);
		}

		.c-input-layout__item-wrap-label {
			width: auto;
			padding: var(--spacing-3x-small, 4px);
			flex-direction: column;
			align-items: flex-start;
			align-self: stretch;
		}
	}

	.c-input-layout__fieldset-birthdate {
		flex-direction: column;
		gap: var(--input-text-spacing-label-stacked, 8px);

		.c-input-layout__fieldset-birthdate-wrap-legend {
			padding: var(--spacing-3x-small, 4px);
			width: 100%;
		}

		legend {
			text-align: left;
		}
	}
}