:root {
  --vbg-theme: white;
  --vbg-bg: black;
  --vbg-overlay-opacity: 0.5;
  --vbg-transition-speed: 0.5s;
  --vbg-preloader-size: 32px;
  --vbg-icon-size: 34px;
  --vbg-icon-size-small: 28px;
  --vbg-icon-spacing-modifier: 0.1;
  --vbg-icon-space-around: 20px;
  --vbg-icon-space-around-small: 12px;
}



video-background {
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  background: var(--vbg-bg);
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: white;


  &[status=loading],&[status=waiting] {
    &::after {
      content:'';
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      width: var(--vbg-preloader-size, 32px);
      height: var(--vbg-preloader-size, 32px);
      margin: calc(0px - var(--vbg-preloader-size) * 0.5) 0 0 calc(0px - var(--vbg-preloader-size) * 0.5);
      border: 4px solid var(--vbg-theme);
      border-top-color: transparent;
      z-index: 2;
      animation: loader-spin 1s infinite ease;
    }
    iframe {
      opacity: 0;
    }
  }
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  picture, img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

  }
  img {
    object-fit: cover;
  }
}

.vbg__controls  {
  z-index: 6;
}

.vbg__video , .vbg__poster, .vbg__overlay{
   position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  transition: opacity var(--vbg-transition-speed) ease;
}

.vbg__video {
  z-index: 4;
}
.vbg__poster {
  z-index:  3;
}

.vbg__overlay  {
  z-index: 5;
  pointer-events: none;
  background-color: var(--vbg-bg);
  opacity: var(--vbg-overlay-opacity);
}

.vbg--loading {
  opacity: 0;
}

.vbg__icons {
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 0;
  padding: var(--vbg-icon-space-around);
  width: auto;
  height: auto;
  max-width: 40%;

  @media (max-width: 720px) {

    padding: var(--vbg-icon-space-around-small);
  }
}

.vbg__icon {
  background: transparent;
  appearance:  none;
  border: none;
  --size: var(--vbg-icon-size, 24px);
  position: relative;
  width: var(--size);
  padding: calc(var(--vbg-icon-spacing-modifier) * var(--size));
  margin: calc(var(--vbg-icon-spacing-modifier) * var(--size));
  transition: opacity 150ms ease, transform 150ms ease;
  opacity: 0.5;
  &:hover {
    opacity: 0.8;
    transform: scale(1.1);
  }
  @media (max-width: 720px) {
    --size: var(var(--vbg-icon-size-small), 20px)
  }
  svg {
    color: var(--vbg-icon-color, white);
    width: 100%;
  }
  path, rect {
    fill: currentColor !important;
  }
}


@keyframes loader-spin {
  100%{transform:rotate(360deg)}
}