/*
 * Horizontal Timeline widget.
 *
 * The line is the track's own border, so it is exactly as long as the row of
 * milestones — and the row scrolls sideways rather than squeezing when there
 * are more milestones than will fit.
 */
.ekl-timeline {
  --ekl-timeline-line: #ededed;
  --ekl-timeline-thickness: 2px;
  --ekl-timeline-marker: #f00e6d;
  --ekl-timeline-marker-size: 30px;
  --ekl-timeline-width: 260px;

  @apply w-full overflow-x-auto;
}

.ekl-timeline__track {
  @apply relative flex w-max min-w-full items-stretch py-[24px];

  /* The line itself. */
  &::before {
    @apply absolute left-0 right-0 top-1/2 -translate-y-1/2 content-[''];

    height: var(--ekl-timeline-thickness);
    background-color: var(--ekl-timeline-line);
    z-index: 0;
  }
}

.ekl-timeline__item {
  @apply relative grid shrink-0 px-[16px];

  width: var(--ekl-timeline-width);
  box-sizing: border-box;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
}

.ekl-timeline__marker {
  @apply relative z-1 inline-flex items-center justify-center rounded-full leading-none text-white;
  grid-row: 2;

  width: var(--ekl-timeline-marker-size);
  height: var(--ekl-timeline-marker-size);
  font-size: calc(var(--ekl-timeline-marker-size) * 0.45);
  background-color: var(--ekl-timeline-marker);

  i,
  svg {
    @apply block;
  }

  svg {
    @apply h-[1em] w-[1em] fill-current;
  }
}

.ekl-timeline__card {
  @apply w-full rounded-[8px] bg-white p-[18px] shadow-sm;
  box-sizing: border-box;
}

/* Which half of the item the card sits in. */
.ekl-timeline__item[data-side="above"] .ekl-timeline__card {
  grid-row: 1;
  align-self: end;
  margin-bottom: 20px;
}

.ekl-timeline__item[data-side="below"] .ekl-timeline__card {
  grid-row: 3;
  align-self: start;
  margin-top: 20px;
}

.ekl-timeline__date {
  @apply text-[14px] font-semibold uppercase leading-none tracking-wide text-ekl-brand;
}

.ekl-timeline__title {
  @apply m-0 mt-[8px] text-[18px] font-bold leading-[1.3] text-ekl-secondary;
}

.ekl-timeline__text {
  @apply mt-[6px] text-[15px] leading-[1.6] text-ekl-neutral-700;
}

.ekl-timeline__image {
  @apply mt-[12px] overflow-hidden rounded-[6px];

  img {
    @apply block h-auto w-full object-cover rounded-[6px];
  }
}