//		DS2 core (c) 2024 Alexander McIlwraith
//		Licensed under CC BY-SA 4.0 


/* Core Code

	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. 
*/


@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) repeat(4, 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: 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: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: max-contents;

							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;
								text-align: center;
								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;
			}
		}
	}
}

//colour tokens
$colour: (
	colour-blue: #2e51a1,
	colour-blue-l: #5c7abf,
	colour-blue-xl: #b2c3ec,
	colour-blue-d: #133176,
	colour-blue-xd: #031235,

	colour-grey: #7f7f7f,
	colour-grey-l: #b2b2b2,
	colour-grey-xl: #d8d8d8,
	colour-grey-xxl: #f0f0f0,
	colour-white: #fff,
	colour-page: #fff,
	colour-light: #fff,
	colour-grey-d: #4c4c4c,
	colour-grey-xd: #4c4c4c,
	colour-black: #000,
	colour-dark: #000,
);
:root {
	@each $name, $color in $colour {
		--#{$name}: #{$color};
	}
}


// Statuses
$statuses: (
	"not-started": transparent,
	"in-progress": #f0b031,
	"complete": #2e51a1,
	"deprecated": #da2c5b,
);

h1[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;
	}
}

//! / Core Code