.clubInfoComponent {
  --Text-secondary: var(--opacity-70b);
  --Text-primaryNoneBg: var(--base-black);
  --button-bgSecondary: var(--opacity-10b);
  --Text-prizeHolder: var(--highlight-100);
  --Border-rgb60: var(--highlight-60);
  --Icon-disabled: var(--neutral-800);
}

@media (prefers-color-scheme: dark) {
  .clubInfoComponent {
    --Text-secondary: var(--opacity-70w);
    --Text-primaryNoneBg: var(--base-white);
    --button-bgSecondary: var(--opacity-10w);
    --Text-prizeHolder: var(--highlight-100);
    --Border-rgb60: var(--highlight-60);
    --Icon-disabled: var(--neutral-800);
  }
}

.clubInfoComponent {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.clubInfoComponent .avatarContainer {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.clubInfoComponent .clubRating {
  display: flex;
  justify-content: center;
}

.clubInfoComponent .clubRating .ratingStar:after {
  font-family: "dr-odds";
  font-size: 0.625rem;
  content: "star";
  text-align: center;
  margin-left: 0.03rem;
  color: var(--Icon-disabled);
}

.clubInfoComponent .clubRating .ratingStar.filledStar:after {
  color: var(--Text-prizeHolder);
}

.clubInfoComponent .playerDetail {
  display: flex;
  flex-direction: row;
  gap: 0.81rem;
  margin-bottom: 0.75rem;
}

.clubInfoComponent .userInfo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.clubInfoComponent .userInfo .segmentButton {
  padding: 0;
}

.clubInfoComponent .rankTitle {
  color: var(--Text-secondary);
}

.clubInfoComponent .rankNumber {
  color: var(--Text-prizeHolder);
}

.clubInfoComponent .userStatus {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 2rem;
}

.clubInfoComponent .clubButtons{
    border: min(0.063rem, 1px) solid #5F5F5F;
    border-radius: 1.1rem;
}

.clubInfoComponent .myButton:last-child{
    padding: 0.125rem 0.25rem;
    border-radius: 1.1rem;
}

.clubInfoComponent .myButton:first-child{
    padding: 0;
}


.clubInfoComponent .clubAndPlayer {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  flex-shrink: 0;
}

.clubInfoComponent .badgeContainer {
  display: flex;
  flex-direction: row;
  gap: 0.81rem;
  flex: 1;
  justify-content: end;
}

.clubInfoComponent .badgeContainer .badgeImage {
  width: 2.8125rem;
  height: 2.8125rem;
  aspect-ratio: 1/1;
  border-radius: 0.5rem;
}