@import './../../main';
@import '@financial-times/o-normalise/main';
@import '@financial-times/o-private-foundation/main';
@include oNormalise();
body {
	background: oColorsByUsecase(page, background);
}

.demo {
	margin: 12px;
	max-width: 500px;
}

.demo-submit-button {
	@include oPrivateButtonsContent(
		$opts: (
			'type': 'primary',
			'size': 'big',
		)
	);
}

.demo-submit-small-button {
	@include oPrivateButtonsContent(
		$opts: (
			'type': 'primary',
		)
	);
}

.demo-submit-button-inverse {
	@include oPrivateButtonsContent(
		$opts: (
			'type': 'primary',
			'size': 'big',
		)
	);
}

.demo-inverse {
	margin-top: 16px;
	background-color: if(
		oBrandIs('core') or oBrandIs('internal'),
		oColorsByName('slate'),
		oColorsByName('black')
	);
	padding: 10px;

	.o-forms {
		margin: 0;
	}
}

$custom-theme: (
	controls-base: 'o3-color-palette-crimson',
	controls-checked-base: 'o3-color-palette-white',
	controls-border: 'o3-color-palette-crimson',
);

$icon-list: ('grid', 'list');

@include oFormsAddCustom(
	$input: 'radio',
	$class: 'demo-radio',
	$icons: $icon-list,
	$theme: $custom-theme
);

@include oForms();