@import 'variable';
/** xgplayer base style begain**/
.xgplayer-fullscreen-parent {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  .xgplayer.xgplayer-is-cssfullscreen {
    z-index: 10;
    position: absolute;
  }
  .xgplayer.xgplayer-is-fullscreen {
    z-index: 10;
    position: absolute;
  }
}

.xgplayer-rotate-parent {
  position: fixed;
  top: 0;
  left: 100%;
  bottom: 0;
  right: 0;
  width: 100vh;
  height: 100vw;
  z-index: 9999;
  transform-origin: top left;
  transform: rotate(90deg);
  .xgplayer.xgplayer-rotate-fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    transform: rotate(0);
  }
  // &.xgplayer-mobile {
  //   width: 90%;
  // }
  .xgplayer-mobile {
    video {
      z-index: -1;
    }
  }
}

.xgplayer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, STHeiTi, 'Microsoft YaHei',
    'WenQuanYi Micro Hei', sans-serif;
  font-size: 14px;
  font-weight: 400;
  background: $playerBgColor;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  * {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    white-space: normal;
    word-wrap: normal;
    overflow-wrap: normal;
  }
  ul,
  li {
    list-style: none;
  }
  .xgplayer-none {
    display: none;
  }

  &.xgplayer-is-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 9999;
  }

  /** xgplayer cssFullscreen style  begain**/
  &.xgplayer-is-cssfullscreen {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }
  /** xgplayer cssFullscreen style  end**/

  &.xgplayer-rotate-fullscreen {
    position: fixed;
    top: 0;
    left: 100%;
    bottom: 0;
    right: 0;
    width: 100vh;
    height: 100vw;
    transform-origin: top left;
    transform: rotate(90deg);
    z-index: 9999;
    // &.xgplayer-mobile {
    //   width: 90vh;
    // }
    &.xgplayer-mobile video {
      z-index: -1;
    }
  }

  xg-video-container.xg-video-container {
    position: absolute;
    top: 0;
    bottom: 48px;
    display: block;
    width: 100%;
  }

  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
  }

  &[data-xgfill='contain'] {
    video {
      object-fit: contain;
    }
  }

  &[data-xgfill='cover'] {
    video {
      object-fit: cover;
    }
  }

  &[data-xgfill='fill'] {
    video {
      object-fit: fill;
    }
  }
  /** position start **/
  .xg-pos {
    left: $miniMargin; //$iconMargin;
    right: $miniMargin; //$iconMargin;
  }

  .xg-margin {
    margin-left: $iconMargin;
    margin-right: $iconMargin;
  }

  .xg-bottom {
    bottom: 0;
  }
  /** position ended **/

  .btn-text {
    position: relative;
    top: 50%;
    height: 24px;
    font-size: 13px;
    text-align: center;
    span {
      display: inline-block;
      min-width: 52px;
      height: 24px;
      line-height: 24px;
      background: $definitionNameBgColor;
      border-radius: 12px;
    }
  }
  /** icon style begain **/
  xg-icon {
    position: relative;
    box-sizing: border-box;
    height: 40px;
    margin-left: $iconMargin;
    margin-right: $iconMargin;
    cursor: pointer;
    color: $definitionNameColor;
    fill: #fff;
    &.xg-icon-disable {
      cursor: not-allowed;
    }
    .xg-tips {
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
    }
    &:active,
    &:hover {
      .xg-tips {
        display: block;
      }
      .xg-tips.hide {
        display: none;
      }
    }
    .xgplayer-icon {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
    }

    .xg-icon-disable {
      cursor: not-allowed;
    }

    .xg-img {
      width: 100%;
    }

    svg,
    img {
      height: 100%;
      display: block;
    }
  }
  /** icon style ended **/

  /** root bar style begain **/
  xg-bar {
    display: block;
  }

  &.xgplayer-inactive,
  &.xgplayer-mini {
    xg-bar {
      display: none;
    }
  }
  &.xgplayer-inactive {
    .xg-top-bar {
      display: flex;
      &.top-bar-autohide {
        display: none;
      }
    }
  }

  .xg-top-bar {
    position: absolute;
    z-index: 10;
    top: 0;
    padding: 0 $iconMargin;
    display: flex;
    height: $barWidth;
    xg-icon {
      position: relative;
      top: 10px;
      left: 0;
      width: 34px;
      margin-top: 0;
      &:first-child {
        margin-left: 0;
      }
    }
  }
  .xg-left-bar,
  .xg-right-bar {
    position: absolute;
    z-index: 9;
    top: $barWidth;
    bottom: $barWidth;
    width: $barWidth;
  }
  .xg-left-bar {
    left: 0;
  }
  .xg-right-bar {
    right: 0;
  }
  /*  root bar style ended */

  .xg-tips {
    display: none;
    position: absolute;
    padding: 4px 6px;
    background: $tipsBgColor;
    border-radius: 4px;
    font-size: $tipsFontsize;
    color: $tipsColor;
    text-align: center;
    white-space: nowrap;
    opacity: 0.85;
  }
  .xg-margin {
    left: 0px;
    right: 0px;
  }
}

