// Import colors module
@import '../../../main';
@include oColors();
@import '@financial-times/o-tabs/main';
@include oTabs();
@import '@financial-times/o-forms/main';
@include oForms();
@import '@financial-times/o-normalise/main';
@include oNormalise();
@import '@financial-times/o-buttons/main';
@include oButtons();
@import '@financial-times/o-overlay/main';
@include oOverlay();
@mixin swatchStyle() {
	appearance: none;
	border: 1px solid lightgrey;
	height: 24px;
	width: 24px;
	cursor: pointer;

	&:checked:not(.o-overlay-trigger) {
		border: 2px solid deeppink;
	}
}

@if not oBrandIs(whitelabel) {
	:root {
		--background: white;
		--foreground: black;
	}

	body {
		font-family: MetricWeb, sans-serif;
		max-width: 1300px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1fr repeat(5, auto) 1fr;
		grid-gap: 20px;
		padding-top: 20px;

		background-color: var(--background);
		color: var(--foreground);

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

			.contrast-info {
				grid-row: 1;
				grid-column: 2;
			}

			.color-selectors {
				grid-row: 2;
				grid-column: 2;
			}

			.contrast-showcase {
				grid-row: 3;
				grid-column: 2;
			}
		}

		.o-forms-title__main,
		.o-forms-title__prompt {
			color: black;
		}

		.swatches,
		.contrast-info {
			color: black;
			background-color: white;
			border: 1px solid black;
		}
	}

	.color-selectors {
		grid-area: 1 / 4 / span 3;
		width: 320px;

		.swatches {
			border-top: 0;
			margin: 0;

			span,
			br {
				margin-bottom: 6px;
			}
		}

		input[type='radio'] {
			// stylelint-disable-line selector-no-qualifying-type
			@include swatchStyle();

			// stylelint-disable-next-line selector-no-qualifying-type
			&.o-overlay-trigger,
			&.trigger-input {
				// stylelint-disable-line selector-no-qualifying-type
				background-image: url('https://images.ft.com/v3/image/raw/fticon-v1%3Aplus?source=o-colors&width=24&height=24&tint=gray');
			}
		}
	}

	.o-overlay__content {
		> :first-child {
			margin: 0;
			border: 0;
			position: absolute;
			right: 20px;
		}

		//stylelint-disable-next-line selector-max-id
		#add-mix {
			background-image: none;
			font-size: inherit;
			float: none;
			margin: 10px 0 0;
		}

		fieldset {
			border: 0;
			padding: 0;
		}

		input[type='radio'] {
			// stylelint-disable-line selector-no-qualifying-type
			@include swatchStyle();

			&[name='range'] {
				// stylelint-disable-line selector-no-qualifying-type
				height: 48px;
				width: 22px;
			}
		}

		.o-forms-title__main {
			margin: 4px 0 8px;
		}

		button {
			display: block;
			margin-top: 12px;
		}
	}

	.contrast-info {
		grid-area: 1 / 2 / auto / span 2;
		padding: 12px;
		margin-top: 28px;
		width: 320px;

		.contrast-combination {
			margin-bottom: 12px;
			max-width: 320px;

			.o-forms-title__main {
				display: inline-block;
			}

			.combination {
				float: right;
			}
		}

		.contrast-details {
			clear: both;
		}

		.wcag-rating {
			margin-left: 12px;
			font-weight: 600;
		}

		.rating-result {
			&--aaa,
			&--aa {
				color: oColorsMix('jade', 'black', 70);
			}

			&--aa18 {
				color: oColorsMix('mandarin', 'black', 70);
			}

			&--fail {
				color: oColorsByName('crimson');
			}
		}

		.rating-message {
			margin-bottom: 0;
		}
	}

	.contrast-showcase {
		grid-area: 2 / 2 / auto / span 2;
		font-size: 14px;
		max-width: 340px;

		code {
			font-size: 12px;
		}

		h3 {
			font-size: 18px;
			font-weight: 400;
			margin-top: 0;
		}

		a {
			color: inherit;
		}
	}
}
