@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 max-content;

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

  &.noWrapLabel {
    grid-template-areas: "name number"
      "not-up not-up";
    grid-template-columns: 1fr max-content;
  }

  &.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: max-content 1fr;
    }

    &.noWrapLabel {
      grid-template-areas: "number name"
        "not-up not-up";
      grid-template-columns: max-content 1fr;
    }
  }

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

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

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

  .number {
    grid-area: number;

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

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

  .number.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: "200", $weight: "regular", $role: "label");
  }
}