@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/animation";
@use "component";

$popover-gap-size: var(--db-popover-distance);
$popover-inset: calc(100% + #{$popover-gap-size} * var(--db-popover-gap, 0));
$popover-gap-inset: calc(-1 * #{$popover-gap-size});

%popover-center {
	&:not([data-placement]),
	&[data-placement="bottom"]:not([data-outside-vy]),
	&[data-placement="top"]:not([data-outside-vy]),
	&:is([data-outside-vy="bottom"], [data-outside-vy="top"]):not(
			[data-outside-vx],
			[data-placement$="end"],
			[data-placement$="start"]
		) {
		--db-popover-center-x: -50%;

		inset-inline-start: 50%;
	}

	&[data-placement="left"]:not([data-outside-vx]),
	&[data-placement="right"]:not([data-outside-vx]),
	&[data-outside-vx="left"]:not(
			[data-placement$="end"],
			[data-placement$="start"]
		),
	&[data-outside-vx="right"]:not(
			[data-placement$="end"],
			[data-placement$="start"]
		) {
		--db-popover-center-y: -50%;

		inset-block-start: 50%;
	}
}

%popover-placement {
	--db-popover-distance: #{variables.$db-spacing-fixed-2xs};

	// This pseudo-content is used to bridge the visible vertical offset in between the element that it triggering the tooltip and the tooltip itself
	&::before {
		content: "";
		position: absolute;
	}

	&[data-gap="true"] {
		--db-popover-gap: 1;
		--db-popover-distance: #{variables.$db-spacing-fixed-md};
	}

	&:is(.db-tooltip) {
		--db-popover-distance: #{variables.$db-spacing-fixed-sm};
	}

	&[data-placement^="bottom"]:not([data-outside-vy]),
	&[data-placement^="top"]:not([data-outside-vy]),
	&[data-outside-vy="bottom"]:not([data-outside-vx]),
	&[data-outside-vy="top"]:not([data-outside-vx]) {
		&[data-placement$="end"] {
			inset-inline-end: 0;
		}

		&[data-placement$="start"] {
			inset-inline-start: 0;
		}
	}

	&[data-placement^="left"]:not([data-outside-vx]),
	&[data-placement^="right"]:not([data-outside-vx]),
	&[data-outside-vx="left"],
	&[data-outside-vx="right"] {
		&[data-placement$="end"] {
			inset-block-end: 0;
		}

		&[data-placement$="start"] {
			inset-block-start: 0;
		}
	}

	&:not([data-placement], [data-outside-vy]),
	&[data-placement^="bottom"]:not([data-outside-vy]),
	&[data-outside-vy="top"]:not([data-outside-vx]) {
		inset-block-start: $popover-inset;

		&::before {
			inset-inline-start: 0;
			inline-size: 100%;
			block-size: $popover-gap-size;
			inset-block-start: $popover-gap-inset;
		}
	}

	&[data-placement^="top"]:not([data-outside-vy]),
	&[data-outside-vy="bottom"]:not([data-outside-vx]) {
		inset-block-end: $popover-inset;

		&::before {
			inset-inline-end: 0;
			inline-size: 100%;
			block-size: $popover-gap-size;
			inset-block-end: $popover-gap-inset;
		}
	}

	&[data-placement^="left"]:not([data-outside-vx]),
	&[data-outside-vx="right"] {
		inset-inline-end: $popover-inset;

		&::before {
			inset-block-end: 0;
			block-size: 100%;
			inline-size: $popover-gap-size;
			inset-inline-end: $popover-gap-inset;
		}
	}

	&[data-placement^="right"]:not([data-outside-vx]),
	&[data-outside-vx="left"] {
		inset-inline-start: $popover-inset;

		&::before {
			inset-block-start: 0;
			block-size: 100%;
			inline-size: $popover-gap-size;
			inset-inline-start: $popover-gap-inset;
		}
	}
}

@mixin get-popover-show() {
	&[data-animation="disabled"] {
		opacity: 1;
		transform: translate(
			var(--db-popover-center-x, 0),
			var(--db-popover-center-y, 0)
		);
	}

	@media screen and (prefers-reduced-motion: no-preference) {
		&:not([data-animation="disabled"]) {
			animation: popover-animation
				#{variables.$db-transition-straight-emotional} normal both;

			&[data-delay="slow"] {
				animation-delay: variables.$db-transition-duration-fast;
			}

			&[data-delay="fast"] {
				animation-delay: calc(
					#{variables.$db-transition-duration-fast} / 2
				);
			}
		}
	}
}

%show-popover {
	display: revert;

	&:not([data-placement], [data-outside-vy]),
	&[data-placement^="bottom"]:not([data-outside-vy]),
	&[data-outside-vy="top"]:not([data-outside-vx]) {
		--db-popover-translate-y: -25%;

		@include get-popover-show();
	}

	&[data-placement^="top"]:not([data-outside-vy]),
	&[data-outside-vy="bottom"]:not([data-outside-vx]) {
		--db-popover-translate-y: 25%;

		@include get-popover-show();
	}

	&[data-placement^="right"]:not([data-outside-vx]),
	&[data-outside-vx="left"] {
		--db-popover-translate-x: -25%;

		@include get-popover-show();
	}

	&[data-placement^="left"]:not([data-outside-vx]),
	&[data-outside-vx="right"] {
		--db-popover-translate-x: 25%;

		@include get-popover-show();
	}
}

%default-popover {
	@extend %default-card;
	@extend %popover-placement;

	position: absolute;
	background-color: colors.$db-adaptive-bg-basic-level-1-default;
	box-shadow: variables.$db-elevation-md;
	display: none;
	z-index: 1;
	white-space: nowrap;

	&[data-width="fixed"] {
		inline-size: max-content;
		max-inline-size: variables.$db-sizing-3xl;
		// revert this if popover is included in button
		white-space: normal;
		text-align: initial;
	}
}