@import "../../style/variable";

.xgplayer {
  @keyframes playPause {
    0%{
      transform: scale(1);
      opacity:1;
    }
    99%{
      transform: scale(1.3);
      opacity:0;
    }
    to {
      transform: scale(1);
      opacity:0;
    }
  }
  xg-start-inner {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    background: $startBgColor;
  }
  .xgplayer-start {
    width: 70px;
    height: 70px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    transform: translate(-50%, -50%);
    cursor: pointer;
    svg {
      width: 100%;
      height: 100%;
    }
    &.hide {
      display: none;
      pointer-events: none;
    }
    &.focus-hide {
      display: none;
      pointer-events: none;
    }
    &:hover{
      opacity: 0.85;
    }
    .xg-icon-play {
      display: block;
    }
    .xg-icon-pause {
      display: none;
    }
    &[data-state=pause] {
      .xg-icon-play {
        display: none;
      }
      .xg-icon-pause {
        display: block;
      }
    }
    &.interact {
      xg-start-inner {
        animation: playPause .4s 0.1s ease-out forwards;
      }
      display: block;
    }
    // &.hide {
    //   display: none;
    // }
    &.show {
      display: block;
    }
  }
  &.xgplayer-mobile {
    xg-start-inner {
      background: initial;
      border-radius: 0;
    }
    .xgplayer-start {
      height: 50px;
      width: 50px;
      &:hover{
        opacity: 1;
      }
    }
  }
  // &.xgplayer-ended {
  //   .xgplayer-start {
  //     display: none;
  //   }
  // }
  &.xgplayer-inactive, &.xgplayer-is-enter {
    .xgplayer-start {
      &.auto-hide {
        display: none;
      }
    }
  }
  &.xgplayer-isloading.xgplayer-playing {
    .xgplayer-start {
      display: none;
    }
  }
  &.xgplayer-is-enter, &.xgplayer-is-error {
    .xgplayer-start {
      display: none;
      &.show {
        display: none;
      }
    }
  }
}