@mixin hover-state {
  &.touch-video-control-show {
    .bilibili-player-video {
      &-control-bottom,
      &-control-mask,
      &-top {
        opacity: 1 !important;
        visibility: visible !important;
      }
    }
    .bilibili-player-video-control-top {
      opacity: 1 !important;
      bottom: 44px !important;
    }
    .bpx-player-shadow-progress-area {
      opacity: 0 !important;
      visibility: hidden !important;
    }
    .bpx-player-top-wrap,
    .bpx-player-control-mask,
    .bpx-player-control-bottom,
    .bpx-player-control-top {
      opacity: 1 !important;
      visibility: visible !important;
    }
    .squirtle-progress-wrap {
      top: 0 !important;
      bottom: unset !important;
      height: 16px !important;
      width: calc(100% - 24px) !important;
      margin: 0 12px !important;
      .squirtle-progress-bar {
        height: 4px !important;
        bottom: 6px !important;
      }
    }
    .squirtle-high-energy {
      width: calc(100% - 24px) !important;
      top: -22px !important;
      bottom: unset !important;
      margin: 0 12px !important;
    }
    .squirtle-controller-wrap {
      display: flex !important;
    }
  }
}