.#{$vcSupport} {
  // display:inline-block would be closer to the video el's display:inline
  // but it results in flash reloading when going into fullscreen [#2205]
  display: block;
  // Make video.js videos align top when next to video elements
  vertical-align: top;
  box-sizing: border-box;

  color: $primary-foreground-color;
  background-color: #EDEEF1;
  position: relative;
  padding: 0;
  // Start with 10px for base font size so other dimensions can be em based and
  // easily calculable.
  font-size: 12px;
  line-height: 1;

  // Provide some basic defaults for fonts
  font-weight: normal;
  font-style: normal;
  // Avoiding helvetica: issue #376
  font-family: $text-font-family;

  @include user-select(none);

  // Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
  // checking fullScreenEnabled.
  &:-moz-full-screen { position: absolute; }

  &:-webkit-full-screen {
    width: 100% !important;
    height: 100% !important;
  }
}

// All elements inherit border-box sizing
.#{$vcSupport} *,
.#{$vcSupport} *:before,
.#{$vcSupport} *:after {
  box-sizing: inherit;
}

// List style reset
.#{$vcSupport} ul {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  list-style-position: outside;

  // Important to specify each
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}

@mixin apply-aspect-ratio($width, $height) {
  padding-top: 100% * ($height/$width);
}

.#{$hidden} { display: none !important; }

.#{$lockShowing} {
  display: block !important;
  opacity: 1;
  visibility: visible;
}

.#{$noJS} {
  padding: 20px;
  color: #fff;
  background-color: #000;
  font-size: 18px;
  font-family: $text-font-family;
  text-align: center;
  width: 300px;
  height: 150px;
  margin: 0px auto;
}

.#{$noJS} a,
.#{$noJS} a:visited {
  color: #66A8CC;
}