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

.label {
  display: grid;
  column-gap: int.$spacing-2;
  row-gap: int.$spacing-1;
  align-items: center;
  grid-template-areas: "number"
    "name"
    "not-up";
  grid-template-columns: 1fr;
  margin-top: int.$spacing-1;

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

  @include int.container-at-least("md") {
    grid-template-areas: "name number"
      "not-up not-up";
    grid-template-columns: 1fr min-content;

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

  &.isSecondary {
    @include int.overline();
  }

  &.dem {
    color: int.$dem-70;

    @include int.container-at-least("md") {
      grid-template-areas: "number name"
        "not-up not-up";
      grid-template-columns: min-content 1fr;
    }
  }

  &.gop {
    color: int.$gop-70;
  }

  &.gop .name {
    flex-direction: row-reverse;
  }
}

.name {
  grid-area: name;
  display: flex;
  align-items: baseline;
  gap: 4px;
  text-transform: uppercase;
}

.number {
  grid-area: number;

  @include int.title($size: "500", $weight: "bold");

  @include int.container-at-least("md") {
    @include int.title($size: "600", $weight: "bold");
  }

  .isSecondary & {
    @include int.sans($size: "400", $weight: "regular", $role: "label");

    @include int.container-at-least("md") {
      @include int.sans($size: "600", $weight: "regular", $role: "label");
    }
  }
}

.notUp {
  grid-area: not-up;

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

.population {
  color: int.$warmgray-80;

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