@import '../../style/variable';

.#{$namespace} {
  &-player {
    width: 100%;
    height: 100%;

    &__vdo {
      margin-bottom: 20px;
      
      width: 100%;
      height: calc(100% - 28px - 20px);

      &--fit {
        object-fit: fill;
      }
    }

    &__controls {
      position: relative;
      width: 100%;
      height: 28px;

      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      column-gap: 42px;

      &-prefix {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;

        display: flex;
        flex-direction: row;
        align-items: center;

        font-weight: 400;
        font-size: 14px;
        color: rgba(0,0,0,0.65);
        line-height: 21px;
      }

      &-suffix {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;

        display: flex;
        flex-direction: row;
        align-items: center;

        column-gap: 32px;
      }
    }

    &__time {
      margin-right: 6px;
      font-weight: 400;
      font-size: 14px;
      color: #0067EE;
      line-height: 21px;
    }
  }
}