.afv-product-editor__icon--contextual-help {
	-webkit-mask-image: url("../icons/editor/help.svg");
	mask-image: url("../icons/editor/help.svg");
}

.afv-product-editor__contextual-help-button.is-active {
	border-color: #58aee8;
	background: #d9efff;
	color: #2b7fb8;
}

.afv-product-editor-contextual-help__target {
	cursor: help;
}

.afv-product-editor-contextual-help__tooltip {
	--afv-contextual-help-background: #3d3d3d;
	--afv-contextual-help-color: #ffffff;
	--afv-contextual-help-icon-color: #ffffff;
	--afv-contextual-help-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	position: fixed;
	z-index: 2147483000;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	align-items: center;
	column-gap: 24px;
	box-sizing: border-box;
	width: max-content;
	max-width: min(300px, calc(100vw - 24px));
	padding: 18px 24px;
	border: 0;
	border-radius: 8px;
	background: var(--afv-contextual-help-background);
	color: var(--afv-contextual-help-color);
	box-shadow: var(--afv-contextual-help-shadow);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	white-space: normal;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.afv-product-editor-contextual-help__tooltip::after {
	position: absolute;
	left: var(--afv-contextual-help-arrow-left, 50%);
	bottom: -8px;
	width: 0;
	height: 0;
	border-top: 8px solid var(--afv-contextual-help-background);
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	content: "";
	transform: translateX(-50%);
}

.afv-product-editor-contextual-help__tooltip.is-below::after {
	top: -8px;
	bottom: auto;
	border-top: 0;
	border-bottom: 8px solid var(--afv-contextual-help-background);
}

.afv-product-editor-contextual-help__tooltip--helper {
	--afv-contextual-help-background: #ffffff;
	--afv-contextual-help-color: #135e96;
	--afv-contextual-help-icon-color: #2271b1;
	--afv-contextual-help-shadow: 0 0 0 1px #72aee6, 0 2px 8px rgba(34, 113, 177, 0.22);
}

.afv-product-editor-contextual-help__tooltip--yellow {
	--afv-contextual-help-background: #ffd500;
	--afv-contextual-help-color: #111111;
	--afv-contextual-help-icon-color: #111111;
	--afv-contextual-help-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
}

.afv-product-editor-contextual-help__tooltip-icon {
	display: block;
	width: 32px;
	height: 32px;
	background: var(--afv-contextual-help-icon-color);
	-webkit-mask-image: url("../icons/editor/help.svg");
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-image: url("../icons/editor/help.svg");
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

.afv-product-editor-contextual-help__tooltip-text {
	min-width: 0;
}

.afv-product-editor-contextual-help__tooltip[hidden] {
	display: none;
}