@layer components {
    .timeline {
        @apply w-full px-5;

        & > ul {
            @apply list-none py-5 px-0 relative w-full max-w-5xl mx-auto;

            /* Draw center line */

            &:before {
                @apply top-0 bottom-0 left-0 md:left-1/2 absolute content-[""] w-2;
                @apply bg-primary/10 dark:bg-dark_primary/10;
                @apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;
            }
        }
    }

    .timeline-element {
        @apply relative flex flex-col md:flex-row justify-between;

        /* Place point in center line */

        &:before {
            @apply content-[""] w-6 h-6 rounded-[50%] absolute top-5 left-0 md:left-1/2 -ml-2 z-50;
            @apply bg-primary/10 dark:bg-dark_primary/10;
            @apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;
        }

        &:nth-child(even) {
            @apply md:flex-row-reverse;

            .timeline-element__category {
                @apply md:flex-row-reverse;
            }
        }

        .timeline-element__info, .timeline-element__category {
            @apply relative w-4/5 md:w-2/5 left-[10%] md:left-0;
            @apply text-on_surface dark:text-dark_on_surface;
        }

        .timeline-element__category {
            @apply top-5 flex md:justify-end mb-12;
        }

        .timeline-element__info {
            & > details {
                @apply mb-12 rounded-xl overflow-hidden relative;
                @apply bg-primary/10 dark:bg-dark_primary/10;
                @apply shadow-md shadow-primary/5 dark:shadow-dark_primary/5;

                & > summary, & > div {
                    @apply p-5;
                }

                & > summary {
                    @apply relative block select-none cursor-pointer outline-none p-5 pr-10 font-semibold;

                    &:hover {
                        @apply bg-primary/20 dark:bg-dark_primary/20;
                    }

                    i {
                        @apply absolute right-5 h-full top-0 flex items-center;

                        & > svg {
                            @apply scale-125;
                            transition: transform 300ms ease;
                        }
                    }
                }

                &[open] {
                    & > summary {
                        & > i > svg {
                            @apply -rotate-180;
                        }

                        & ~ * {
                            animation: toggle 0.4s ease-in-out;
                        }
                    }
                }
            }
        }
    }

    @keyframes toggle {
        0% {
            font-size: 0;
            opacity: 0;
        }
        90% {
            font-size: 1rem;
            opacity: 0;
        }
        100% {
            font-size: 1rem;
            opacity: 1;
        }
    }
}