.isl-pop__trigger {
	--isl-pop-icon-size: 0.85em;
	--isl-pop-icon-gap: 0.3em;
	--isl-pop-icon-offset: 0px;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--isl-pop-icon-size);
	block-size: var(--isl-pop-icon-size);
	margin: 0;
	margin-inline-start: var(--isl-pop-icon-gap);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--isl-pop-icon-color, currentColor);
	font: inherit;
	font-size: var(--isl-pop-icon-size);
	line-height: 1;
	vertical-align: middle;
	translate: 0 var(--isl-pop-icon-offset);
	cursor: help;
	transition-property: color, inline-size, block-size, font-size, margin;
	transition-duration: var(--isl-pop-icon-transition, 0.2s);
	transition-timing-function: ease;
}

.isl-pop__glue {
	white-space: nowrap;
}

.isl-pop__trigger:is(:hover, :focus-visible) {
	color: var(--isl-pop-icon-color-hover, var(--isl-pop-icon-color, currentColor));
}

.isl-pop__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.isl-pop__trigger > :is(i, svg, span) {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	font-size: inherit;
	line-height: 1;
}

.isl-pop__trigger svg {
	inline-size: 100%;
	block-size: 100%;
	transition-property: fill, stroke, stroke-width, transform;
	transition-duration: var(--isl-pop-icon-transition, 0.2s);
	transition-timing-function: ease;
}

.isl-pop__trigger svg:not([fill]) {
	fill: currentColor;
}

.isl-pop {
	--isl-pop-gap: 10px;
	--isl-pop-arrow: 8px;
	--isl-pop-width: 280px;
	--isl-pop-duration: 300ms;
	box-sizing: border-box;
	inline-size: max-content;
	max-inline-size: min(var(--isl-pop-width), calc(100vw - 32px));
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	overflow: visible;
	text-align: start;
	white-space: normal;
	letter-spacing: normal;
	text-transform: none;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

.isl-pop__panel {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	padding: 12px 16px;
	border-radius: 8px;
	background-color: Canvas;
	color: var(--e-global-color-text, CanvasText);
	box-shadow: 0 6px 24px rgb(0 0 0 / 0.14);
}

/*
 * Defaults from the global typography and colors of the site. The controls
 * have no global defaults, so nothing is printed for widgets without a
 * popover; the Typography, color and background controls override these.
 */
.isl-pop__content {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-weight: var(--e-global-typography-text-font-weight);
}

.isl-pop .isl-pop__button {
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: var(--e-global-typography-accent-font-weight);
	background-color: var(--e-global-color-accent);
}

/* Hover opens immediately (like JetTricks); the close delay control overrides the end delay. */
.isl-pop__trigger {
	interest-delay-start: 0s;
	interest-delay-end: 300ms;
}

.isl-pop__content ul,
.isl-pop__content ol {
	padding-inline-start: 15px;
}

.isl-pop__content li {
	margin-block: 0.7em;
}

.isl-pop__content > :first-child {
	margin-block-start: 0;
}

.isl-pop__content > :last-child {
	margin-block-end: 0;
}

.isl-pop__actions {
	display: flex;
	justify-content: var(--isl-pop-btn-justify, flex-start);
	margin-block-start: var(--isl-pop-btn-spacing, 12px);
}

.isl-pop__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--isl-pop-btn-gap, 0.5em);
	inline-size: var(--isl-pop-btn-width, auto);
	box-sizing: border-box;
	text-decoration: none;
	cursor: pointer;
	transition-property: color, background-color, border-color, gap;
	transition-duration: var(--isl-pop-btn-transition, 0.2s);
	transition-timing-function: ease;
}

.isl-pop__button-icon {
	display: inline-flex;
	font-size: var(--isl-pop-btn-icon-size, 1em);
	line-height: 1;
	transition: font-size var(--isl-pop-btn-transition, 0.2s) ease;
}

.isl-pop__button-icon svg {
	inline-size: 1em;
	block-size: 1em;
	transition-property: fill, stroke, stroke-width, transform;
	transition-duration: var(--isl-pop-btn-transition, 0.2s);
	transition-timing-function: ease;
}

.isl-pop__button-icon svg:not([fill]) {
	fill: currentColor;
}

@supports (position-area: top) {
	.isl-pop {
		position-try-fallbacks: flip-block;
		inset: auto;
		margin: 0;
	}

	.isl-pop--top {
		position-area: top center;
		margin-bottom: var(--isl-pop-gap);
	}

	.isl-pop--bottom {
		position-area: bottom center;
		margin-top: var(--isl-pop-gap);
	}

	.isl-pop--left {
		position-area: center left;
		position-try-fallbacks: flip-inline;
		margin-right: var(--isl-pop-gap);
	}

	.isl-pop--right {
		position-area: center right;
		position-try-fallbacks: flip-inline;
		margin-left: var(--isl-pop-gap);
	}
}

