//- This file is used to generate ../scss/_core.scss and will overwrite what is in that include.

- 
	var out = `//		DS2 core (c) 2024 Alexander McIlwraith\n//		Licensed under CC BY-SA 4.0 \n\n\n/* Core Code\n
		This file is generates _core.scss using information in ../pg/_config.pug.
		Please make your changes in your _config.pug file so that they are not
		overwritten. \n*/\n\n\n`

include ../_config
include _colour-samples


-
	out +=`@mixin core-colour-samples {	

		#copystatus {
			left: 50%;
			position: absolute;
			z-index: 100;
			div {
				border-radius: 1rem;
				border: 1px solid green;
				left: -50%;
				padding: 1rem;
				position: relative;
				white-space: nowrap;
				&::after {
					clear: both;
					content: " ";
					display: block;
				}
				&.succeeded {
					background-color: white;
					border-color: black;
					color: black;
				}
				&.failed {
					background-color: white;
					border-color: #f00;
					color: #f00;
				}
			}
		}

		color-samples {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 1rem;
			margin-bottom: 1rem;

			@include break(-lg) {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				max-width: 100%;
				width: 100%;
			}

			@include break(-sm) {
				grid-template-columns: auto;
				width: 100%;
				max-width: 100%;
			}

			color-sample {
				align-items: center;
				border-radius: .5rem;
				border: 1px solid #CCC;
				display: grid;
				font-family: inherit;
				gap: .5rem;
				grid-template-areas: "name      name      name     hex       hex       hex" 
									 "name      name      name     rgb       rgb       rgb"
									 "acc       acc       acc      acc       acc       acc"
									 "lighter   lighter   lighter  darker    darker    darker"
									 "notes     notes     notes    notes     notes     notes";
				grid-template-columns: repeat(6, 1fr);
				grid-template-rows: repeat(2, 1.5rem) 10rem repeat(3, max-content); // 3rem repeat(2, 2rem) 1.5rem repeat(3, max-content); 
				padding: 1rem;
				width: 20rem;
				max-width: 318px;

				@include break(-lg) {
					width: 100%;
					max-width: 100%;
				}

				name 	{ 
					align-self: start;
					font-size: 1.25rem; 
					grid-area: name; 
					span {
						cursor: pointer;
					}
				}
				rgb { 
					grid-area: rgb;
					white-space: nowrap;
				}
				hex { 
					grid-area: hex;
					white-space: nowrap;
				}

				> accessibility {
					border-bottom: 1px solid #ccc;
					border-top: 1px solid #ccc;
				}

				accessibility {
					grid-area: acc;
					grid-row: 3;
					padding: .5rem 0;

					display: grid; 
					gap: .5rem;
					grid-template-columns: repeat(3, 1fr);
					grid-template-rows: 2.5rem repeat(2, max-content);
					.result {
						align-items: center;
						border-radius: .5rem;
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						border: 1px solid #ccc;
						padding: 0 1rem;
						text-align: center;
						&.accwaa, &.accwaaa {
							background-color: white;
							color: black;
						}
						&.accbaa, &.accbaaa {
							background-color: black;
							color: white;
						}
						span:nth-child(2) {
							font-size: 2rem;
						}
					}

					.aa, .aaa {
						align-self: center;
						display: block;
						font-size: .75rem;
					}
					.acchb {
						grid-column: 2;
					}
					.acchb, .acchw {
						display: grid;
						grid-tempate-columns: auto;
						grid-template-rows: repeat(2, max-content);
						align-self: start;
						text-align: center;
						padding: 0;
						span {
							grid-row: 1;
							grid-column: 1 / -1;
							font-size: .9rem;
						}
						small {
							text-align: center;
							grid-row: 2;
							grid-column: 1 / -1;
							font-size: .75rem;
						}
					}
				}

				sample-block {
					align-self: start;
					grid-column: span 3;
					grid-row: 4;
					color-pill {				
						display: grid;
						grid-gap: .5rem;
						grid-template-columns: 20px max-content auto;
						:nth-child(1) {
							align-self: center;
							border-radius: 5px;
							border: 1px solid #CCC;
							display: inline-block;
							height: 10px;
							width: 20px;
						}
						span {
							cursor: pointer;
							.tooltip-tc {
								padding: .5rem;
								width: 20rem;
								max-width: 318px;
								height: 10.5rem;

								display: grid; 
								gap: .5rem;
								grid-template-columns: repeat(3, 1fr);
								grid-template-rows: repeat(3, max-content);
								.result {
									align-items: center;
									border-radius: .5rem;
									display: grid;
									grid-template-columns: repeat(2, 1fr);
									border: 1px solid #ccc;
									padding: 0 1rem;
									text-align: center;
									&.accwaa, &.accwaaa {
										background-color: white;
										color: black;
									}
									&.accbaa, &.accbaaa {
										background-color: black;
										color: white;
									}
									span{ border: none;
										&:nth-child(2) {
											font-size: 2rem;
										}
									}
								}

								.aa, .aaa {
									align-self: center;
									display: block;
									font-size: .75rem;
								}

								.acchb {
									grid-column: 2;
								}
								.acchb, .acchw {
									border: none;
									display: block;
									width: 100%;
									place-self: stretch;
									span {
										border: none;
										font-size: .9rem;
										width: 100%;
										&::after, &::before {
											display: none;
										}
									}
									small {
										font-size: .75rem;
										text-align: center;								
									}
								}
							}
						}
					}
				}

				notes {
					border-top: 1px solid #ccc;
					grid-column: 1 / -1;
					padding-top: .5rem;
				}
			}
		}
	}`




- out += `\n\n//colour tokens\n$${colorpfx}: (`

each val in generateColourToken
	- out += generateSCSS(eval(val), colorpfx)




//- var scss = $colors
	| !{generateSCSS(eval(val), colorpfx)}

- out += ");\n:root {\n\t@each $name, $color in $" + colorpfx + " {\n\t\t--#{$name}: #{$color};\n\t}\n}"



//- This is the end of the statuses
- out += "\n\n\n// Statuses\n$statuses: (\n"
each status in statuses || []
	- out += `\t"${status.name}": ${status.color},\n`
-out += ");"


-
	out += `\n\nh1[class^="status"], h2[class^="status"], span[class^="status"] {
		&::after {
			$size: 1.5rem;
			border-radius: 50%;
			border: 1px solid #CCC;
			content: " ";
			display: inline-block;
			height: $size;
			margin-left: .5rem;
			position: relative;
			top: 2px;
			width: $size;
		}
	} 
	@each $name, $color in $statuses {
		.status-#{$name}::after {
			background-color: $color;
		}
	}`
//- / This is the end of the statuses

- out += "\n\n//! / Core Code\n\n"


| !{out}
