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

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

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

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

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