.app-feed-list {
  --feed-pull-distance: 0px;
  --feed-push-distance: 0px;
  position: relative;
  min-width: 0;
}

.app-feed-list--bidirectional .app-feed-list__anchor { min-width: 0; }

.app-feed-list__refresh {
  display: flex;
  height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: -38px;
  color: var(--shell-muted, var(--color-muted));
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(var(--feed-pull-distance) - 8px));
  transition: color 140ms ease, opacity 140ms ease, transform 180ms cubic-bezier(.22, .75, .3, 1);
}

.app-feed-list__refresh--bottom {
  margin-top: 0;
  margin-bottom: -38px;
  transform: translateY(calc(8px - var(--feed-push-distance)));
}

.app-feed-list__refresh span {
  display: grid;
  width: 25px;
  height: 25px;
  border: 1.5px solid color-mix(in srgb, var(--color-theme-accent), transparent 54%);
  border-radius: 50%;
  color: var(--color-theme-accent-ink);
  background: var(--color-theme-accent-soft);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  place-items: center;
}

.app-feed-list__refresh strong { font-size: 11px; font-weight: 900; }

.app-feed-list__items {
  min-width: 0;
  transform: translateY(calc(var(--feed-pull-distance) - var(--feed-push-distance)));
  transition: transform 180ms cubic-bezier(.22, .75, .3, 1);
}

.app-feed-list.is-pulling .app-feed-list__refresh--top,
.app-feed-list.is-refreshing .app-feed-list__refresh--top,
.app-feed-list.is-pushing .app-feed-list__refresh--bottom,
.app-feed-list.is-refreshing-bottom .app-feed-list__refresh--bottom { opacity: 1; }
.app-feed-list.is-pull-ready .app-feed-list__refresh--top,
.app-feed-list.is-push-ready .app-feed-list__refresh--bottom { color: var(--color-theme-accent-ink); }
.app-feed-list.is-pull-ready .app-feed-list__refresh--top span,
.app-feed-list.is-push-ready .app-feed-list__refresh--bottom span { color: #fff; background: var(--color-theme-accent); transform: scale(1.08); }
.app-feed-list.is-refreshing .app-feed-list__refresh--top span,
.app-feed-list.is-refreshing-bottom .app-feed-list__refresh--bottom span { animation: app-feed-refresh-spin 700ms linear infinite; }

.app-feed-list__sentinel {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.app-feed-list__sentinel--top { margin-top: -8px; }
.app-feed-list__sentinel[hidden] { display: none; }
.app-feed-list__sentinel span {
  width: 22px;
  height: 22px;
  border: 2px solid color-mix(in srgb, var(--color-theme-accent), transparent 76%);
  border-top-color: var(--color-theme-accent);
  border-radius: 50%;
  animation: app-feed-refresh-spin 780ms linear infinite;
}

.offer-community-feed__items { display: grid; gap: 14px; }

@keyframes app-feed-refresh-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .app-feed-list__refresh,
  .app-feed-list__items { transition: none; }
  .app-feed-list.is-refreshing .app-feed-list__refresh span,
  .app-feed-list.is-refreshing-bottom .app-feed-list__refresh span,
  .app-feed-list__sentinel span { animation-duration: 1400ms; }
}