// control might be better named button now.
// It's used on both real buttons (play button)
// and div buttons (menu buttons)
.video-react .video-react-control {
  outline: none;
  position: relative;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 5em;
  width: 6em;
  @include display-flex(center, center);
  @include flex-row;


  &:before {
    opacity: 0.85;
    font-size: 2.6em;
    line-height: 1.95;

    @extend %video-react-icon-default;
  }

  // Replacement for focus outline
  &:hover:before {
    opacity: 1;
  }

}



// Hide control text visually, but have it available for screenreaders
.video-react .video-react-control-text {
  @include hide-visually;
}

// IE 8 + 9 Support
.video-react-no-flex .video-react-control {
  display: table-cell;
  vertical-align: middle;
}