/*
 *    Variables
 */

$font-heading: elvetica, Arial, sans-serif;
$font-body: Helvetica, Arial, sans-serif;
$font-size: 14pt;

$tooltip-dark-allow: false;

// ----------------------------------------------------------

@use 'sass:math';

@import "core";

// We recommend explicitly using the underscore when referring to pattern scss 
// as you may have also created a version that compiles to css to display in 
// your pattern. 
@import "color-samples";

@import "../pg/patterns/components/sticky-note-core/_sticky-note";
@import "../pg/patterns/components/tooltip-core/_tooltip";
@import "../pg/patterns/components/switch-core/_switch";

@import "../pg/patterns/layouts/breakpoints-core/_breakpoints";
@import "../pg/patterns/layouts/header-core/_header";
@import "../pg/patterns/layouts/tabs-core/_tabs"; 



@import "../pg/patterns/status-core/_status";

* {
	box-sizing: border-box;
}

html {
	font-family: $font-body;
	font-size: $font-size;
	@include break(-md) {
		font-size: calc($font-size + 2pt);
	}
}

@include status;
@include color-samples;
@include tooltip;
@include sticky-note;

body {
	margin: 0;
	padding: 0;
	a.skip {
		position: absolute;
		left: -9999px;
	}


	.container {


		display: grid;
		grid-template-columns: auto repeat(2, 22rem) auto;
		margin: 0 auto;
		width: 100vw;

		@include header;


		nav {
			background-color: var(--color-blue);
			grid-column: 2 / 4;
			display: none;
			ul {
				margin: 1rem 0;
				li {
					display: inline-block;
					margin-right: 1rem;
				}
			}
			a {
				color: white;
				text-decoration: none;
			}
			@include break(md-) {
				display: initial;
			}
		}


		p.deprecated-switch {
			grid-row: 3;
			// @include break(-md) {
			// 	grid-row: 2;
			// 	grid-column: 2 / 4;
			// }
			grid-column: 2 / 4;
			text-align: right;
			// align-items: center;
			// display: grid;
			// grid-gap: .5rem;
			// grid-template-columns: auto max-content max-content;
			// grid-area: dp;
			// margin: 1rem .25rem;
			@include switch;

		}
		main {
			grid-row: 4;
			@include break(-md) {
				grid-row: 3;
				padding: 0;
			}
			display: block;
			padding: 0 1rem;
			// grid-area: main;
			grid-column: 1 / -1;

			@supports(grid-area: auto) {
				display: grid;
				grid-template-columns: 1rem repeat(2, auto) 1rem;
				@include break(md-) {
					grid-template-columns: auto repeat(2, 22rem) auto;
				}
			}

			h1, h2, h3, h4, h5, h6 {
				grid-column: 2 / 4;
			}

			article {
				grid-column: 2 / 4;
				min-width: 0;
				margin-top: 2rem;

				&.status-deprecated {
					display: none;
				}

				@include tabs {
					pre {
						background-color: var(--colour-black-5);
						font-size: .8rem;
					}
				};
				p.switch {
					align-items: center;
					display: grid;
					grid-gap: .5rem;
					grid-template-columns: max-content auto;
					@include switch;
				}				
			}
		}
	}
}


.good-bad {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1rem;
	margin-bottom: 1rem;
	
	@include break (-md) {
		grid-template-columns: auto;
		grid-template-rows: repeat(2, max-content);
	}
	
	> fieldset {
		border-style: solid;
		border-width: .5rem;
		border-color: var(--colour-error);
		padding: 1.5rem;
		margin: 1rem 0;
		legend {
			background-color: white;
			font-weight: bold;
			padding: 0 1rem;
			position: relative;
			left: -1.5rem;

		}
		&:nth-child(1) {
			border-color: var(--colour-green);
		}
	}
}

// keep your prism modules
@import "../../node_modules/prismjs/themes/prism";
@import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
@import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";