@import "common";

@mixin pbp {
  #bilibili_pbp,
  #bilibili_pbp_canvas {
    opacity: 0 !important;
    &.pin {
      opacity: 1 !important;
    }
  }
  #bilibili_pbp_pin {
    opacity: 0 !important;
  }
  &.touch-video-control-show {
    #bilibili_pbp,
    #bilibili_pbp_canvas {
      opacity: 1 !important;
    }
    #bilibili_pbp_pin {
      opacity: 1 !important;
    }
  }

  .bilibili-player-video-control {
    #bilibili_pbp,
    #bilibili_pbp_canvas {
      left: 0 !important;
      width: 100% !important;
      &.pin {
        bottom: 3px !important;
      }
    }
  }

  .bpx-player-pbp {
    opacity: 0 !important;
    bottom: 3px !important;
    &.pin {
      opacity: 1 !important;
    }
    .bpx-player-pbp-pin {
      opacity: 0 !important;
    }
  }
  &.touch-video-control-show .bpx-player-pbp {
    opacity: 1 !important;
    left: 0 !important;
    width: 100% !important;
    bottom: calc(100% - 1px) !important;
    .bpx-player-pbp-pin {
      opacity: 1 !important;
    }
  }

  &.touch-video-control-show .bilibili-player-video-control {
    #bilibili_pbp,
    #bilibili_pbp_canvas {
      bottom: calc(100% - 2px) !important;
    }
    #bilibili_pbp_pin {
      right: -8px !important;
    }
  }
  @media screen and (min-width: 750px) {
    @include on-fullscreen {
      .bilibili-player-video-control {
        #bilibili_pbp,
        #bilibili_pbp_canvas {
          &.pin {
            bottom: 4px !important;
          }
        }
      }
      &.touch-video-control-show {
        .bilibili-player-video-control {
          #bilibili_pbp,
          #bilibili_pbp_canvas {
            // &.pin {
            bottom: calc(100% + 5px) !important;
            // }
          }
        }
      }
      &.touch-video-control-show .bpx-player-pbp {
        bottom: calc(100% + 5px) !important;
      }
    }
  }
}