[data-media-player] {
  width: 100%;
  display: inline-flex;
  align-items: center;
  position: relative;
  contain: style;
  box-sizing: border-box;
  user-select: none
}

[data-media-player] * {
  box-sizing: border-box
}

:where([data-media-player][data-view-type=video]) {
  aspect-ratio: 16/9
}

[data-media-player]:focus,
[data-media-player]:focus-visible {
  outline: 0
}

[data-media-player][data-view-type=video][data-started]:not([data-controls]) {
  pointer-events: auto;
  cursor: none
}

[data-media-player] slot {
  display: contents
}

[data-media-provider] {
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  border-radius: inherit;
  width: 100%;
  aspect-ratio: inherit;
  overflow: hidden
}

[data-media-player]:not([data-view-type=audio]) [data-media-provider],
[data-media-player][data-fullscreen] [data-media-provider] {
  height: 100%
}

[data-media-player][data-view-type=audio] [data-media-provider] {
  display: contents;
  background-color: unset
}

[data-media-provider] audio {
  width: 100%
}

:where(video:not([width]):not([height]), iframe:not([width]):not([height])) {
  width: 100%;
  aspect-ratio: 16/9
}

:where([data-media-provider] iframe),
:where([data-media-provider] video) {
  aspect-ratio: inherit;
  display: inline-block;
  height: auto;
  object-fit: contain;
  touch-action: manipulation;
  border-radius: inherit;
  width: 100%
}

[data-media-provider] iframe {
  height: 100%
}

[data-media-player][data-view-type=audio] iframe,
[data-media-player][data-view-type=audio] video {
  display: none
}

[data-media-player][data-fullscreen] video {
  height: 100%
}

[data-media-provider] iframe:not([src]) {
  display: none
}

iframe.vds-youtube[data-no-controls] {
  height: 1000%
}

.vds-blocker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  aspect-ratio: inherit;
  pointer-events: auto;
  border-radius: inherit;
  z-index: 1
}

[data-ended] .vds-blocker {
  background-color: #000
}

.vds-icon:focus {
  outline: 0
}

.vds-google-cast {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #dedede;
  font-family: sans-serif;
  font-weight: 500
}

.vds-google-cast svg {
  --size: max(18%, 40px);
  width: var(--size);
  height: var(--size);
  margin-bottom: 8px
}

.vds-google-cast-info {
  font-size: calc(var(--media-height) / 100 * 6)
}