.block-timeline
    &--vertical
        .events
            position: relative
        .event
            position: relative
            &:not(:last-child)
                padding-bottom: $spacing2
            &::before
                background: $color-text
                border-radius: 50%
                content: ""
                height: 9px
                left: half(-$grid-gutter)
                margin-top: 0.5em
                position: absolute
                width: 9px
                margin-left: -4px
            &::after
                background: $color-text
                bottom: -0.5em
                content: ""
                left: half(-$grid-gutter)
                position: absolute
                top: 0.5em
                width: 1px
            p:last-child
                margin-bottom: 0
            &:last-child::after
                display: none
            &-title
                @include h4
                + p
                    margin-top: $spacing0
        @include media-breakpoint-down(desktop)
            .event
                padding-left: half($grid-gutter-sm)
                &::after, &::before
                    left: 0
        @include media-breakpoint-up(desktop)
            @include in-page-without-sidebar
                .events
                    padding-left: 0
                .event
                    display: flex
                    &::before, &::after
                        left: col(3)
                        margin-left: half($grid-gutter)
                    &::before
                        transform: translateX(-4px)
                    &-title
                        width: col(3)
                        text-align: right
                        + p
                            margin-top: 0
                    p
                        padding-left: $grid-gutter
                        width: col(7)
                        &:first-child
                            margin-left: col(3)

    &--horizontal
        --min-title-height: 0px
        background: $block-timeline-horizontal-background
        color: $block-timeline-horizontal-color
        overflow: hidden
        padding-bottom: $grid-gutter
        padding-top: $grid-gutter
        &::before
            display: none
        .timeline
            &:hover
                cursor: grab
            &.is-grabbing
                cursor: grabbing
            
        .timeline-arrows
            display: flex
            padding-left: half($grid-gutter)
            > button
                @include button-reset
                background: none
                border: none
                color: $block-timeline-horizontal-color
                cursor: pointer
                &:first-child
                    @include icon-block(arrow-previous, before)
                    margin-left: $icon-arrow-previous-margin-left
                &:last-child
                    @include icon-block(arrow-next, before)
                &:disabled
                    cursor: default
                    opacity: 0.3
        .events
            margin-left: half(-$grid-gutter)
            margin-right: half(-$grid-gutter)
            // TODO : fixer le px gap en desktop entre chaque event
            ol
                display: flex
                flex-flow: row nowrap
                list-style: none
                padding-left: 0
                margin-top: $spacing1
                transition: margin 0.4s ease-in-out
                width: 100%
        .event
            flex: none
            padding: 0 half($grid-gutter)
            scroll-snap-align: start
            transition: 0.3s opacity
            width: 50%
            
            .title
                min-height: var(--min-title-height)
                margin-bottom: $spacing1
                @include signature
            .description
                @include small

            .line
                background: $block-timeline-horizontal-color
                height: 1px
                margin-bottom: $spacing1
                opacity: 1
                overflow: visible
                width: calc(100% + #{half($grid-gutter)})
                &::before
                    background: $block-timeline-horizontal-color
                    border-radius: 50%
                    content: ""
                    display: block
                    height: 9px
                    position: relative
                    top: -4px
                    width: 9px

            &.is-passed
                opacity: 0.15
            &:last-child
                .line
                    background: transparent

        @include media-breakpoint-up(desktop)
            .events
                ol
                    margin-top: $spacing2
            .event
                .line
                    width: calc(100% + #{$grid-gutter})
        
        @include in-page-with-sidebar
            .timeline
                padding-left: offset(4)

        @include in-page-without-sidebar
            @include media-breakpoint-up(xxl)
                .event
                    width: 25%

        @include media-breakpoint-down(desktop)
            .events
                position: relative
            .timeline-arrows
                left: 0
                position: absolute
                top: calc(#{$spacing2/2} + var(--min-title-height))
            .event
                padding-right: 0
                width: 75%
                .line
                    margin-bottom: calc(#{$spacing2} + var(--min-title-height))
        @include in-page-with-or-without-sidebar
            h2, h3
                @include h5