.c-timeline,
[class="c-timeline"] {
  @extend %list-without-list-formatting;
  --box: var(--theme-spacing--gutter);
  position: relative;
  transform: translateX(var(--box));

  padding: var(--theme-spacing--6) 0;

  &__entry,
  [class="c-timeline__entry"] {
    @extend %list-without-list-formatting;
    display: flex;
    align-items: center;
    border-left: var(--theme-border--thick);
    border-image: var(--theme-border-image);
    padding: 0 var(--box) var(--theme-spacing--5) 0;
    counter-increment: timeline 1;
    &:before {
      content: counter(timeline);
      padding: var(--box);
      height: var(--box);
      width: var(--box);
      clip-path: circle();
      display: inline-grid;
      place-content: center;
      background-color: var(--theme-color--pop);
      color: var(--theme-color--ink);
      transform: translateX(calc(var(--box) * -1.5));
      transition: background-color 0.3s;
      font: var(--theme-font--system);
    }
    &:hover:before {
      background-color: var(--theme-color--pop);
      color: var(--theme-color--paper);
    }

    &:last-of-type {
      border-color: transparent;
      border-image: none;
      .c-timeline--block &,
      .c-timeline--card & {
        border-color: var(--theme-color--ink);
      }
    }
  }

  &__title {
    text-transform: capitalize;
    margin: 0;
    @include on-event(false, ".c-timeline__entry") {
      text-decoration: underline;
    }
  }

  &__link {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 0 var(--theme-spacing--1);
  }
}
