$namespace: 'intec-universe';
$component: 'system-video-frame';
$template: 'default';
$class: #{$component};

.ns-#{$namespace}.c-#{$component}.c-#{$component}-#{$template} {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 0;

  .#{$class}-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    z-index: 0;

    iframe {
      background-color: #000;

      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
  }

  .#{$class}-overlay {
    position: absolute;
    background: none;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
  }
}