/* =========================
   PWA / mobile pull-to-refresh
   ========================= */

.pull-to-refresh-indicator {
	position: fixed;
	top: calc(8px + env(safe-area-inset-top, 0px));
	left: 50%;
	z-index: 2147482500;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .98);
	box-shadow: 0 7px 20px rgba(0, 0, 0, .14);
	opacity: 0;
	pointer-events: none;
	transform: translate3d(-50%, -66px, 0) scale(.86);
	transition:
		opacity .14s ease-out,
		transform .12s cubic-bezier(.2, .8, .2, 1);
}

html.is-pull-to-refresh-dragging .pull-to-refresh-indicator {
	transition:
		opacity .1s ease-out,
		transform .03s linear;
}

.pull-to-refresh-svg {
	display: block;
	width: 24px;
	height: 24px;
	overflow: visible;
}

.pull-to-refresh-track,
.pull-to-refresh-progress {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pull-to-refresh-track {
	stroke: #e7e7e7;
	stroke-width: 3.2;
}

.pull-to-refresh-progress {
	stroke: #b04a63;
	stroke-width: 3.2;
	stroke-dasharray: 56.55;
	stroke-dashoffset: var(--pull-to-refresh-dash-offset, 56.55);
	transform: rotate(-90deg);
	transform-origin: 12px 12px;
	transition: stroke .12s ease-out;
}

html.is-pull-to-refresh-ready .pull-to-refresh-progress {
	stroke: #b04a63;
}

html.is-pull-to-refresh-ready .pull-to-refresh-indicator {
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

html.is-pull-to-refresh-visible .pull-to-refresh-indicator {
	opacity: 1;
	transform: translate3d(-50%, var(--pull-to-refresh-offset, 0px), 0) scale(1);
}

html.is-pull-to-refresh-loading .pull-to-refresh-indicator {
	opacity: 1;
	transform: translate3d(-50%, 34px, 0) scale(1);
}

html.is-pull-to-refresh-loading .pull-to-refresh-svg {
	animation: pull-to-refresh-spin .72s linear infinite;
}

html.is-pull-to-refresh-loading .pull-to-refresh-progress {
	stroke-dashoffset: 14;
}

@keyframes pull-to-refresh-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@media (min-width: 768px) {
	.pull-to-refresh-indicator {
		display: none;
	}
}