@import "https://unpkg.com/@liqvid/recording/dist/style.css";

video {
  width: 100%;
}

/* default values */
.lv-player {
  --lv-controls-height: 44px;
  --lv-elapsed-color: #AF1866;
  --lv-scrubber-color: #AF1866;
  --lv-scrub-height: 6px;
  --lv-buttons-height: calc(var(--lv-controls-height) - var(--lv-scrub-height));
  --lv-canvas-height: calc(var(--lv-height) - var(--lv-controls-height));
}

/* these ones control the aspect ratio --- updated to 16/9 */
@media (min-aspect-ratio: 16/9) {
  :root {
    font-size: 2.2vh;
  }

  .lv-player {
    --lv-height: 100vh;
    --lv-width: 177.78vh; /* 16/9 aspect ratio equivalent */
  }

  .lv-canvas {
    margin: 0 auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  :root {
    font-size: 1.25vw;
  }

  .lv-player {
    --lv-height: 56.25vw; /* 16/9 aspect ratio equivalent */
    --lv-width: 100vw;
  }
  .lv-canvas {
    top: calc((100% - 56.25vw) / 2);
  }
}