/* ----------------------------------------------------------
 *    Variables
 */

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

$tooltip-dark-allow: false;

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

@use 'sass:math';

// 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. 
@use "core" as *;
@use "../../node_modules/prismjs/themes/prism";
@use "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
@use "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";

@use "../pg/patterns/core/sticky-note/_sticky-note";
@use "../pg/patterns/core/switch/_switch";
@use "../pg/patterns/core/tooltip/_tooltip";
@use "../pg/patterns/core/breakpoints/_breakpoints";
@use "../pg/patterns/core/header/_header";
@use "../pg/patterns/core/tabs/_tabs"; 
@use "../pg/patterns/core/status/_status";
use
* {
	box-sizing: border-box;
}

html {
	font-family: $font-body;
	font-size: $font-size;
	@include breakpoints.break(-md) {
		font-size: calc($font-size + 2pt);
	}
	&.show-breakpoints {
		@include breakpoints.breakpoint-debug;
	}
}

// @include core-colour-samples;

@include tooltip.tooltip;
@include sticky-note.sticky-note;
@include status.status;

article[data-status=deprecated]:not(.show-deprecated) {
	display: none;
}

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.header;

		nav {
			background-color: var(--colour-blue);
			grid-column: 2 / 4;
			display: none;

			ul {
				margin: 1rem 0;

				li {
					display: inline-block;
					margin-right: 1rem;
				}
			}
			a {
				color: var(--colour-white);
				text-decoration: none;
			}
			@include breakpoints.break(md-) {
				display: initial;
			}
		}


		p.info-switches {
			align-items: center;
			display: grid;
			gap: .25rem;
			grid-column: 2 / 4;
			grid-row: 3;
			grid-template-columns: auto repeat(2, max-content);
			text-align: right;
			@include switch.switch;
			label {
				text-align: left;;
			}

		}
		main {
			display: block;
			grid-column: 1 / -1;
			grid-row: 4;

			@include breakpoints.break(-md) {
				grid-row: 3;
				padding: 0;
			}

			@supports(grid-area: auto) {
				display: grid;
				grid-template-columns: 1rem repeat(2, auto) 1rem;
				@include breakpoints.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;
				margin-top: 2rem;
				min-width: 0;

				&.status-deprecated {
					display: none;
				}

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