// Import colors module
@import '../../../main';
@include oColors();
@import '@financial-times/o-forms/main';
@include oForms();
@import '@financial-times/o-normalise/main';
@include oNormalise();
@import '@financial-times/o-syntax-highlight/main';
@include oSyntaxHighlight();
:root {
	--color: #000000;
	--background: #ffffff;
}

body {
	color: var(--color);
	background-color: var(--background);

	font-family: MetricWeb, sans-serif;
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;

	@media (max-width: 630px) {
		grid-template-columns: 1fr;

		.details {
			grid-row: 2;
			padding-bottom: 20px;
		}
	}
}

.color-mix-form {
	display: grid;
	grid-template-columns: repeat(2, 0.75fr) 1fr;
}

.details {
	.o-forms-title__prompt {
		color: var(--color);
	}

	pre {
		margin: 10px 0;
		padding: 10px;
		border: 1px solid oColorsMix('black', 'white', 5);
	}
}

input[type=radio] { // stylelint-disable-line selector-no-qualifying-type
	appearance: none;
	border: 1px solid var(--color);
	display: inline-block;
	margin: 0 0 4px;
	height: 35px;
	width: 100px;
	vertical-align: middle;

	&:hover {
		cursor: pointer;
		outline: 2px solid var(--color);
	}

	&:checked {
		outline: 2px solid var(--color);
	}
}

.o-forms-input__label {
	display: inline-block;
	vertical-align: middle;
	margin-left: 8px;
}

.mix-range-container {
	appearance: none;
	border: 0;
	padding: 0;
	justify-self: center;
}

.mix-range {
	display: flex;
	flex-direction: column-reverse;
}
