/* variables specific to current element */

$element-specific-variables: "";

.#{$namespace}badge {

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

	$self: &;


	/* properties of current element  + media queries */

	/* 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 */

	// badge__childElement
	&__childElement {

		// follows same logic as parent

	}


	/* modifiers */

	// badge -info10
	&.-info10 {

		@include custom-prop-fallback("background-color", "sys-color-background-status-info-10");
		@include custom-prop-fallback("color", "sys-color-text-status-info-contrast");

	}

	&.-warning10 {

		@include custom-prop-fallback("background-color", "sys-color-background-status-warning-10");
		@include custom-prop-fallback("color", "sys-color-text-status-warning-contrast");

	}

	// badge -fade120
	&.-fade10 {

		@include custom-prop-fallback("background-color", "sys-color-background-neutral-10");
		@include custom-prop-fallback("color", "sys-color-text-neutral-vivid");

	}

	// badge -success100
	&.-success10 {

		@include custom-prop-fallback("background-color", "sys-color-background-status-success-10");
		@include custom-prop-fallback("color", "sys-color-background-status-success-140");

	}

	// badge -fade100
	// @TODO badge BG got changed, class name will have to be adapted at some point
	&.-fade100 {

		@include custom-prop-fallback("background-color", "sys-color-background-primary-60");
		@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");

	}

	&.-primary10 {

		@include custom-prop-fallback("background-color", "sys-color-background-secondary-10");
		@include custom-prop-fallback("color", "comp-badge-danger-muted-text-color");

	}

	&.-secondary10 {

		@include custom-prop-fallback("background-color", "sys-color-background-primary-10");
		@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
	}

	&.-highlight10 {

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

	}

	&.-primary100 {

		@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
		@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
		@include custom-prop-fallback("background-image", "sys-color-background-secondary-gradient");

	}

	&.-primary100Bg {

		@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
		@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");

	}

	&.-success100Bg {

		@include custom-prop-fallback("background-color", "sys-color-background-status-success-100");
		@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");

	}

	&.-small {

		font-size: map-deep-get($token-font-size-map, "body", "2xs");
		padding: map-deep-get($token-spacer-inset-map, "xxs") map-deep-get($token-spacer-inset-map, "xs");

	}

	&.-large {

		@include custom-prop-fallback("font-size","sys-font-size-body-large");
		padding-top: map-deep-get($design-tokens, "comp-badge-large-inset-h");
		padding-bottom: map-deep-get($design-tokens, "comp-badge-large-inset-h");

	}
	
	&.-stock {

		position: relative;
		padding-top: map-deep-get($token-spacer-unit-map, "8");
		padding-bottom: map-deep-get($token-spacer-unit-map, "8");
		//padding-left: map-deep-get($token-spacer-unit-map, "24");
		line-height: 1.145;

		/* @TODO rewrite this shite sometime soon */
		.#{$namespace}icon {

			height: 0;
			position: relative;
			left: -9px;
			margin-right: -7px;
			top: 50%;
			transform: translateY(-50%);

			&::before {

				display: block;
				margin-top: -14px;

			}

		}
		
	}

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

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}