@layer components {
  .timeline {
    @apply flex-col items-start;
  }

  .timeline-item {
    @apply flex min-h-[50px];
  }

  .timeline-item-last {
    @apply min-h-max;
  }

  .timeline-item-media {
    @apply flex flex-col items-center;
  }

  .timeline-item-media-content {
    @apply my-0.5;
  }

  .timeline-item-media-default {
    @apply rounded-full border-3 border-gray-300 dark:border-gray-600 h-4 w-4;
  }

  .timeline-item-wrapper {
    @apply flex flex-auto;
  }

  .timeline-item-content {
    @apply ml-3 rtl:mr-3 pb-6 pt-0.5 w-full;
  }

  .timeline-item-content-last {
    @apply pb-0;
  }

  .timeline-connect {
    @apply h-full w-[2px] bg-gray-200 dark:bg-gray-600 flex-grow;
  }
}