.creation-timeline {
  display: flex;
  list-style-type: none;
  margin: $line-height * 2 0;
  position: relative;

  li {
    border-top: 4px solid $brand;
    display: inline-block;
    font-size: $small-font-size;
    font-weight: bold;
    padding: $line-height / 2 $line-height * 3 0;
    text-transform: uppercase;

    &::before {
      background: $brand;
      border-radius: 50%;
      content: "";
      height: 20px;
      margin-left: $line-height / 2;
      position: absolute;
      top: -8px;
      width: 20px;
    }

    &[aria-current] ~ * {
      border-color: $admin-border-color;

      &::before {
        background: $admin-border-color;
      }
    }
  }
}