[data-dg-video-preview] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

[data-dg-video-preview] > img,
[data-dg-video-preview] > .dg-video-preview {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.dg-video-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, filter 180ms ease;
  filter: contrast(1.02) saturate(1.03);
}

[data-dg-video-preview].is-preview-playing > .dg-video-preview {
  opacity: 1;
}

.dg-video-mark {
  position: absolute;
  inset-inline-end: .55rem;
  inset-block-end: .55rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.75rem;
  block-size: 1.75rem;
  padding-inline: .45rem;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 999px;
  color: var(--dl-text-invert);
  background: rgb(0 0 0 / .58);
  font: inherit;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.dg-video-mark::before {
  content: "";
  inline-size: 0;
  block-size: 0;
  margin-inline-start: .08rem;
  border-block: .28rem solid transparent;
  border-inline-start: .43rem solid currentColor;
}

.dg-video-player {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  max-block-size: min(78vh, 1080px);
  margin-inline: auto;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

#dg-nav > .dg-video-navigation {
  pointer-events: none;
}

#dg-nav > .dg-video-navigation > a {
  pointer-events: none;
}

#dg-nav > .dg-video-navigation > a > [class*="position-"] {
  top: 50% !important;
  bottom: auto !important;
  inline-size: 3rem;
  block-size: 4.5rem;
  transform: translateY(-50%);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .dg-video-preview {
    transition: none;
  }
}