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

.call {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: white;
  width: 100%;
  padding: int.$spacing-4 int.$spacing-6;
  align-items: center;
  gap: int.$spacing-4;
  transform: translateY(-110%);
  transition: transform .5s ease;

  @include int.shadow($size: "100");

  &.mobile {
    flex-direction: column;
    align-items: flex-start;
    gap: int.$spacing-2;
  }

  &.animate-in {
    transform: translateY(0);
  }

  &.animate-out {
    transform: translateY(-110%);
  }

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

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

.call-inner {
  display: flex;
  align-items: center;
}

.timestamp {
  color: int.$red-60;

  @include int.overline() {
    font-weight: bold;
  }

}

.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");

  &.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);
  margin-left: 10px;

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

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

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

  .timestamp {
    color: white;
  }

  .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;
  }
}