/**
* timeline one and two block css.
* frontend and editor css
*/

$primary-color: #4e4f52;

/* The circles on the timeline */
@mixin circle {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 1;
    box-sizing: border-box;
}

/* timeline arrows*/
@mixin arrow {
    content: " ";
    position: absolute;
    height: 0;
    width: 0;
    z-index: 1;
    border: medium solid $primary-color;
}

@mixin right-arrow {
    @include arrow;
}

@mixin left-arrow {
    @include arrow;
}

.post-timeline-one,
.post-timeline-two {
    .sp-smart-post-timeline-container {
        display: grid;
        position: relative;

        /* The vertical timeline line */
        &::after {
            content: '';
            position: absolute;
            width: 6px;
            top: 0;
            left: 50%;
            height: 320px;
            border-radius: 4px;
            background: var(--smart-post-secondary);
        }

        &::before {
            content: '';
            position: absolute;
            width: 6px;
            top: 0;
            bottom: 0;
            left: 50%;
            border-radius: 4px;
            background: #E0E0E0;
        }

        &.timeline-one-layout-one {
            grid-template-columns: repeat(2, 1fr);
            align-items: start;

            .sp-smart-post-timeline-one-post-container {
                padding: 0px 40px;
                row-gap: 10px;
                position: relative;
                width: 100%;

                &:nth-of-type(odd) {
                    padding-left: 0;

                    .sp-smart-indicator-arrow{
                        @include right-arrow;
                        top: 22px;
                        right: 25px;
                        border-color: transparent transparent transparent #E0E0E0;
                        border-width: 15px 0 15px 15px;
                        transition: .3s;

                        &.active{
                            border-color: transparent transparent transparent var(--smart-post-secondary) ;
                        }
                    }

                    .sp-smart-indicator-circle{
                        @include circle;
                        right: -13px;
                        top: 25px;
                        background-color: #fff;
                        border: 4px solid #E0E0E0;
                        border-radius: 50px;

                        &.active{
                            border-color: var(--smart-post-secondary);
                        }
                    }
                }

                &:nth-of-type(even) {
                    padding-right: 0;

                    .sp-smart-indicator-arrow{
                        @include left-arrow;
                        bottom: 20px;
                        left: 25px;
                        border-color: transparent #E0E0E0 transparent transparent;
                        border-width: 15px 15px 15px 0;
                        transition: .3s;

                        &.active{
                            border-color: transparent var(--smart-post-secondary) transparent transparent;
                        }
                    }

                    .sp-smart-indicator-circle{
                        @include circle;
                        bottom: 25px;
                        left: -7px;
                    }
                }
            }
        }
        &.timeline-one-layout-two,
        &.timeline-one-layout-four {
            .sp-smart-post-timeline-one-post-container {
                padding: 0px 40px;
                row-gap: 10px;
                position: relative;
                width: 100%;

                &:nth-of-type(odd) {
                    padding-left: 0;
                    .sp-smart-indicator-arrow{
                        @include right-arrow;
                        top: 22px;
                        right: 25px;
                        transition: .3s
                    }
                    .sp-smart-indicator-circle{
                        @include circle;
                        right: -13px;
                        top: 25px;
                    }
                }

                &:nth-of-type(even) {
                    padding-right: 0;
                    .sp-smart-indicator-arrow{
                        @include left-arrow;
                        top: 26px;
                        left: 25px;
                        transition: .3s
                    }

                    .sp-smart-indicator-circle{
                        @include circle;
                        top: 30px;
                        left: -7px;
                    }
                }
            }
        }

        &.timeline-one-layout-five {
            &::after,
            &::before{
                right: -4px;
                left: unset;
            }
        }
        &.timeline-one-layout-six {
            &::after,
            &::before{
                left: 0;
            }
        }

        &.timeline-one-layout-five {
            grid-template-columns: 1fr;

            .sp-smart-post-timeline-one-post-container {
                position: relative;
                padding: 0px 40px 0 0;
                row-gap: 10px;

                .sp-smart-indicator-arrow{
                    @include right-arrow;
                    top: 22px;
                    right: 25px;
                    transition: .3s
                }

                .sp-smart-indicator-circle{
                    @include circle;
                    right: -11px;
                    top: 25px;
                }
            }
        }

        &.timeline-one-layout-six {
            grid-template-columns: 1fr;

            .sp-smart-post-timeline-one-post-container {
                position: relative;
                left: 0%;
                padding: 0px 0px 0px 40px;
                row-gap: 10px;
                .sp-smart-indicator-arrow{
                    @include left-arrow;
                    top: 22px;
                    left: 25px;
                    transition: .3s
                }

                .sp-smart-indicator-circle{
                    @include circle;
                    top: 25px;
                    left: -7px;
                }
            }
        }

        &.timeline-one-layout-two {
            grid-template-columns: 1fr;

            .sp-smart-post-timeline-one-post-container {
                width: 50%;

                &:nth-of-type(even) {
                    left: 50%;
                }
            }
        }

        &.timeline-one-layout-four {
            grid-template-columns: repeat(2, 1fr);

            .sp-smart-post-timeline-one-post-container {
                &:nth-of-type(even) {
                    margin-top: 60px;
                }
            }
        }
        .image-overlay {
            &.overlay-custom {
                z-index: 1;
            }
        }
    }
}
.post-timeline-one .sp-smart-post-card-image {
    a {
        width: 100%;
        height: 100%;
    }
}
.sp-smart-post-timeline-one-post-container::after,
.sp-smart-post-timeline-one-post-container::before {
  transition: 0.3s;
}

@media only screen and (max-width: 767px) { 
    .post-timeline-one .sp-smart-post-timeline-container, .post-timeline-two .sp-smart-post-timeline-container {
        grid-template-columns: 1fr !important;
        .sp-smart-indicator {
            display: none;
        }
    }
    .post-timeline-one .sp-smart-post-timeline-container::after, .post-timeline-one .sp-smart-post-timeline-container::before, .post-timeline-two .sp-smart-post-timeline-container::after, .post-timeline-two .sp-smart-post-timeline-container::before {
        display: none;
    }
    .post-timeline-one .sp-smart-post-timeline-container .sp-smart-post-timeline-one-post-container, .post-timeline-two .sp-smart-post-timeline-container .sp-smart-post-timeline-one-post-container {
        padding: 0 !important;
    }
}