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

@include oMessage();
@import '@financial-times/o-fonts/main';
@include oFonts();
@import '@financial-times/o-normalise/main';
@include oNormalise();

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

.o-message {
	margin-top: 20px;
	margin-bottom: 20px;
}

.list-of-demo-buttons {
	display: inline-block;
}

.demo-button {
	@include oPrivateButtonsContent(
		(
			'type': 'secondary',
		)
	);
	margin: 10px;
}

.demo-inner,
.demo-inner-message {
	margin: auto;
	max-width: 400px;
}

@if oBrandIs('core') or oBrandIs('internal') {
	@include oMessageAddState(
		'pikachu',
		(
			'foreground-color': 'o3-color-palette-white',
			'background-color': 'o3-color-palette-slate',
			'highlight-color': 'o3-color-palette-lemon',
			'button-type': 'primary',
			'icon': 'user',
		),
		$types: ('notice', 'alert')
	);
}