@supports (container-type: anchored) {
	.isl-pop--arrow {
		container-type: anchored;
	}

	.isl-pop--arrow .isl-pop__panel::before {
		content: "";
		position: absolute;
		z-index: -1;
		inline-size: calc(var(--isl-pop-arrow) * 1.4142);
		block-size: calc(var(--isl-pop-arrow) * 1.4142);
		background: inherit;
		border: inherit;
		border-radius: 2px;
		rotate: 45deg;
	}

	.isl-pop--arrow:is(.isl-pop--top, .isl-pop--bottom) .isl-pop__panel::before {
		left: 50%;
		translate: -50% 0;
	}

	.isl-pop--arrow:is(.isl-pop--left, .isl-pop--right) .isl-pop__panel::before {
		top: 50%;
		translate: 0 -50%;
	}

	.isl-pop--arrow.isl-pop--top .isl-pop__panel::before {
		bottom: calc(var(--isl-pop-arrow) * -0.7071);
	}

	.isl-pop--arrow.isl-pop--bottom .isl-pop__panel::before {
		top: calc(var(--isl-pop-arrow) * -0.7071);
	}

	.isl-pop--arrow.isl-pop--left .isl-pop__panel::before {
		right: calc(var(--isl-pop-arrow) * -0.7071);
	}

	.isl-pop--arrow.isl-pop--right .isl-pop__panel::before {
		left: calc(var(--isl-pop-arrow) * -0.7071);
	}

	@container anchored(fallback: flip-block) {
		.isl-pop--arrow.isl-pop--top .isl-pop__panel::before {
			top: calc(var(--isl-pop-arrow) * -0.7071);
			bottom: auto;
		}

		.isl-pop--arrow.isl-pop--bottom .isl-pop__panel::before {
			bottom: calc(var(--isl-pop-arrow) * -0.7071);
			top: auto;
		}
	}

	@container anchored(fallback: flip-inline) {
		.isl-pop--arrow.isl-pop--left .isl-pop__panel::before {
			left: calc(var(--isl-pop-arrow) * -0.7071);
			right: auto;
		}

		.isl-pop--arrow.isl-pop--right .isl-pop__panel::before {
			right: calc(var(--isl-pop-arrow) * -0.7071);
			left: auto;
		}
	}
}

/*
 * Entrance animations, the same as the JetTricks tooltip (Tippy.js, the
 * values of its CSS and its default timing: 300ms in, 250ms out, ease): Fade,
 * Shift-Away (class --slide), Shift-Toward, Scale and Perspective. The
 * hidden state is the start of the entrance (@starting-style) and the end of
 * the exit; display and overlay are transitioned so the exit plays too.
 * Transforms move toward or away from the icon by the placement.
 */
.isl-pop:not(.isl-pop--none) {
	opacity: 0;
	transition-property: opacity, translate, scale, transform, display, overlay;
	/* Exit, like the JetTricks tooltip: 250ms for an entrance of 300ms. */
	transition-duration: calc(var(--isl-pop-duration) * 0.8333);
	transition-timing-function: ease;
	transition-behavior: allow-discrete;
}

/* The side of the popover that faces the icon. */
.isl-pop--top {
	--isl-pop-toward-x: 0px;
	--isl-pop-toward-y: 10px;
	transform-origin: bottom center;
}

.isl-pop--bottom {
	--isl-pop-toward-x: 0px;
	--isl-pop-toward-y: -10px;
	transform-origin: top center;
}

.isl-pop--left {
	--isl-pop-toward-x: 10px;
	--isl-pop-toward-y: 0px;
	transform-origin: center right;
}

.isl-pop--right {
	--isl-pop-toward-x: -10px;
	--isl-pop-toward-y: 0px;
	transform-origin: center left;
}

/* Hidden states. */
.isl-pop--slide {
	translate: var(--isl-pop-toward-x) var(--isl-pop-toward-y);
}

.isl-pop--shift-toward {
	translate: calc(var(--isl-pop-toward-x) * -1) calc(var(--isl-pop-toward-y) * -1);
}

.isl-pop--scale {
	scale: 0.5;
}

.isl-pop--perspective.isl-pop--top {
	transform: perspective(700px) translateY(8px) rotateX(60deg);
}

.isl-pop--perspective.isl-pop--bottom {
	transform: perspective(700px) translateY(-8px) rotateX(-60deg);
}

.isl-pop--perspective.isl-pop--left {
	transform: perspective(700px) translateX(8px) rotateY(-60deg);
}

.isl-pop--perspective.isl-pop--right {
	transform: perspective(700px) translateX(-8px) rotateY(60deg);
}

/* Open state. */
.isl-pop:not(.isl-pop--none):popover-open {
	opacity: 1;
	translate: 0 0;
	scale: 1;
	transform: none;
	transition-duration: var(--isl-pop-duration);
}

/* Like Tippy: the open state keeps the perspective, so the rotation eases
   out smoothly instead of the perspective jumping. */
.isl-pop.isl-pop--perspective:popover-open {
	transform: perspective(700px);
}

/* Same specificity as the open state (three classes), so these win. */
@starting-style {
	.isl-pop:not(.isl-pop--none):popover-open {
		opacity: 0;
	}

	.isl-pop.isl-pop--slide:popover-open {
		translate: var(--isl-pop-toward-x) var(--isl-pop-toward-y);
	}

	.isl-pop.isl-pop--shift-toward:popover-open {
		translate: calc(var(--isl-pop-toward-x) * -1) calc(var(--isl-pop-toward-y) * -1);
	}

	.isl-pop.isl-pop--scale:popover-open {
		scale: 0.5;
	}

	.isl-pop--perspective.isl-pop--top:popover-open {
		transform: perspective(700px) translateY(8px) rotateX(60deg);
	}

	.isl-pop--perspective.isl-pop--bottom:popover-open {
		transform: perspective(700px) translateY(-8px) rotateX(-60deg);
	}

	.isl-pop--perspective.isl-pop--left:popover-open {
		transform: perspective(700px) translateX(8px) rotateY(-60deg);
	}

	.isl-pop--perspective.isl-pop--right:popover-open {
		transform: perspective(700px) translateX(-8px) rotateY(60deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.isl-pop:not(.isl-pop--none),
	.isl-pop:not(.isl-pop--none):popover-open {
		transition-duration: 1ms;
		scale: 1;
		translate: 0 0;
		transform: none;
	}
}