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

// NOTE: the specific styling here is ripped from the POLITICO Home Page
// module that promos the live blog. All the pixel values are copied to match.
// Some of the colors are updated slightly to look a little more at-home in
// the election rig (warm grays rather than cool / black).

.list {
  padding-left: 0;
  list-style: none;

  .item {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;

    &::before {
      content: "";
      position: absolute;
      top: 13px;
      left: 6px;
      bottom: -15px;
      width: 1px;
      background-color: int.$warmgray-20;
    }

    &::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 7px;
      height: 7px;
      background-color: int.$warmgray-100;
      border-radius: 50%;
    }

    &:first-child::before {
      top: 17px;
    }

    &:first-child::after {
      background-color: int.$politico-red;
      box-shadow: 0 0 0 3px white, 0 0 0 4px int.$politico-red;
    }

    &:last-child {
      margin-bottom: 0;
    }

    &:last-child::before {
      display: none;
    }
  }

  .link {
    text-decoration: none;

    @include int.sans($size: "300", $role: "component");
    @include int.election-text-link;
  }
}