/* variables specific to current element */

$label-form-bottom-padding: $label-form-bottom-padding-global;

.#{$namespace}label {

	/* Save root element context for easy access if nesting is needed */

	$self: &;

	/* properties of current element  + media queries */
	@include custom-prop-fallback("color","comp-label-text-color");

	@extend %textHelperSmall;
	font-weight: map-deep-get($token-font-weight-map, "bold");
	box-decoration-break: clone;

	/* Pseudo Elements */

	&::before {
	}

	&::after {
	}

	/*
	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
	(e.g: keyframes)
	*/
	@at-root {
	}


	/* children - write selector in full in comments in order to facilitate search */

	// label__helper
	&__helper {

		@include custom-prop-fallback("color","comp-label-meta-text-color");

	}

	&__underlined {

		@include link();

	}
	
	// label__infoDot
	&__infoDot {
		display: inline-flex;
		font-size: $font-size-base;
	}


	/* modifiers */

	// label -form
	&.-form {

		// follows same logic as base element

		padding-left: $input-padding-x;
		padding-bottom: $label-form-bottom-padding;

		#{$self}__infoDot {

			position: relative;
			top: 1px;
			margin-left: map-deep-get($token-spacer-unit-map, "4");

		}

	}
	
	&.-formNoOffset {
		padding-left: 0;
	}
	
	&.-noBottomSpacing.-noBottomSpacing {

		padding-bottom: 0;

	}

	&.-optional {

		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: $input-padding-x;

	}

	&.-success,
	&.-error {

		&::before {
			@include icon-base;
			margin-right: map-deep-get($token-spacer-unit-map, "4");
		}

	}

	&.-error {

		&::before {

			content: map-deep-get($token-icon-map, "close");
			@include custom-prop-fallback("color", "sys-color-text-status-danger-vivid");

		}

	}

	&.-success {

		&::before {

			content: map-deep-get($token-icon-map, "check");
			@include custom-prop-fallback("color", "sys-color-text-status-success-vivid");

		}

	}

	&.-large {

		@extend %headingBase;
		@extend %h4;
		@include custom-prop-fallback("color","comp-label-text-color", true, true);
		padding-bottom: map-deep-get($token-spacer-inset-map, "sm");

	}

	&.-highlight {

		@include custom-prop-fallback("color","sys-color-text-highlight-vivid");

	}

	/* random parent element */
	/* 
	*
	*   Syntax : .randomParentElt & {}
	*
	*/

	/* Pseudo Classes */

	&:hover {
		@media (hover: hover) {

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}