@use 'sass:map';
@use '../../base/maps/tokens' as *;
@use '../../base/mixins/typography' as font;
@use '../../base/functions' as *;
@use '../../base/mixins/accessibility' as a11y;

.tooltip-wrapper + .tooltip-wrapper {
	margin-top: 0.625rem;
	z-index: 500;
}

.tooltip-wrapper {
	width: fit-content;
	border-width: 1px;
	border-style: solid;
	border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
	border-color: var(--action);
}

.tooltip {
	--tooltip-ease: cubic-bezier(0.23, 1, 0.32, 1);
	--tooltip-duration: 0.2s;
	--tooltip-arrow-size: 0.313rem;
	--tooltip-gap: 0.625rem;
	--tooltip-fill: var(--ui-fill);
	--tooltip-foreground: var(--ui-headline);

	position: relative;

	&::before {
		position: absolute;
		content: ' ';
		border: var(--tooltip-arrow-size) solid transparent;
		z-index: 500;
		opacity: 0;
		transition:
			opacity var(--tooltip-duration) var(--tooltip-ease),
			transform var(--tooltip-duration) var(--tooltip-ease);
		pointer-events: none;
	}

	&::after {
		display: flex;
		place-items: center center;
		content: attr(data-tooltip-text);
		width: max-content;
		max-width: 11.25rem;
		height: auto;
		max-height: max-content;
		border-radius: 0.1875rem;
		position: absolute;
		text-align: center;
		z-index: 1000;
		opacity: 0;
		transition:
			opacity var(--tooltip-duration) var(--tooltip-ease),
			transform var(--tooltip-duration) var(--tooltip-ease);
		pointer-events: none;
		padding: 0.375rem 0.625rem;

		@include font.get-typography(body-small-medium);

		color: var(--tooltip-foreground);
		background-color: var(--tooltip-fill);
	}

	&:hover,
	&:focus {
		opacity: 1;

		&::before,
		&::after {
			opacity: 1;
		}
	}

	&[data-tooltip-instant] {
		&::before,
		&::after {
			--tooltip-duration: 0s;
		}
	}

	@include a11y.reduced-motion {
		&::before,
		&::after {
			transition: opacity var(--tooltip-duration) var(--tooltip-ease);
		}
	}

	&.t-top {
		&::before {
			top: 0;
			left: 50%;
			transform: translate(-50%, calc(-1 * var(--tooltip-arrow-size)));
			border-top-color: var(--tooltip-fill);
		}

		&::after {
			top: 0;
			left: 50%;
			transform: translate(-50%, -100%) scale(0.97);
			transform-origin: bottom center;
		}

		&:hover,
		&:focus {
			&::before {
				transform: translate(-50%, calc(-1 * var(--tooltip-gap)));
			}

			&::after {
				transform: translate(-50%, calc(-100% - var(--tooltip-gap))) scale(1);
			}
		}
	}

	&.t-left {
		&::before {
			top: 0;
			left: 0;
			transform: translate(calc(-1 * var(--tooltip-arrow-size)));
			border-left-color: var(--tooltip-fill);
		}

		&::after {
			top: 0;
			left: 0;
			transform: scale(0.97);
			transform-origin: right center;
		}

		&:hover,
		&:focus {
			&::before {
				transform: translate(calc(-1 * var(--tooltip-gap)));
			}

			&::after {
				transform: translate(calc(-100% - var(--tooltip-gap))) scale(1);
			}
		}
	}

	&.t-right {
		&::before {
			top: 0;
			right: 0;
			transform: translate(var(--tooltip-arrow-size));
			border-right-color: var(--tooltip-fill);
		}

		&::after {
			top: 0;
			right: 0;
			transform: translate(calc(100% + var(--tooltip-arrow-size))) scale(0.97);
			transform-origin: left center;
		}

		&:hover,
		&:focus {
			&::before {
				transform: translate(var(--tooltip-gap));
			}

			&::after {
				transform: translate(calc(100% + var(--tooltip-gap))) scale(1);
			}
		}
	}

	&.t-bottom {
		&::before {
			bottom: 0;
			left: 50%;
			transform: translate(-50%, 0);
			border-bottom-color: var(--tooltip-fill);
		}

		&::after {
			bottom: 0;
			left: 50%;
			transform: translate(-50%, 0) scale(0.97);
			transform-origin: top center;
		}

		&:hover,
		&:focus {
			&::before {
				transform: translate(-50%, calc(100% + var(--tooltip-gap)));
			}

			&::after {
				transform: translate(-50%, calc(100% + var(--tooltip-gap))) scale(1);
			}
		}
	}
}

.tooltip-overflow {
	.tooltip {
		@media (width <= 1440px) {
			&.t-top {
				&::before {
					transform: translate(-50%, calc(-1 * var(--tooltip-gap)));
				}

				&::after {
					transform: translate(-90%, calc(-100% - var(--tooltip-gap)))
						scale(0.97);
				}

				&:hover,
				&:focus {
					&::after {
						transform: translate(-90%, calc(-100% - var(--tooltip-gap)))
							scale(1);
					}
				}
			}

			&.t-bottom {
				&::before {
					transform: translate(-50%, var(--tooltip-gap));
				}

				&::after {
					transform: translate(-90%, calc(100% + var(--tooltip-gap)))
						scale(0.97);
				}

				&:hover,
				&:focus {
					&::after {
						transform: translate(-90%, calc(100% + var(--tooltip-gap))) scale(1);
					}
				}
			}

			&.t-right {
				&::before {
					top: 0;
					left: 0;
					border-right-color: transparent;
					border-left-color: var(--tooltip-fill);
					transform: translate(-60%);
				}

				&::after {
					top: 0;
					left: 0;
					transform: translate(calc(-100% - var(--tooltip-gap))) scale(0.97);
				}

				&:hover,
				&:focus {
					&::before {
						transform: translate(-60%);
					}

					&::after {
						top: 0;
						left: 0;
						transform: translate(calc(-100% - var(--tooltip-gap))) scale(1);
					}
				}
			}
		}
	}
}