@use '../../tokens/index.scss' as tokens;
@use '../../mixins/index.scss' as mixins;
@use './label.scss' as label;

/* stylelint-disable max-nesting-depth, selector-max-specificity  */

$field-line-height: 1.5 !default;
$field-error-color: tokens.$danger !default;

.field {
	&:not(:last-child) {
		margin-block-end: tokens.$spacer-4;
	}

	.field-description {
		margin-block-end: tokens.$spacer-3;
		font-size: tokens.$font-size-8;
	}

	.field-label {
		@include label.label;

		margin-block-end: tokens.$spacer-3;

		&.field-label-inline {
			display: inline-flex;
			margin-block-end: unset;
			align-self: flex-end;
		}

		@include mixins.tablet {
			flex: 1 0 0;
		}

		&.field-label-sm {
			font-size: tokens.$font-size-8;
		}

		&.field-label-lg {
			font-size: tokens.$font-size-6;
		}
	}

	.field-body {
		> * {
			scroll-margin-top: 3rem;
		}

		&:not(:first-child) {
			margin-block-start: tokens.$spacer-3;

			&.field-body-inline {
				display: inline-flex;
				vertical-align: text-bottom;
			}
		}
	}

	.field-error {
		color: $field-error-color;
		font-size: tokens.$font-size-8;
		line-height: $field-line-height;
	}
}

.required-indicator::after,
::part(required-indicator)::after {
	color: tokens.$danger;
	content: '*';
	vertical-align: top;
}