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

$font-body: sans-serif !default;
$tooltip-border-radius: .5rem !default;
$tooltip-dark-allow: true !default;
$tooltip-dark-background: #1f2127 !default;
$tooltip-dark-drop-shadow: drop-shadow(0 3px 3px hsl(0 0% 0% / 50%)) drop-shadow(0 12px 12px hsl(0 0% 0% / 50%)) !default;
$tooltip-dark-foreground: #fff !default;
$tooltip-light-background: #fff !default;
$tooltip-light-drop-shadow: drop-shadow(0 3px 3px hsl(0 0% 0% / 15%)) drop-shadow(0 12px 12px hsl(0 0% 0% / 15%)) !default;
$tooltip-light-foreground: #000 !default;
$tooltip-padding-sides: 1.5rem !default;
$tooltip-padding-top-bottom: 0.75rem !default;
$tooltip-pointer-size: 1rem !default;
$tooltip-pointer-bottom: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom / 100% 50% no-repeat !default;
$tooltip-pointer-left: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left / 50% 100% no-repeat !default;
$tooltip-pointer-right: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right / 50% 100% no-repeat !default;
$tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top / 100% 50% no-repeat !default;
/* Position Options
	- top / block-start
	- right / inline-end
	- bottom / block-end
	- left / inline-start
*/

@mixin tooltip {
	tooltip {
		background: $tooltip-light-background;
		border-radius: $tooltip-border-radius;
		color: $tooltip-light-foreground;
		display: none;
		filter: $tooltip-light-drop-shadow;
		$font-family: $font-body;
		font-size: 1rem;
		font-weight: 400;
		inline-size: max-content;
		line-height: initial;
		margin: 0;
		max-inline-size: 25rem;
		opacity: 0;
		padding: $tooltip-padding-top-bottom $tooltip-padding-sides;
		pointer-events: none;
		position: absolute;
		text-align: start;
		transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
		transition: opacity 0.2s ease, transform 0.2s ease;
		user-select: none;
		will-change: filter;
		z-index: 10;

		&::before {
			clip-path: inset(50%);
			clip: rect(1px, 1px, 1px, 1px);
			content: "; Has tooltip: ";
			height: 1px;
			margin: -1px;
			overflow: hidden;
			padding: 0;
			position: absolute;
			width: 1px;
		}

		&::after {
			background: $tooltip-light-background;
			content: "";
			inset: 0;
			mask: var(--tooltip-pointer);
			position: absolute;
			z-index: -1;
		}

		&:is(	[tip-position="top"], 
				[tip-position="block-start"], 
				:not([tip-position]), 
				[tip-position="bottom"], 
				[tip-position="block-end"]
			) {
				text-align: center;
		}

		&:is(	[tip-position="top"], 
				[tip-position="block-start"], 
				:not([tip-position])
			) {
				inset-inline-start: 50%;
				inset-block-end: calc(100% + $tooltip-padding-top-bottom + $tooltip-pointer-size);
				--tooltip-x: calc(50% * -1);

				&::after {
					--tooltip-pointer: #{$tooltip-pointer-bottom};
					inset-block-end: calc($tooltip-pointer-size * -1);
					border-block-end: $tooltip-pointer-size solid transparent;
				}
		}

		&:is(	[tip-position="right"], 
				[tip-position="inline-end"]
			) {
				inset-inline-start: calc(100% + $tooltip-padding-sides + $tooltip-pointer-size);
				inset-block-end: 50%;
				--tooltip-y: 50%;

				&::after {
					--tooltip-pointer: #{$tooltip-pointer-left};
					inset-inline-start: calc($tooltip-pointer-size * -1);
					border-inline-start: $tooltip-pointer-size solid transparent;
				}
		}


		&:is(	[tip-position="bottom"], 
				[tip-position="block-end"]
			) {
				inset-inline-start: 50%;
				inset-block-start: calc(100% + $tooltip-padding-top-bottom + $tooltip-pointer-size);
				--tooltip-x: calc(50% * -1);

				&::after {
					--tooltip-pointer: #{$tooltip-pointer-top};
					inset-block-start: calc($tooltip-pointer-size * -1);
					border-block-start: $tooltip-pointer-size solid transparent;
				}
		}


		&:is(	[tip-position="left"], 
				[tip-position="inline-start"]
			) {
				inset-inline-end: calc(100% + $tooltip-padding-sides + $tooltip-pointer-size);
				inset-block-end: 50%;
				--tooltip-y: 50%;

				&::after {
					--tooltip-pointer: #{$tooltip-pointer-right};
					inset-inline-end: calc($tooltip-pointer-size * -1);
					-webkit-border-end: $tooltip-pointer-size solid transparent;
					border-inline-end: $tooltip-pointer-size solid transparent;
				}
		}
		@if ($tooltip-dark-allow == true ) {	
			@media (prefers-color-scheme: dark) {
				background: $tooltip-dark-background;
				color: $tooltip-dark-foreground;
				filter: $tooltip-dark-drop-shadow;
				&::after {
					background: $tooltip-dark-background;
				}
			}
		}
	}

	:has(> tool-tip) {
		position: relative;
		&:is(:hover, :focus-visible, :active) > tool-tip {
			display: block;
			opacity: 1;
			transition-delay: 300ms;
		}
	}

	@media (prefers-reduced-motion: no-preference) {

		:has(> tool-tip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))):not(:hover):not(:active) tool-tip {
			--tooltip-y: 3px;
		}

		:has(> tool-tip:is([tip-position="right"], [tip-position="inline-end"])):not(:hover):not(:active) tool-tip {
			--tooltip-x: calc(-1 * -3px * -1);
		}

		:has(> tool-tip:is([tip-position="bottom"], [tip-position="block-end"])):not(:hover):not(:active) tool-tip {
			--tooltip-y: -3px;
		}

		:has(> tool-tip:is([tip-position="left"], [tip-position="inline-start"])):not(:hover):not(:active) tool-tip {
			--tooltip-x: calc(-1 * 3px * -1);
		}

	}
}