@import '../Styles/styles.scss';

WaitingForPlayersHud {
  font-family: $font-secondary;
  
  .state-title {
    margin: 32px 100px;
    position: absolute;
    gap: 24px;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    padding: 4px 24px;
    border-radius: 4px;
    height: 78px;

    >.title {
      color: linear-gradient(to top, #e1e1e1, #b4b4b4);
      font-size: 64px;
    }

    .loading-spinner {
      width: 48px;
      height: 48px;
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: #e1e1e1;
      animation: spin 1s linear infinite;
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}