.xg-play-button {
  display: flex;
  justify-content: center;
  align-items: center;
}
.xg-play-button.xg-icon-middle {
  width: 48rpx;
  height: 48rpx;
}
.xg-play-button.xg-icon-small {
  width: 24rpx;
  height: 24rpx;
}
.xg-play-button.xg-icon-large {
  width: 96rpx;
  height: 96rpx;
}
.xg-play-button.xg-icon-bg {
  background-color: rgba(28, 28, 28, 0.35);
  border-radius: 50%;
  width: 144rpx;
  height: 144rpx;
}
.xg-play-button .xg-icon-pause,
.xg-play-button .xg-icon-play {
  pointer-events: none;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.xg-play-button .xg-icon-play {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM0MzdfMzIyMzUpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjYxNzIyIDEuODAwMzJMMTYuMjgzOSA5LjI5OTA5QzE2Ljc5NDIgOS42MjcwNyAxNi43OTQyIDEwLjM3MjkgMTYuMjgzOSAxMC43MDA4TDQuNjE3MjIgMTguMTk5NkM0LjA2MjYyIDE4LjU1NjEgMy4zMzMyNSAxOC4xNTc5IDMuMzMzMjUgMTcuNDk4N1YyLjUwMTE5QzMuMzMzMjUgMS44NDE5OSA0LjA2MjYyIDEuNDQzODUgNC42MTcyMiAxLjgwMDMyWiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM0MzdfMzIyMzUiPgo8cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==");
}
.xg-play-button .xg-icon-pause {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzM0MzdfMzIyNTUpIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjUwMDA0IDJDNy45NjAyOSAyIDguMzMzMzkgMi4zNzMxIDguMzMzMzkgMi44MzMzNVYxNy44MzM2QzguMzMzMzkgMTguMjkzOCA3Ljk2MDI5IDE4LjY2NjkgNy41MDAwNCAxOC42NjY5SDUuODMzMzVDNS4zNzMxIDE4LjY2NjkgNSAxOC4yOTM4IDUgMTcuODMzNlYyLjgzMzM1QzUgMi4zNzMxIDUuMzczMSAyIDUuODMzMzUgMkg3LjUwMDA0Wk0xNC4xNjY3IDJDMTQuNjI3IDIgMTUuMDAwMSAyLjM3MzEgMTUuMDAwMSAyLjgzMzM1VjE3LjgzMzZDMTUuMDAwMSAxOC4yOTM4IDE0LjYyNyAxOC42NjY5IDE0LjE2NjcgMTguNjY2OUgxMi41QzEyLjAzOTggMTguNjY2OSAxMS42NjY3IDE4LjI5MzggMTEuNjY2NyAxNy44MzM2VjIuODMzMzVDMTEuNjY2NyAyLjM3MzEgMTIuMDM5OCAyIDEyLjUgMkgxNC4xNjY3WiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzM0MzdfMzIyNTUiPgo8cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==");
}

.xg-icon-bg .xg-icon-pause,
.xg-icon-bg .xg-icon-play {
  width: 64rpx;
  height: 64rpx;
}

.xg-state-immerse {
  transition: opacity 0.5s ease-out;
  opacity: 0.2;
}

.xg-state-blur {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.xg-state-focus {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.xg-play-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.xg-play-bottom {
  position: absolute;
  bottom: 146rpx;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}