.control-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  .middle-button {
    z-index: var(--z-index-middle-button, auto);
  }

  .control {
    z-index: var(--z-index-control, auto);

    .time-display {
      padding-right: 16rpx;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: 500;
      color: #ffffff;
      text-shadow: 1px 1px 12px rgba(0, 0, 0, 0.2);
      .du {
        color: rgba(255, 255, 255, 0.5);
      }
    }

    .progress-bar {
      --slider-active-background-color: #ffffff;
      --slider-inactive-background-color: rgba(255, 255, 255, 0.1);
      --slider-thumb-background-color: none;
    }

    .playback-rate-btn,
    .playback-quality-btn {
      height: 28rpx;
      padding: 0 28rpx;
      font-weight: 500;
      font-size: 28rpx;
      line-height: 28rpx;
      text-align: center;
      color: #ffffff;
      white-space: nowrap;
    }
  }
}

.xg-video-fullscreen {
  .top {
    padding: 0 24rpx;
    .top-item {
      height: 64rpx;
      vertical-align: middle;

      .top-title {
        font-weight: 500;
        font-size: 36rpx;
        line-height: 64rpx;
        height: 64rpx;
        overflow: hidden;
        padding: 0 16rpx;
        -webkit-line-clamp: 1;
      }
    }
  }
}