.ptik-scroll-fill {
	position: relative;
	display: inline;
	background-image: linear-gradient(to left, var(--ptik-fill-color, #f5c518) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-position var(--ptik-fill-duration, 1200ms) ease;
}

.ptik-scroll-fill.is-filled {
	background-position: 100% 0;
}

.ptik-scroll-fill--underline {
	background: none !important;
	padding-bottom: 2px;
}

.ptik-scroll-fill--underline::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 5px;
	left: 0;
	height: 2px;
	background: var(--ptik-fill-color, #f5c518);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--ptik-fill-duration, 1200ms) ease;
}

.ptik-scroll-fill--underline.is-filled::after {
	transform: scaleX(1);
}

.ptik-scroll-fill__text {
	position: relative;
	z-index: 1;
}