// --------------------------------------------------------------
// Video styles
// --------------------------------------------------------------

.uiza--video {
  background: #000;
  overflow: hidden;
}

.uiza__video-wrapper {
  background: #000;
  border-radius: inherit;
  overflow: hidden;
  position: relative;
  // Require z-index to force border-radius
  z-index: 0;
}

// Default to 16:9 ratio but this is set by JavaScript based on config
$embed-padding: ((100 / 16) * 9);

.uiza__video-embed,
.uiza__video-wrapper--fixed-ratio {
  height: 0;
  padding-bottom: to-percentage($embed-padding);
}

.uiza__video-embed iframe,
.uiza__video-wrapper--fixed-ratio video {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  user-select: none;
  width: 100%;
}

// If the full custom UI is supported
.uiza--full-ui .uiza__video-embed {
  $height: 240;
  $offset: to-percentage(($height - $embed-padding) / ($height / 50));
}