/* Play control for Quarto fences marked .live */

.fpl-live-wrap {
  position: relative;
}

.fpl-live-play {
  appearance: none;
  border: 1px solid #ced4da;
  background: #fff;
  color: #212529;
  border-radius: 0.25rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  line-height: 1;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fpl-live-play:hover {
  background: #f8f9fa;
}

.fpl-live-play:disabled {
  opacity: 0.55;
  cursor: wait;
}

.fpl-live-play::before {
  content: "▶";
}

.sourceCode.live code,
div.sourceCode.live code {
  outline: none;
}

.sourceCode.live code:focus,
div.sourceCode.live code:focus {
  box-shadow: inset 0 0 0 1px #adb5bd;
}

.fpl-live-out {
  margin: 0.35rem 0 1.25rem;
  padding: 0.6rem 0.75rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  font-size: 0.875em;
  white-space: pre-wrap;
  word-break: break-word;
}

.fpl-live-out[data-ok="0"] {
  border-color: #f5c2c7;
  background: #f8d7da;
}

.fpl-live-out:empty {
  display: none;
}

.fpl-live-check {
  appearance: none;
  border: 1px solid #ced4da;
  background: #fff;
  color: #198754;
  border-radius: 0.25rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  line-height: 1;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
}

.fpl-live-check:hover {
  background: #f8f9fa;
}

.fpl-live-check:disabled {
  opacity: 0.55;
  cursor: wait;
}

.fpl-live-out.fpl-live-check-pass {
  border-color: #a3cfbb;
  background: #d1e7dd;
}

.fpl-live-out.fpl-live-check-fail {
  border-color: #f5c2c7;
  background: #f8d7da;
}