/* The "sync to live" chip -- see live-feed-sync.js for why it exists and why
   it cannot simply tell you how far behind you are.

   Deliberately quiet. It sits over somebody's stream, and for most of a match
   there is nothing wrong; a permanent badge shouting about latency would cost
   picture and attention for a problem the viewer does not have. Idle it is a
   single glyph at a third of full strength, growing a label only when it has
   something to say -- the tab was hidden long enough that the feed is probably
   behind -- or when the pointer is on it. */

.feed-sync {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin: 0;
  padding: 5px 9px;
  border: 0;
  border-radius: 999px;

  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.55);

  cursor: pointer;
  opacity: 0.35;
  transition: opacity 160ms ease, background-color 160ms ease;
}

.feed-sync:hover,
.feed-sync:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.78);
}

.feed-sync__glyph {
  display: block;
  font-size: 13px;
  line-height: 1;
}

/* Empty while idle, so the chip collapses to its glyph. */
.feed-sync__text:empty {
  display: none;
}

/* Probably behind: amber, and it says so. Still a button, not a warning --
   there is nothing to apologise for, and the only useful thing to say is that
   one click fixes it. */
.feed-sync[data-state='behind'] {
  opacity: 1;
  background: rgba(214, 142, 24, 0.94);
}

.feed-sync[data-state='working'] {
  opacity: 1;
  background: rgba(0, 0, 0, 0.78);
  cursor: default;
}

.feed-sync[data-state='working'] .feed-sync__glyph {
  animation: feed-sync-spin 900ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .feed-sync[data-state='working'] .feed-sync__glyph {
    animation: none;
  }
}

/* Touch has no hover, so the idle chip would be permanently half-invisible and
   permanently the wrong size for a thumb. */
@media (hover: none) {
  .feed-sync {
    opacity: 0.6;
    padding: 7px 11px;
  }
}