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

.contest {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 0 0 auto;
  transform: rotate(-3deg);
  background-color: #fff;
  z-index: -1;

  &.is-raised {
    transform: rotate(-3deg) translateY(-8px)
  }

  &.is-even {
    transform: rotate(3deg);
  }

  &.is-even.is-raised {
    transform: rotate(3deg) translateY(-8px);
  }
}

.state {
  display: flex;
  align-items: center;
  column-gap: 4px;
}

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

  .gop {
    color: int.$gop-60;
  }

  .dem {
    color: int.$dem-60;
  }
}

.title {
  text-decoration: none;

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

  &:hover {
    text-decoration: underline;
  }
}

.note {
  color: int.$warmgray-60;

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