@use "@db-ui/foundations/build/styles/helpers/functions";
@use "@db-ui/foundations/build/styles/variables";
@use "@db-ui/foundations/build/styles/colors";
@use "@db-ui/foundations/build/styles/fonts";
@use "../../styles/internal/popover-component";
@use "../../styles/internal/component";

$tooltip-arrow-shadow-size: variables.$db-sizing-2xs;

.db-tooltip {
	--default-card-elevation: #{variables.$db-elevation-sm};
	--default-card-border-radius: #{variables.$db-border-radius-xs};

	@extend %db-overwrite-font-size-sm;
	@extend %popover-center;
	@extend %default-popover;

	background-color: colors.$db-adaptive-bg-basic-level-1-default;
	color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;

	// i HTML tags browsers default styling reset
	font-style: normal;

	// surrounding tags styling reset
	font-weight: initial;
	padding: variables.$db-spacing-fixed-2xs variables.$db-spacing-fixed-xs;

	&::after {
		background-color: colors.$db-adaptive-bg-basic-level-1-default;
	}

	// Only for testing
	&[data-e2e-hover="true"] {
		@extend %show-popover;
	}

	// Arrow
	&:not([data-variant="basic"]) {
		&::after {
			@extend %component-border;

			content: "";
			box-shadow: variables.$db-elevation-md;
			position: absolute;
			background-color: colors.$db-adaptive-bg-basic-level-1-default;
			inline-size: $tooltip-arrow-shadow-size;
			block-size: $tooltip-arrow-shadow-size;
			clip-path: polygon(
				calc(#{$tooltip-arrow-shadow-size} * -1)
					calc(#{$tooltip-arrow-shadow-size} * -1),
				calc(100% + #{$tooltip-arrow-shadow-size})
					calc(#{$tooltip-arrow-shadow-size} * -1),
				calc(100% + #{$tooltip-arrow-shadow-size})
					calc(100% + #{$tooltip-arrow-shadow-size})
			);
			 /* stylelint-disable-next-line db-ui/use-border-radius */
			border-radius: 0 2px;
			transform: skew(-8deg, -8deg);
		}
	}

	&:not([data-placement], [data-outside-vy]),
	&[data-placement^="bottom"]:not([data-outside-vy]),
	&[data-outside-vy="top"]:not([data-outside-vx]) {
		&::after {
			inset-inline-start: 50%;
			inset-block-start: 0;
			translate: -50% -50%;
			rotate: 315deg;
		}
	}

	&[data-placement^="top"]:not([data-outside-vy]),
	&[data-outside-vy="bottom"]:not([data-outside-vx]) {
		&::after {
			inset-inline-start: 50%;
			inset-block-end: 0;
			translate: -50% 50%;
			rotate: 135deg;
		}
	}

	&[data-placement^="right"]:not([data-outside-vx]),
	&[data-outside-vx="left"] {
		&::after {
			inset-block-start: 50%;
			inset-inline-start: 0;
			translate: -50% -50%;
			rotate: 225deg;
		}
	}

	&[data-placement^="left"]:not([data-outside-vx]),
	&[data-outside-vx="right"] {
		&::after {
			inset-block-start: 50%;
			inset-inline-end: 0;
			translate: 50% -50%;
			rotate: 45deg;
		}
	}

	&[data-emphasis="strong"] {
		background-color: colors.$db-adaptive-bg-inverted-contrast-high-default;
		color: colors.$db-adaptive-on-bg-inverted-default;

		&::before {
			--db-icon-color: #{colors.$db-adaptive-on-bg-inverted-default};
		}

		&::after {
			background-color: colors.$db-adaptive-bg-inverted-contrast-high-default;
		}
	}
}

// Global styles

@mixin show-popover($state) {
	[data-has-tooltip="true"] {
		&:#{$state} {
			.db-tooltip:first-of-type {
				@extend %show-popover;
			}
		}
	}
}

[data-has-tooltip="true"] {
	position: relative;
}

$popover-states: "hover", "focus";

@each $state in $popover-states {
	@include show-popover($state);
}