.cqr-x {
    padding: 0 .25rem;
    color: var(--theme-alert-color--hover);
    font-weight: 700;
    cursor: pointer;
    display: none;
    text-transform: uppercase;
}

/* ve'd categories hack */
#articleCategories .categories .cqr-x {
    position: relative;
}

.cqr-ask {
    position: absolute;
    background-color: gray;
    color: black;
    text-align: center;
    overflow: hidden;
	
	/* Centralizes gradient bar (::before) when using `position: absolute`. */
	align-items: center;
	display: flex;
	justify-content: center;

	/* Needed to display gradient bar above this element. */
	z-index: 1;
}

.cqr-ask::before {
    animation: cqr-ask 10s forwards linear;
	background: linear-gradient(to var(--gradient-zone-direction, right), red calc(50% - var(--gradient-zone-size, 12px)), yellow 50%, lightgreen calc(50% + var(--gradient-zone-size, 12px)));
	content: '';
	height: 100%;
	position: absolute;
	transform: translateX(-25%);
	width: calc(200% + var(--gradient-zone-size, 12px) * 4);

	/* Places gradient behind text. */
	z-index: -1;
}

html[dir="rtl"] .cqr-ask::before {
	--gradient-zone-direction: left;
    animation-name: cqr-ask-rtl;
	transform: translateX(25%);
}

#articleCategories li:not(.tool):hover .cqr-x {
    display: initial;
}

#articleCategories .cqr-ask ~ .cqr-x {
    display: none;
}

@keyframes cqr-ask {
    100% {
		transform: translateX(25%);
	}
}

@keyframes cqr-ask-rtl {
    100% {
		transform: translateX(-25%);
	}
}