.egw-animate {
	position: relative;
	overflow: hidden;
	--egw-fill-progress: 0%;
	--egw-fill-color: #111111;
	will-change: transform, opacity, filter, clip-path;
	backface-visibility: hidden;
}

.egw-animate.egw-fill-left-right::before,
.egw-animate.egw-fill-right-left::before,
.egw-animate.egw-fill-top-bottom::before,
.egw-animate.egw-fill-bottom-top::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--egw-fill-color);
	pointer-events: none;
	z-index: 0;
}

.egw-animate.egw-fill-left-right::before {
	transform-origin: left center;
	transform: scaleX(calc(var(--egw-fill-progress) / 100));
}

.egw-animate.egw-fill-right-left::before {
	transform-origin: right center;
	transform: scaleX(calc(var(--egw-fill-progress) / 100));
}

.egw-animate.egw-fill-top-bottom::before {
	transform-origin: center top;
	transform: scaleY(calc(var(--egw-fill-progress) / 100));
}

.egw-animate.egw-fill-bottom-top::before {
	transform-origin: center bottom;
	transform: scaleY(calc(var(--egw-fill-progress) / 100));
}

.egw-animate > * {
	position: relative;
	z-index: 1;
}

.egw-flip-active {
	transform: scale(1.06) rotate(2deg);
}

.egw-part {
	display: inline-block;
}