.xgplayer-controls {
  position: absolute;
  display: flex;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 120rpx;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.00691776) 6.67%, rgba(0, 0, 0, 0.028408) 13.33%, rgba(0, 0, 0, 0.0653279) 20%, rgba(0, 0, 0, 0.117929) 26.67%, rgba(0, 0, 0, 0.18542) 33.33%, rgba(0, 0, 0, 0.265507) 40%, rgba(0, 0, 0, 0.354153) 46.67%, rgba(0, 0, 0, 0.445847) 53.33%, rgba(0, 0, 0, 0.534493) 60%, rgba(0, 0, 0, 0.61458) 66.67%, rgba(0, 0, 0, 0.682071) 73.33%, rgba(0, 0, 0, 0.734672) 80%, rgba(0, 0, 0, 0.771592) 86.67%, rgba(0, 0, 0, 0.793082) 93.33%, rgba(0, 0, 0, 0.624) 100%);
  transition: opacity 0.2s linear;
}
.xgplayer-controls.xgplayer-controls-hide {
  display: none;
}
.xgplayer-controls.xgplayer-controls-portrait {
  padding-bottom: 20px;
}
.xgplayer-controls .xg-left-grid, .xgplayer-controls .xg-right-grid {
  position: relative;
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  flex-shrink: 1;
  align-items: center;
}
.xgplayer-controls .xg-left-grid {
  padding-left: 16rpx;
}
.xgplayer-controls .xg-right-grid {
  padding-right: 16rpx;
}
.xgplayer-controls .xg-center-grid {
  position: relative;
  flex: 1;
  height: 100%;
}

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

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

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