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

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

  @include int.breakpoint-at-least("xl") {
    @include int.sans($size: "300", $role: "component");
  }
}

.day-head {
  display: flex;
  align-items: flex-end;
  width: 100%;
  border-bottom: 1px solid int.$warmgray-20;
  margin-top: int.$spacing-4;
  margin-bottom: int.$spacing-2;
  position: relative;

  .date-heading {
    padding-bottom: int.$spacing-1;

    @include int.title($size: "200");

    @include int.breakpoint-at-least("sm") {
      @include int.title($size: "300");
    }

    @include int.breakpoint-at-least("xl") {
      @include int.title($size: "400");
    }
  }
}

.day-content:not(.convention) {
  column-count: 1;

  @include int.breakpoint-at-least("xs") {
    column-count: 2;
  }

  @include int.breakpoint-at-least("sm") {
    column-count: 3;
  }

  &.one-col {
    column-count: 1;
  }
}

.state-link {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: int.$spacing-1;
  break-inside: avoid;
  margin-bottom: int.$spacing-3;

  @include int.breakpoint-at-most("sm") {
    --size: 6px;
  }

  .link {
    display: flex;
    align-items: center;
    column-gap: int.$spacing-1;
    text-decoration: none;

    @include text-size();

    a:hover {
      cursor: pointer;
      text-decoration: underline;
    }
  }
}

.state-note {
  flex-shrink: 0;
  flex-basis: 100%;
  color: int.$warmgray-60;

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

  @include int.breakpoint-at-least("xl") {
    @include int.sans($size: "200", $role: "component");
  }
}

.state-note:empty {
  display: none;
}

.convention {
  break-inside: avoid;

  > p {
    margin-bottom: int.$spacing-2;

    @include int.title($size: "200");
  }

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

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

.no-elections {
  @include text-size();
}