@use "@automattic/jetpack-base-styles/style";

$arrow-color: var(--jp-gray);

// Fix arrow color
.components-popover:not(.is-without-arrow)::before {
	border-color: $arrow-color;
}

// Namespace to avoid overriding global styles
.icon-tooltip-helper {
	// POPOVER_HELPER_WIDTH
	width: 124px;
	height: 18px;
	position: absolute;
	top: 0;
	// -( POPOVER_HELPER_WIDTH / 2 - iconSize / 2 ) + 'px'
	left: -53px;
	pointer-events: none;

	/*
	* Fix arrow placement - section start
	*/
	.components-popover:not([data-y-axis="middle"])[data-x-axis="left"] .components-popover__content {
		margin-right: -62px;
	}

	.components-popover:not([data-y-axis="middle"])[data-x-axis="right"] .components-popover__content {
		margin-left: -62px;
	}

	/*
	* Fix arrow placement - section end
	*/

	/*
	* Fix arrow position for legacy position option - section start
	*/
	.components-popover[data-y-axis="bottom"] .components-popover__content {
		top: 2px !important;
	}

	.components-popover:not(.is-without-arrow)[data-y-axis="bottom"]::before {
		top: -6px !important;
	}

	.components-popover:not(.is-without-arrow)[data-y-axis="bottom"]::after {
		top: -4px !important;
	}

	.components-popover[data-y-axis="top"] .components-popover__content {
		bottom: 10px !important;
	}

	.components-popover:not(.is-without-arrow)[data-y-axis="top"]::before {
		bottom: 3px;
	}

	.components-popover:not(.is-without-arrow)[data-y-axis="top"]::after {
		bottom: 4px;
	}

	/*
	* Fix arrow position for legacy position option - section end
	*/

	&.is-wide .components-popover__content {
		width: 440px;
	}
}

.icon-tooltip-wrapper {
	display: inline-block;
	position: relative;
	color: var(--jp-black);

	.components-button.is-link:focus:not(:disabled) {
		box-shadow: none;
	}
}

.icon-tooltip-container {
	// Recover events
	pointer-events: all;

	// __content styles here covers both the inline and portal modes
	.components-popover__content {
		padding: 24px;
		width: 304px;
		white-space: normal;
		border-radius: 4px;
		outline: none;
		border: 1px solid $arrow-color;
		max-width: 90vw;
		margin: 0 10px;
	}
}

.icon-tooltip-title {
	font-weight: 600;
	font-size: 16px;
	line-height: 19px;

	&:not(:last-child) {
		margin-bottom: 8px;
	}
}

.icon-tooltip-content {
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;

	// Allow bulleted lists in tooltips.
	ul {
		margin: 0 0 0 1rem;
		list-style-type: disc;
	}

	// Remove bottom margin from last list item.
	ul li:last-child {
		margin-bottom: 0;
	}
}
