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

@use 'sass:color';
@use "sass:map";
@use 'sass:list';
// @import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');

$sticky-colors: (
	"yellow": #ffffd3, 
	"blue": #94daea,
	"pink": #fa728b,
	"green": #bbfbc0 ) !default;

@mixin sticky-note {
	sticky-note-wrapper {
		box-sizing: border-box;

		border: 1px solid transparent;
		border-radius: 50%;
		display: inline-block;
		height: .5rem;
		position: relative;
		width: .5rem;
		& * {
			box-sizing: border-box;
		}
		sticky-note {
			cursor: grab;
			display: grid;
			float: left;
			font-size: 1rem;
			height: 13rem;
			left: 0;
			place-items: stretch;
			position: absolute;
			top: 0;
			width: 13rem;
			z-index: 100;

			&:active {
				cursor: grabbing;
				user-select: none;
			}



			@media screen and (max-width: 1024px) {
				//width: 15rem;
				// background-color: green;
			}
			@media screen and (max-width: 768px) {
				//width: 20rem;
				// background-color: blue;
			}
			@media screen and (max-width: 640px) {
				//width: 30rem;
				// background-color: yellow;
			}
			&.right {
				float: right;
			}		
			@content;

			> div {
				grid-row: 1;
				grid-column: 1;
				&:nth-child(1) {
					background-color: rgba(0, 0, 0, 0.25);
					box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
					display: grid;
					margin: 2rem 1rem .25rem .36rem;
					width: calc(100% - 1rem);

				}
				&:nth-child(2) {
					clip-path: url(#stickyClip);
					display: grid;
					font-family: "Kalam", cursive;
					font-style: 1rem;
					font-weight: 300;
					line-height: 1.25rem;
					padding: 1rem;
					place-items: center;
					text-align: center;
					// not adding this because maybe we want the sticky note text to be able to be selected and copied.
					// user-select: none;
					> * {
						font-family: "Kalam", cursive !important;
						font-style: normal !important;
						font-weight: 300 !important;
					}


					@media screen and (max-width: 1024px) {
						max-width: 13rem;
						min-width: 13rem;
						width: 1rem;
					}
					@media screen and (max-width: 768px) {
						font-size: 1.75rem;
						max-width: 21rem;
						min-height: 21rem;
					}
					@media screen and (max-width: 640px) {
						font-size: 2.5rem;
						max-width: 26rem;
						min-height: 26rem;
					}
				}
			}

			// default colour
			> div:nth-child(2) {
				$sticky-color: list.nth(map.values($sticky-colors), 1);				
				// background: linear-gradient(
				// 	180deg,
				// 	lighten($sticky-color, 2%) 0%,
				// 	$sticky-color 2%,
				// 	$sticky-color 12%,
				// 	darken($sticky-color, 2%) 75%,
				// 	darken($sticky-color, 5%) 100%
				// );
				background: linear-gradient(
					180deg,
					color.adjust($sticky-color, $lightness: 2%) 0%,
					$sticky-color 2%,
					$sticky-color 12%,
					color.adjust($sticky-color, $lightness: -2%) 75%,
					color.adjust($sticky-color, $lightness: -5%) 100%
				);
			}
			// all class colors
			@each $class, $sticky-color in $sticky-colors {
				&.#{$class} > div:nth-child(2) {
					@if $class != list.nth(map.keys($sticky-colors), 1) {
					
						background: linear-gradient(
							180deg,
							color.adjust($sticky-color, $lightness: 2%) 0%,
							$sticky-color 2%,
							$sticky-color 12%,
							color.adjust($sticky-color, $lightness: -2%) 75%,
							color.adjust($sticky-color, $lightness: -5%) 100%
						);

						// background: linear-gradient(
						// 	180deg,
						// 	lighten($sticky-color, 2%) 0%,
						// 	$sticky-color 2%,
						// 	$sticky-color 12%,
						// 	darken($sticky-color, 2%) 75%,
						// 	darken($sticky-color, 5%) 100%
						// );
					}
				}
			}
		}
		&:has(sticky-note:hover) {
			background-color: #{list.nth(map.values($sticky-colors), 1)};
			border: 1px solid black;

		}
		@each $class, $sticky-color in $sticky-colors {
			&:has(sticky-note.#{$class}:hover) {
				background-color: $sticky-color;
			}
		}
	}
}