.styleSideTimerBox {
	display: inline;
	width: fit-content !important;

	text-shadow:
		1px 1px 3px white, -1px 1px 3px white, 1px -1px 3px white, -1px -1px 3px white,
		0 1px 3px white, 0 -1px 3px white, 1px 0 3px white, -1px 0 3px white
		!important;
	background:
		linear-gradient(
			-0.25turn,
			color-mix(in srgb, var(--borderBColor), transparent 100%),
			color-mix(in srgb, var(--borderBColor), transparent 100%) var(--percent),
			color-mix(in srgb, var(--borderBColor), transparent 0%) calc(var(--percent) + 1px),
			color-mix(in srgb, var(--borderBColor), transparent 0%)
		),
		var(--backgroundA)
		!important;
}

.styleSideTimerBox[data-timeout="true"] {
	padding: 0; margin: 0;
}
.styleSideTimerBox {
	opacity: 0; max-height: 0;
	transform: translateX(-20px);
	/* should do some tweeking for the below */
	transition:
	opacity var(--baseAnimationLength),
	max-height var(--baseAnimationLength) cubic-bezier(1,0,0,1),
	padding var(--baseAnimationLength),
	margin var(--baseAnimationLength),
	transform var(--baseAnimationLength);
	overflow: hidden;
}
.styleSideTimerBox[data-timeout="false"] {
	opacity: 1; max-height: 50vh;
	transform: translateX(0px);
}