.creator-assistant-hub__ai-animated-border {
	position: relative;
	border-radius: 12px;
	z-index: 0;
	overflow: hidden;
}

.creator-assistant-hub__ai-animated-border::before {

	/* Colori del gradiente */
	--creator-assistant-hub__ai-animated-border__border-colors: #0ff, #f0f, #ff0, #0ff;

	/* Velocità animazione */
	--creator-assistant-hub__ai-animated-border__border-speed: 4s;

	/* Spessore bordo */
	--creator-assistant-hub__ai-animated-border__border-width: 3px;

	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: var(--creator-assistant-hub__ai-animated-border__border-width);
	background: linear-gradient(90deg, var(--creator-assistant-hub__ai-animated-border__border-colors));
	background-size: 300% 300%;
	animation: creator-assistant-hub__ai-border-keyframes var(--creator-assistant-hub__ai-animated-border__border-speed) linear infinite;

	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;

	z-index: -1;
}

/* Animazione gradiente */
@keyframes creator-assistant-hub__ai-border-keyframes {

	0% {
		background-position: 0% 50%;
	}

	100% {
		background-position: 300% 50%;
	}
}
