Untitled

:root {
	--xpo-support-color-primary: #335cff;
	--xpo-support-color-secondary: #4263eb;
	--xpo-support-color-base-one: #ffffff;
	--xpo-support-color-base-two: #e1e7ff;
	--xpo-support-color-green: #09fd09;
	--xpo-support-color-red: #fb3748;
	--xpo-support-color-reverse: #ffffff;
}

.xpo-support-animation {
	border-radius: 50%;
	display: block;
	margin: 0 auto;
	stroke-width: 2;
	stroke: var(--xpo-support-color-base-one, #ffffff);
	stroke-miterlimit: 10;
	box-shadow: inset 0 0 0 var(--xpo-support-color-base-two, #e1e7ff);
	animation:
		fill-message 0.4s ease-in-out 0.4s forwards,
		scale-message 0.3s ease-in-out 0.9s both;
	-webkit-animation:
		fill-message 0.4s ease-in-out 0.4s forwards,
		scale-message 0.3s ease-in-out 0.9s both;
}
.xpo-support-circle {
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	stroke-width: 2;
	stroke-miterlimit: 10;
	stroke: var(--xpo-support-color-base-two, #e1e7ff);
	fill: none;
	animation: stroke-message 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
	-webkit-animation: stroke-message 0.6s cubic-bezier(0.65, 0, 0.45, 1)
		forwards;
}
.xpo-support-check {
	stroke-width: 2;
	stroke: var(--xpo-support-color-primary, #335cff);
}
@keyframes scale-message {
	0%,
	100% {
		transform: none;
	}
	50% {
		transform: scale3d(1.1, 1.1, 1);
	}
}
@keyframes fill-message {
	100% {
		box-shadow: inset 0px 0px 0px 30px var(--xpo-support-color-base-two);
	}
}
@keyframes stroke-message {
	100% {
		stroke-dashoffset: 0;
	}
}

/* WordPress Components Styles */
.xpo-support-dropdown {
	.components-popover__content {
		padding: 0;
		width: 80vw;
		max-width: 400px;
	}
}