// Do not output placeholders twice i.e. if o-labels is imported twice.
// This is a temporary variable, until we can use the new sass `@use` feature
// that will not have the problem of re-outputting placeholders on every import
$_o-labels-first-import: true !default;

@if $_o-labels-first-import == true {
	// shared placeholders
	%_o-labels-indicator-size {
		@include oPrivateTypographySans(-1);
	}

	%_o-labels-timestamp-typography {
		color: oPrivateFoundationGet('o3-color-palette-black-60');
		font-family: oPrivateFoundationGet('o3-type-label-font-family');
		font-weight: oPrivateFoundationGet('o3-type-label-font-weight');
		font-size: oPrivateFoundationGet('o3-type-label-font-size');
		line-height: oPrivateFoundationGet('o3-type-label-line-height');
		text-transform: oPrivateFoundationGet('o3-type-label-text-case');
	}

	// must come after %_o-labels-timestamp-typography
	// for higher specificity
	%_o-labels-indicator-live-color {
		color: oPrivateFoundationGet('o3-color-palette-crimson');
	}

	// must come after %_o-labels-timestamp-typography
	// for higher specificity
	%_o-labels-indicator-closed-color {
		color: oPrivateFoundationGet('o3-color-palette-black-60');
	}

	// timestamp block placeholders
	%_o-labels-timestamp {
		@extend %_o-labels-timestamp-typography;
		@extend %_o-labels-indicator-size;
	}

	// must come after other colour placeholders
	// e.g. %_o-labels-indicator-live-color
	// for higher specificity
	%_o-labels-timestamp--inverse {
		color: oPrivateFoundationGet('o3-color-palette-white');
	}

	// indicator block placeholders
	%_o-labels-indicator {
		@extend %_o-labels-indicator-size;
		display: inline-block;
	}

	%_o-labels-indicator__status {
		&:before {
			content: '';
			width: calc(0.5em + 4px);
			height: calc(0.5em + 4px);
			min-width: 10px;
			min-height: 10px;
			margin-right: 2px;
			border-radius: 50%;
			background-color: currentcolor;
			display: inline-block;
			vertical-align: baseline;
			// align better with MetricWeb
			margin-bottom: -1px;
		}
	}
}

$_o-labels-first-import: false;
