/* The workout player: docked bar, full-screen focus mode, and the states it
   paints onto the workout list. */

.player-bar:not([hidden]) {
  animation: player-rise 0.2s ease-out;
}

.player-focus:not([hidden]) {
  animation: player-rise 0.25s ease-out;
}

@keyframes player-rise {
  from {
    transform: translateY(1.5rem);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* The countdown ring empties as the segment runs down. Rest is dimmer than
   work so a glance from the floor tells the phase; both follow the theme. */
.player-ring {
  transition: stroke-dashoffset 0.25s linear;
  color: black;
}

.dark .player-ring,
.player-ring:where(.dark *) {
  color: white;
}

.player-focus[data-phase="rest"] .player-ring {
  color: rgb(156 163 175); /* gray-400 */
}

.dark .player-focus[data-phase="rest"] .player-ring,
.player-focus[data-phase="rest"] .player-ring:where(.dark *) {
  color: rgb(107 114 128); /* gray-500 */
}

.player-focus[data-phase="rest"] [data-player-target="focusTime"] {
  color: rgb(107 114 128); /* gray-500 */
}

.dark .player-focus[data-phase="rest"] [data-player-target="focusTime"],
.player-focus[data-phase="rest"] [data-player-target="focusTime"]:where(.dark *) {
  color: rgb(209 213 219); /* gray-300 */
}

/* Keep the list readable under the docked bar. */
body.player-docked main {
  padding-bottom: 7rem;
}

/* A page's floating action bar sits above the docked bar, not under it. */
body.player-docked .action-bar--floating {
  bottom: 7rem;
}

/* The row being worked fills left-to-right with the segment's progress. */
.player-active {
  border-radius: 0.5rem;
  background: linear-gradient(
    to right,
    rgb(0 0 0 / 0.07) calc(var(--player-progress, 0) * 100%),
    transparent calc(var(--player-progress, 0) * 100%)
  );
}

.dark .player-active,
.player-active:where(.dark *) {
  background: linear-gradient(
    to right,
    rgb(255 255 255 / 0.12) calc(var(--player-progress, 0) * 100%),
    transparent calc(var(--player-progress, 0) * 100%)
  );
}

.player-complete .exercise-name,
.player-complete .exercise-mode {
  opacity: 0.4;
}

.player-complete .exercise-name {
  text-decoration: line-through;
}

/* Set dots in focus mode. */
.player-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: rgb(209 213 219); /* gray-300 */
}

.dark .player-dot,
.player-dot:where(.dark *) {
  background: rgb(75 85 99); /* gray-600 */
}

.player-dot--done,
.player-dot--current {
  background: black;
}

.dark .player-dot--done,
.player-dot--done:where(.dark *),
.dark .player-dot--current,
.player-dot--current:where(.dark *) {
  background: white;
}

.player-dot--current {
  animation: player-pulse 1.2s ease-in-out infinite;
}

@keyframes player-pulse {
  50% {
    opacity: 0.35;
  }
}