/*
 * Live match state for World Cup prediction cards.
 */

.fbb-wc-hub-live-card {
  border-color: rgba(255, 52, 78, 0.7) !important;

  box-shadow:
    0 0 0 1px rgba(255, 52, 78, 0.12),
    0 12px 34px rgba(255, 35, 70, 0.1) !important;
}

.fbb-wc-hub-live-state {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  border-color: rgba(255, 52, 78, 0.52) !important;

  background:
    linear-gradient(
      90deg,
      rgba(105, 12, 29, 0.55),
      rgba(38, 16, 24, 0.88)
    ) !important;

  color: #ff6178 !important;

  font-weight: 900 !important;
  letter-spacing: 0.01em !important;

  box-shadow:
    inset 0 0 20px rgba(255, 35, 70, 0.06),
    0 0 15px rgba(255, 35, 70, 0.08) !important;
}

.fbb-wc-hub-live-state::before {
  content: "";

  display: inline-block;

  width: 8px;
  height: 8px;

  margin-right: 8px;

  border-radius: 50%;

  background: #ff334f;

  box-shadow:
    0 0 0 4px rgba(255, 51, 79, 0.12),
    0 0 10px rgba(255, 51, 79, 0.75);

  animation:
    fbbWorldCupLivePulse 1.35s ease-in-out infinite;
}

@keyframes fbbWorldCupLivePulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.76);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fbb-wc-hub-live-state::before {
    animation: none;
  }
}