@import '@financial-times/o-private-foundation/main';
@import 'src/scss/variables';
@import 'src/scss/functions';
@import 'src/scss/mixins';

/// Output All oMeter Features
@mixin oMeter() {
	@include oPrivateFoundation();

	:root {
		--o-meter-width: 100%; // we need width to synch .o-meter-container with .o-meter-value to display the value label in the right position
		--o-meter-height: 1em;
	}

	.o-meter {
		appearance: none;
		display: block;
		width: var(--o-meter-width);
		height: var(--o-meter-height);

		--o-meter-background-color: #{oPrivateFoundationGet('o3-color-palette-slate-white-15')};
		--o-meter-optimum-color: #{oPrivateFoundationGet('o3-color-palette-jade')};
		--o-meter-sub-optimum-color: #{oPrivateFoundationGet('o3-color-palette-mandarin')};
		--o-meter-less-than-sub-optimum-color: #{oPrivateFoundationGet('o3-color-palette-crimson')};
	}

	.o-meter-container {
		width: var(--o-meter-width);
		position: relative;

		.o-meter {
			width: 100%;
		}
	}

	.o-meter-value {
		@include oPrivateTypographySans($scale: -1);
		line-height: 24px;
		display: none; // we only display the value box for the browsers that support the meter tag
		position: relative;
		padding: 0 oPrivateSpacingByName('s1');
		background: #{oPrivateFoundationGet('o3-color-palette-black')};
		color: #{oPrivateFoundationGet('o3-color-palette-white')};
		text-align: center;
		top: 4px;
		transform: translateX(-50%);

		&::before {
			content: '';
			transform: translateX(-50%);
			position: absolute;
			bottom: 100%;
			left: 50%;
			border: 4px solid transparent;
			border-bottom-width: 6px;
			border-bottom-color: #{oPrivateFoundationGet('o3-color-palette-black')};
		}
	}

	// sass-lint:disable no-vendor-prefixes

	// we only display additional bottom value (styled in .o-meter-value)
	// if meter is an available browser tag
	// to check if meter is available can be through pseudo element
	// -webkit-meter-optimum-value for Chrome & other browsers, and
	// -moz-meter-bar for Firefox
	/* for Chrome, etc. */
	.o-meter-value,
	.o-meter::-webkit-meter-optimum-value {
		display: inline-block;
	}

	meter::-webkit-meter-inner-element {
		// Chrome 83 added a display grid which we want to override
		display: inline-block;
	}

	/* for Firefox */
	.o-meter-value,
	.o-meter:-moz-meter-optimum::-moz-meter-bar {
		display: inline-block;
	}

	/* Background in Firefox */
	@supports (-moz-appearance: none) {
		.o-meter {
			background: var(--o-meter-background-color);
		}
	}

	/* Background in Chrome, etc. */
	.o-meter::-webkit-meter-bar {
		background: var(--o-meter-background-color);
		// Chrome 83 added a border which we want to remove
		border-radius: 0px;
		border: 0;
	}

	/*  Optimum bar in Firefox */
	.o-meter:-moz-meter-optimum::-moz-meter-bar {
		background: var(--o-meter-optimum-color);
	}

	/* Optimum bar in Chrome etc. */
	.o-meter::-webkit-meter-optimum-value {
		background: var(--o-meter-optimum-color);
	}

	/* Sub-optimum bar in Firefox */
	.o-meter:-moz-meter-sub-optimum::-moz-meter-bar {
		background: var(--o-meter-sub-optimum-color);
	}

	/* Sub-optimum bar in Chrome etc. */
	.o-meter::-webkit-meter-suboptimum-value {
		background: var(--o-meter-sub-optimum-color);
	}

	/* Even less good bar in Firefox */
	.o-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
		background: var(--o-meter-less-than-sub-optimum-color);
	}

	/* Even less good bar in Chrome etc. */
	.o-meter::-webkit-meter-even-less-good-value {
		background: var(--o-meter-less-than-sub-optimum-color);
	}

	// sass-lint:enable no-vendor-prefixes
}

@if ($o-meter-is-silent ==false) {
	@include oMeter();

	// Set to silent again to avoid being output twice
	$o-meter-is-silent: true !global;
}