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

@include oLoading();

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 200px;

	div {
		margin: 20px;
	}
}

// reversed background
.demo--light {
	// @todo figure out how to brand demos without adding brand variables just for demos.
	// https://github.com/Financial-Times/o-brand/issues/31
	background: if(oBrandIs('whitelabel'), oColorsByName('black'), oColorsByName('slate'));
}

// reversed background
.demo--dark {
	background: oColorsByUsecase('page', 'background');
}

.demo-toggle {
	margin: 20px;

	&:not([disabled]) ~ .o-loading {
		display: none;
	}
}