/* web/styles/offline.css */
/* Whether a page is held offline: the bar's bordered icon control (`.bar-button.bar-icon`), drawn
   as the download mark with what its state draws over it (`offline/marks.mjs`). Its words are its
   tooltip. */
#offline-status {
  position: relative;
}

/* What a state says, as a badge over the mark's top-right corner (`offline/marks.mjs`). The mark is
   0.9rem, centred in the button; the badge's centre stands 1.5px beyond the mark's right edge and
   4.5px below the button's top, which keeps it inside the button and clear of the arrow. */
.offline-badge {
  position: absolute;
  top: 0;
  left: calc(50% + 0.45rem - 3px);
  width: 9px;
  height: 9px;
  pointer-events: none;
}
/* The mark is cut away under the badge, so its strokes never run into the sign, and the button's
   own ground shows there in every state, hovered or not. The cut is the badge's circle, placed in
   the mark's own box: 1.5px beyond its right edge, and 4.5px below the button's top, from which the
   mark stands half of what the button's height leaves (`--bar-control-height`), past the border. */
#offline-status:has(.offline-badge) > .control-glyph {
  mask-image: radial-gradient(
    circle at calc(100% + 1.5px) calc(1px + 4.5px - (var(--bar-control-height) - 0.9rem) / 2),
    transparent 4.5px,
    #000 4.5px
  );
}

/* Held is a green tick, a failure a red cross; not asked for is a cross in the mark's own stroke. */
.offline-over {
  stroke: currentColor;
}
.offline-over[data-kind='saved'] {
  stroke: var(--success);
}
.offline-over[data-kind='error'] {
  stroke: var(--alert);
}

/* A copy under way: a ring around the mark, filled as far as the copy has arrived. */
.offline-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19px;
  height: 19px;
  transform: translate(-50%, -50%) rotate(-90deg);
  fill: none;
  stroke-width: 2;
  pointer-events: none;
}
.offline-track {
  stroke: var(--line);
}
.offline-fill {
  stroke: var(--accent);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--loaded, 0));
  transition: stroke-dashoffset 0.2s linear;
}
@media (prefers-reduced-motion: reduce) {
  .offline-fill {
    transition: none;
  }
}

.offline-note {
  color: var(--muted);
  font-size: 0.75rem;
}