portfolio_leptos/src/components/timeline/TimelineElement.scss

.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/5 dark:bg-dark_primary/5;
        // box-shadow: 2px 2px 5px #dee1e4, -2px -2px 5px #fff;
    }

    &: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;
    }

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

    .timeline-element__info {
        & > details {
            @apply mb-12 rounded-xl overflow-hidden relative;
            @apply bg-primary/5 dark:bg-dark_primary/5;
            // box-shadow: 3px 3px 12px #dee1e4, -3px -3px 12px #fff;

            & > summary, & > div {
                @apply p-5;
            }
    
            & > summary {
                @apply block select-none cursor-pointer outline-none p-5 font-semibold;
                @apply text-on_surface dark:text-dark_on_surface;
                
                // BEGIN TRANSITION
                @apply mb-0;
                transition: all 600ms cubic-bezier(0.2, 1, 0.3, 1);
                // END TRANSITION
    
                &:hover {
                    @apply bg-opacity-5;
                }
            }
    
            &[open] {
                & > summary {
                    @apply mb-5; // TRANSITION
                }
            }
        }
    }
}