// =============================================================================
// _MEJS.SCSS
// -----------------------------------------------------------------------------
// Site styles.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. MEJS Controls
// =============================================================================

// MEJS Controls
// =============================================================================

//
// Controls container.
//

.mejs-controls {
  background-color: rgba(0, 0, 0, 0.5);
}


//
// Play/pause buttons.
//

.mejs-button {
  &.mejs-playpause-button {
    border-right: 1px solid rgba(255, 255, 255, 0.125);
  }

  &.mejs-volume-button,
  &.mejs-fullscreen-button {
    border-left: 1px solid rgba(255, 255, 255, 0.125);
  }

  button {
    color: rgba(255, 255, 255, 0.5);
    @include transition(#{color 0.3s ease});

    &:hover {
      color: $white;
    }
  }
}


//
// Time.
//

.mejs-time {
  color: rgba(255, 255, 255, 0.5);
}


//
// Time rail.
//

.mejs-time-total {
  height: 10px;
  background-color: rgba(255, 255, 255, 0.2);
}

.mejs-time-loaded {
  height: 10px;
  background-color: rgba(255, 255, 255, 0.3);
}

.mejs-time-current {
  height: 10px;
  background-color: $white;
}