.video-react .video-react-control-bar {
  display: none;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8em;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.666) 0%, rgba(0, 0, 0, 0.492) 19%, rgba(0, 0, 0, 0.36) 34%, rgba(0, 0, 0, 0.254) 47%, rgba(0, 0, 0, 0.185) 56.5%, rgba(0, 0, 0, 0.129) 65%, rgba(0, 0, 0, 0.084) 73%, rgba(0, 0, 0, 0.05) 80.2%, rgba(0, 0, 0, 0.028) 86.1%, rgba(0, 0, 0, 0.014) 91%, rgba(0, 0, 0, 0.005) 95.2%, rgba(0, 0, 0, 0.001) 98.2%, rgba(0, 0, 0, 0) 100%);
}

.video-react-control-bar-buttons {
  @include display-flex('', space-between);
  @include flex-row;
  height: 5.0em;
  width: inherit;
}

.video-react-control-bar-progress-bar {
  height: 1.2em;
  width: inherit;
}

.video-react-control-left,
.video-react-control-time-display,
.video-react-control-right {
  @include display-flex;
  @include flex-row;
  @include display-flex(center, center);
}

// Video has started playing
.video-react-has-started .video-react-control-bar {
  @include display-flex('', flex-end);
  @include flex-column;
  visibility: visible;
  opacity: 1;

  $trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma
  @include transition($trans);
}

// Video has started playing AND user is inactive
.video-react-has-started.video-react-user-inactive.video-react-playing {
  .video-react-control-bar.video-react-control-bar-auto-hide {
    // Remain visible for screen reader and keyboard users
    visibility: visible;
    opacity: 0;

    $trans: visibility 1.0s, opacity 1.0s;
    @include transition($trans);
  }
}

.video-react-controls-disabled .video-react-control-bar,
.video-react-using-native-controls .video-react-control-bar,
.video-react-error .video-react-control-bar {
  // !important is ok in this context.
  display: none !important;
}

// Don't hide the control bar if it's audio
.video-react-audio.video-react-has-started.video-react-user-inactive.video-react-playing .video-react-control-bar {
  opacity: 1;
  visibility: visible;
}

// IE 8 + 9 Support
.video-react-has-started.video-react-no-flex .video-react-control-bar {
  display: table;
}