// 移动端适配
.xgplayer-mobile {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  * {
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  &.xgplayer-rotate-fullscreen {
    .xg-top-bar,
    .xg-pos {
      left: 6%;
      right: 6%;
    }
  }

  xg-icon {
    &:hover {
      .xg-tips {
        display: none;
      }
    }
  }
}

.xg-list-slide-scroll {
  &::-webkit-scrollbar-track {
    background-color: transparent;
    display: none
  }
  &:hover::-webkit-scrollbar-track {
      display: block
  }
  &::-webkit-scrollbar {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0,0,0,0);
    height: 4px;
    width: 4px
  }
  &::-webkit-scrollbar-corner {
      background: transparent;
      display: none
  }
  &::-webkit-scrollbar-thumb {
      background: hsla(0,0%,100%,.5);
      border-radius: 3px;
      display: none;
      width: 4px
  }
  &:hover::-webkit-scrollbar-thumb {
      display: block
  }
}

// 移动端小屏幕
@media only screen and (max-width: 480px) {
  .xgplayer-mobile {
    xg-icon {
      margin-right: $miniMargin;
      margin-left: $miniMargin;
    }

    .xg-top-bar {
      left: $miniMargin;
      right: $miniMargin;
    }
  }
}

// @media only screen and (min-width: 480px) {
//   .xgplayer-mobile {
//     &.xgplayer-is-fullscreen {
//       .xg-top-bar, .xg-pos{
//         left: 6%;
//         right: 6%;
//       }
//     }
//   }
// }

@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top)))
  and (-webkit-overflow-scrolling: touch) {
  // .xgplayer-mobile {
  //   &.xgplayer-rotate-fullscreen {
  //     .xg-pos {
  //       left: constant(safe-area-inset-top, 30px);
  //       left: env(safe-area-inset-top, 30px);
  //       right: constant(safe-area-inset-bottom, 30px);
  //       right: env(safe-area-inset-bottom, 30px);
  //     }
  //   }
  // }
}

// 竖屏兼容
@media screen and (orientation: portrait) {
  .xgplayer-mobile {
    &.xgplayer-is-fullscreen,
    &.xgplayer-is-cssfullscreen {
      //.flex-controls {
      .xgplayer-controls {
        bottom: 34px;
        /* iOS 11.0 */
        bottom: constant(safe-area-inset-bottom);
        /* 11.2+ */
        bottom: env(safe-area-inset-bottom);
      }
      .xg-top-bar {
        top: 34px;
        /* iOS 11.0 */
        top: constant(safe-area-inset-top);
        /* 11.2+ */
        top: env(safe-area-inset-top);
      }
    }
  }
}

// 横屏兼容
@media only screen and (orientation: landscape) {
  .xgplayer-mobile {
    &.xgplayer-is-fullscreen {
      .xg-top-bar,
      .xg-pos {
        left: 6%;
        right: 6%;
      }
    }
    &.xgplayer-rotate-fullscreen {
      left: 0;
      width: 100vw;
      height: 100vh;
      transform: rotate(0deg);
    }
  }
}

// 自定义mse使用 不能删除
.xgplayer {
  .xgplayer-screen-container {
    display: block;
    width: 100%;
  }
}