@import '../style/common_mixin.scss';

.p-courseware-video {
  height: 100%;
  overflow: hidden;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  background-color: #333;
  @include k-img-bg();
  .video-cover{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
  video {
    width: 100%;
    height: 93%;
  }
}

.k-play-btn {
  position: absolute;
  width: 15%;
  top: 30%;
  left: 40%;
  font-size: 12vh;
  color: #444;
  background-color: white;
  border-radius: 50%;
  opacity: 0.9;
}

.k-video-control {
  position: absolute;
  bottom: 1vh;
  left: 0;
  width: 100%;
  height: 7.5%;
  display: flex;
  color: white;
  padding: 0 8vh;
  align-items: center;
  &-bg {
    position: absolute;
    //width: 100%;
    height: 100%;
    background-color: #333;
    opacity: 0.5;
  }
  &-time-past {
    width: 3.5rem;
  }
  &-progress {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 3%;
    & > * {
      pointer-events: none; // Ken video seek
    }
    .i-bg {
      position: absolute;
      background-color: #aaa;
      width: 100%;
      height: 10%;
      border-radius: 1rem;
    }
    .i-before-progress {
      position: absolute;
      height: 10%;
      background-color: white;
      border-radius: 1rem;
    }
    .i-cursor {
      position: absolute;
      width: 1.5vh;
      height: 1.5vh;
      border-radius: 50%;
      background-color: white;
    }
  }
  &-time-total {
    margin-right: 3vh;
  }
  &-tool {
    display: flex;
    .i-tool-btn {
      width: 4vh;
      height: 4vh;
      background-color: white;
      border-radius: 50%;
      margin: 0 1vh;
      color: black;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.8vh;
      font-weight: bold;
    }
  }
}

