/* Copyright Ayers Electronics Inc. All rights reserved. */
/* The held-key ring (js/hold-ring.js): the words, then the bird (a held OK) or the TV Guide's glyph (a
   held GUIDE) inside a ring that fills round. */

#askHold {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 90; /* above every drawer and page, beside the toast */
  display: flex;
  align-items: center;
  pointer-events: none;
}
#askHold > * + * {
  margin-left: 14px;
}
#askHoldText {
  background: var(--scrim-soft);
  color: var(--on-scrim);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: var(--type-label);
  font-weight: 600;
}
.ask-hold-badge {
  position: relative;
  width: 64px;
  height: 64px;
  flex: none;
}
.ask-hold-ring {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ask-hold-ring circle {
  stroke-width: 3;
}
.ask-hold-track {
  fill: var(--scrim-soft);
  stroke: var(--border);
}
/* Drawn whole for a viewer who asks for less motion; filling round for everyone else. */
.ask-hold-fill {
  fill: none;
  stroke: var(--accent);
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
#askHoldMark,
#askHoldGuide {
  position: absolute;
  top: 14px;
  right: 14px;
  bottom: 14px;
  left: 14px;
  width: 36px;
  height: 36px;
}
/* The guide's glyph: a listing grid drawn in the ring's own ink. */
#askHoldGuide {
  fill: none;
  stroke: var(--on-scrim);
  stroke-width: 2.5;
  stroke-linecap: round;
}
@media (prefers-reduced-motion: no-preference) {
  .ask-hold-fill {
    stroke-dashoffset: 100;
    animation: ask-hold-fill var(--ask-hold-fill-ms, 2500ms) linear forwards;
  }
}
@keyframes ask-hold-fill {
  to {
    stroke-dashoffset: 0;
  }
}