/**
 * Oxygen "Self-Hosted Video" element.
 *
 * .hora-shv is Oxygen's auto-generated wrapper (class_names()). Aspect ratio and
 * object-fit are inline per instance, so nothing here needs regenerating when a
 * setting changes.
 */

.hora-shv {
  position: relative;
}

.hora-shv__video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
}

.hora-shv__empty {
  padding: 2rem 1rem;
  text-align: center;
  border: 1px dashed currentColor;
  opacity: 0.6;
}

.hora-shv__unmute {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.hora-shv__unmute:hover,
.hora-shv__unmute:focus-visible {
  background: rgba(0, 0, 0, 0.8);
}

.hora-shv__unmute:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.hora-shv__unmute svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

/* aria-pressed mirrors "sound on": false = muted. */
.hora-shv__unmute .hora-shv__icon-sound,
.hora-shv__unmute[aria-pressed="true"] .hora-shv__icon-muted {
  display: none;
}

.hora-shv__unmute[aria-pressed="true"] .hora-shv__icon-sound {
  display: block;
}