@import '../../main';

@include oLabels();
@import '@financial-times/o-normalise/main';
@include oNormalise();
@import "@financial-times/o-colors/main";

body {
	padding: 1rem;
}

html {
	background: oColorsByUsecase('page', 'background');
}

@if oBrandIs('core') {
	.demo-inverse {
		background: oColorsByName('slate');
	}
}

.demo-scale-m1 {
	@include oPrivateTypographySans($scale: -1);
}
.demo-scale-0 {
	@include oPrivateTypographySans($scale: 0);
}
.demo-scale-1 {
	@include oPrivateTypographySans($scale: 1);
}
.demo-scale-2 {
	@include oPrivateTypographySans($scale: 3);
}

// custom standard label markup
.my-label {
	@include oLabelsContent(
		$opts: (
			'base': true,
		)
	);
}

// custom indicator label markup
.my-indicator-label {
	@include oLabelsIndicatorContent(
		$opts: (
			'block': true,
		)
	);
}

.my-indicator-label--live {
	@include oLabelsIndicatorContent(
		$opts: (
			'block': true,
			'modifier': 'live',
		)
	);
}

.my-indicator-label__status {
	@include oLabelsIndicatorContent(
		$opts: (
			'element': 'status',
		)
	);
}

.my-indicator-label__date {
	@include oLabelsIndicatorContent(
		$opts: (
			'element': 'timestamp',
		)
	);
}
