@use 'sass:map';
@use 'sass:meta';
@use 'sass:string';

$modern-display-values: (
	'block': 'block flow',
	'flow-root': 'block flow-root',
	'inline': 'inline flow',
	'inline-block': 'inline flow-root',
	'run-in': 'run-in flow',
	'list-item': 'block flow list-item',
	'flex': 'block flex',
	'inline-flex': 'inline flex',
	'grid': 'block grid',
	'inline-grid': 'inline grid',
	'ruby': 'inline ruby',
	'table': 'block table',
	'inline-table': 'inline table',
);

/**
 * Shorthand for both `content` and `display` properties of pseudo-elements.
 *
 * @param    {string}    $display ['block']    The value of `display` property.
 * @param    {string}    $content ['']         The value of `content` property.
 */
@mixin pseudo($display: 'block', $content: '') {
	$display-value: null;

	@if (meta.type-of($display) == 'string') {
		$display-value: string.unquote($display);
	} @else {
		$display-value: string.unquote(meta.inspect($display));
	}

	$modern-display: map.get($modern-display-values, $display-value);

	@if ($modern-display != null) {
		$display-value: $modern-display;
	}

	content: $content;
	display: string.unquote($display-value);
}