@use "../../../../styles/int.scss";

.call {
  display: flex;
  align-items: center;
  gap: int.$spacing-2;

  &.dem {
    --election-palette-bgAlt: #{int.$dem-20};
  }

  &.gop {
    --election-palette-bgAlt: #{int.$gop-20};
  }
}

.leaderboard {
  display: flex;
}

.leaderboard-party,
.leaderboard-call-type,
.leaderboard-icon {
  display: flex;
  justify-content: center;
  align-items: center;

  &:not(:empty) {
    padding: 0 int.$spacing-1;
  }
}

.leaderboard-party,
.leaderboard-call-type {
  color: white;
  background-color: var(--election-palette-bgInverse);
}

.leaderboard-party {
  @include int.sans($size: "200", $role: "component", $weight: "bold");

  @include int.is-mobile {
    @include int.sans($size: "100", $role: "component", $weight: "bold");
  }
}

.leaderboard-icon {
  color: var(--election-palette-fgColored);
  background-color: var(--election-palette-bgDefault);
}

.copy {
  display: flex;
  align-items: center;
  gap: int.$spacing-1;
  color: var(--election-palette-fgColored);

  @include int.sans($size: "200", $role: "component", $weight: "bold");
}

.important {
  background-color: var(--election-palette-bgInverse);

  .leaderboard-party,
  .leaderboard-call-type {
    color: var(--election-palette-fgColored);
    background-color: var(--election-palette-bgDefault);
  }

  .leaderboard-icon {
    color: var(--election-palette-fgColored);
    background-color: var(--election-palette-bgAlt);
  }

  .copy {
    color: white;
  }
}