/* ランキングの通信中表示。既存テーブル・タブの寸法は変更しない。 */
[data-sg-ranking] .sg-ranking-table-wrap {
  position: relative;
}

[data-sg-ranking] .sg-ranking-progress {
  position: absolute;
  top: -5px;
  left: 0;
  right: 0;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  pointer-events: none;
  background: transparent;
}

[data-sg-ranking] .sg-ranking-progress[hidden] {
  display: none;
}

[data-sg-ranking] .sg-ranking-progress::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sg-loading-color, #E2A3B4);
  opacity: .12;
}

[data-sg-ranking] .sg-ranking-progress > span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--sg-loading-color, #E2A3B4) 45%, var(--sg-loading-color, #E2A3B4) 70%, transparent);
  animation: sg-ranking-loading-travel 1.1s ease-in-out infinite;
}

[data-sg-ranking] .sg-ranking-table-wrap > .ranking-table {
  opacity: 1;
  transition: opacity .18s ease;
}

[data-sg-ranking].sg-ranking-loading .sg-ranking-table-wrap > .ranking-table {
  opacity: .45;
  pointer-events: none;
}

/* ボタンの占有スペースを残し、通信中のページの高さを維持する。 */
[data-sg-ranking].sg-ranking-loading #show-more {
  visibility: hidden;
  pointer-events: none;
}

@keyframes sg-ranking-loading-travel {
  from { transform: translateX(-105%); }
  to { transform: translateX(355%); }
}

@media (prefers-reduced-motion: reduce) {
  [data-sg-ranking] .sg-ranking-progress > span {
    animation: none;
    width: 100%;
    background: var(--sg-loading-color, #E2A3B4);
  }
  [data-sg-ranking] .sg-ranking-table-wrap > .ranking-table {
    transition: none;
  }
}