/* ======================================================
   <!-- Timeline -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/mixins';
@import '@uixkit/core/_global/scss/functions';
@import '@uixkit/core/_global/scss/variables';
/*
 * 1. Vertical
 * 2. Vertical  - Interaction
 * 3. Vertical & Reversed
 * 4. Horizontal - Interaction
 * 5. Horizontal & Reversed  - Interaction
 * 6. Horizontal ( Classic)  - Interaction
 * 7. Buttons
*/



/*
 ---------------------------
 1. Vertical
 ---------------------------
 */


.uix-timeline__container-wrapper {
    
    .uix-timeline__container {
        width: 100%;
        overflow: hidden;

        .uix-timeline {


            .uix-timeline__item {

                position: relative;
                margin: 3.5rem 0;
                padding-bottom: 3rem;

                &::after {
                    clear: both;
                    content: "";
                    display: table;
                }
                &:first-child {
                    margin-top: 0;
                }
                &:last-child {
                    margin-bottom: 0;
                }
                .uix-timeline__line {
                    height: calc( 100% + 5rem );
                    width: 1px;
                    background: var(--uix-highlight-color1);
                    position: absolute;
                    top: 40px;
                    left: 20px;
                }

                .uix-timeline__item__img {
                    position: absolute;
                    top: 0;
                    width: 40px;
                    height: 40px;
                    left: 20px;
                    margin-left: -20px;
                    cursor: pointer;
                    @include transition-default();

                    img {
                        width: 40px;
                        height: 40px;
                    }
                }

                .uix-timeline__item__info {
                    position: relative;
                    padding: 1.4rem;
                    width: calc(90% - 2.8rem);
                    margin-left: 120px;


                    @include outer-shadow( 'regular' );
                    @include transition-default();

                    &::after {
                        clear: both;
                        content: '';
                        display: table;
                    }
                    h3 {
                        font-size: 1.25rem;
                        line-height: 1.625;
                    }
                    p {
                        font-size: 0.875rem;
                        margin: 0.875rem 0;
                    }
                    .uix-timeline__item__date {
                        font-size: 0.875rem;
                        display: inline-block;
                        float: left;
                        padding: .6875rem 0;
                        opacity: .7;
                        position: absolute;
                        width: 100%;
                        left: -70px;
                        top: 0;


                    }

                }


            }


        }


    }



}





@media all and (max-width: 768px) {


    .uix-timeline__container-wrapper {
        .uix-timeline__container {

            .uix-timeline {

                .uix-timeline__item {

                    .uix-timeline__line {
                        left: 20px;
                    }
                    .uix-timeline__item__img {
                        left: 0;
                        margin-left: auto;
                    }

                    .uix-timeline__item__info {
                        width: 80%;
                        margin-left: 3.5rem;

                        .uix-timeline__item__date {
                            top: 45px;
                            left: -60px !important;
                            right: auto !important;
                            text-align: left !important;
                        }
                    }


                }

            }

        }


    }
 

}
    


/*
 ---------------------------
 2. Vertical  - Interaction
 ---------------------------
 */
.uix-timeline__container-wrapper.is-vertical.js-uix-timeline {

	.uix-timeline__container {
		padding: 0;
		margin: 0 auto;
        height: 400px;

		.uix-timeline {
            
            width: auto;
			height: 9999px;
			transition: .5s ease-in-out;

            
			.uix-timeline__item {

                margin: 0;
                padding: 0;
                
                
				.uix-timeline__item__img {
					/* Default status*/
					opacity: .3;
                    

                    .uix-timeline__item__date {
						font-size: 0.875rem;
						display: inline-block;
						min-width: 100px;
                        transform: translate(50px, -35px);
                    }       
                    
				}
                


				.uix-timeline__item__info {
					margin-bottom: 0;
					float: none;
					left: 0;
                    opacity: 0;
                    transform: translateY(100px);
                
				}
                
                
				&.is-active {

					.uix-timeline__item__img {
						opacity: 1;
					}

					.uix-timeline__item__info {
                        opacity: 1;
                        
						.uix-timeline__item__date {
							color: var(--uix-highlight-color1);
						}
					}

				}



			}//.uix-timeline__item end





		}


	}

}


@media all and (max-width: 768px) {

    .uix-timeline__container-wrapper.is-vertical.js-uix-timeline {

        .uix-timeline__container {

            .uix-timeline {

                .uix-timeline__item {

                    .uix-timeline__item__img {

                        .uix-timeline__item__date {
                            transform: translate(0,0);
                        }       

                    }


                }//.uix-timeline__item end


            }


        }

    }
   
}


/*
 ---------------------------
 3. Vertical & Reversed
 ---------------------------
 */

@media all and (min-width: 769px) {

    .uix-timeline__container-wrapper.is-vertical.is-reversed {
        

        .uix-timeline__container {

            .uix-timeline {

                .uix-timeline__item {

                    .uix-timeline__line {
                        left: 50%;
                    }


                    .uix-timeline__item__img {
                        left: 50%;
                    }

                    .uix-timeline__item__info {
                        margin-left: 10px;
                        width: 45%;

                        .uix-timeline__item__date {
                            left: 122%;
                        }

                    }

                    &:nth-child(odd) .uix-timeline__item__img {
						.uix-timeline__item__date {
							transform: translate(-50%, -135%);
						}	
                    }

                    &:nth-child(even) .uix-timeline__item__info {
                        float: right;
                        margin-right: 10px;

                        .uix-timeline__item__date {
                            left: auto;
                            right: 122%;
                            text-align: right;
                        }
                    }

                }


            }


        }    
    }

}



@media all and (max-width: 768px) {

    
    .uix-timeline__container-wrapper.is-vertical.is-reversed {

        .uix-timeline__container {

            .uix-timeline {

                .uix-timeline__item {

                    &:nth-child(even) .uix-timeline__item__info {
                        float: none;
                    }


                }

            }

        }    
        
    }


}

/*
 ---------------------------
 4. Horizontal  - Interaction
 ---------------------------
 */
$horizontal-item-width: 250px;
$horizontal-container-width: 1000px;

    
.uix-timeline__container-wrapper.is-horizontal {

	.uix-timeline__container {
		padding: 3.5rem 0;
		width: $horizontal-container-width;
		margin: 0 auto;

		&::after {
			content: '';
			display: block;
			position: absolute;
			z-index: 0;
			background-color: var(--uix-highlight-color1);
			background-image: linear-gradient(to right, var(--uix-btn-gradient-color1) 0%, var(--uix-btn-gradient-color2) 20%, var(--uix-btn-gradient-color3) 100%);
			width: 100%;
			height: 1px;
			top: 104px;
			left: 0;

		}



		.uix-timeline {

			width: 9999px;
			transition: .5s ease-in-out;


			&::after {
				clear: both;
				content: "";
				display: table;
			}


			.uix-timeline__item {
				float: left;
				width: $horizontal-item-width;
				margin: 0;

				&::after {
					display: none;
				}
				.uix-timeline__line {
					height: 1px;
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}

				.uix-timeline__item__img {
					top: -20px;
					left: 50%;
					transform: translateX(-50%);
					margin-left: 0;
					z-index: 3;
					cursor: pointer;

					/* Default status*/
					opacity: .3;



				}


				.uix-timeline__item__info {
					min-width: #{$horizontal-item-width - 50};
					margin-bottom: 17px;
					/* Scrollbar width is 17px by default */
					float: none;
					top: 25px;
					transform: translateX(-50%);
					left: 0;

					.uix-timeline__item__date {
						position: absolute;
						display: inline-block;
						width: 50px;
						overflow: hidden;
						float: none;
						top: -85px;
						z-index: 2;
						text-align: center;
						/* Vertical Center */
						left: 50%;
						transform: translateX(-50%);
					}
				}


				&.is-active {

					.uix-timeline__item__img {
						opacity: 1;
					}

					.uix-timeline__item__info {
						.uix-timeline__item__date {
							color: var(--uix-highlight-color1);
						}
					}

				}



			}//.uix-timeline__item end





		}


	}

}



@media all and (max-width: 768px) {

	.uix-timeline__container-wrapper.is-horizontal {

		.uix-timeline__btn {
			display: none;
			background: #f00;
		}

		.uix-timeline__container {
			padding: 0;
			width: auto;

			&::after {
				display: none;
			}

			.uix-timeline {
				width: 100%;

				.uix-timeline__item {
					float: none;
					width: 100%;
					max-width: none;
					margin: 0 0 3.5rem;

					.uix-timeline__line {
						height: calc( 100% + 5rem );
						width: 1px;
						left: 36px;
						top: 20px;
					}

					.uix-timeline__item__img {
						top: 20px;
						left: 16px;
						margin-left: 20px;
						opacity: 1;
					}

					.uix-timeline__item__info {
						position: relative;
						width: calc( 80% - 40px );
						margin: 0;
						margin-left: .5rem;
						left: 50%;

						.uix-timeline__item__date {
							float: left;
							top: 45px;
							left: -28px !important;
							right: auto !important;
						}
					}


					&.is-active {

						.uix-timeline__item__info {
							.uix-timeline__item__date {
								color: inherit;
							}
						}

					}

				}

			}
		}


	}

}

/*
 ---------------------------
 5. Horizontal & Reversed  - Interaction
 ---------------------------
 */
@media all and (min-width: 769px) {
	.uix-timeline__container-wrapper.is-horizontal.is-reversed {

		.uix-timeline__btn {
			top: 50%;
			transform: translateY(-50%);
			margin-top: -45px;

		}

		.uix-timeline__container {

			&::after {
				top: 50%;
				margin-top: -44px;
			}


			.uix-timeline {

				.uix-timeline__item:nth-child(odd) {


					.uix-timeline__item__img {
						position: relative;
						margin-top: 0;
					}
					

					.uix-timeline__item__info {
						position: absolute;

					}


				}//.uix-timeline__item end

				.uix-timeline__item:nth-child(even) {


					.uix-timeline__item__img {
						position: relative;
						margin-top: 0;
					}

					.uix-timeline__item__info {
						position: absolute;
						transform: translate(-50%, -100%);/* Required */
						margin-top: -50px;


						.uix-timeline__item__date {
							top: auto;
							bottom: -90px;

						}


					}


				}//.uix-timeline__item end


			}


		}

	}


}




/*
 ---------------------------
 6. Horizontal ( Classic)  - Interaction
 ---------------------------
 */

.uix-timeline__container-wrapper.is-horizontal.uix-timeline__container-wrapper--classic {

	.uix-timeline__btn {
		top: 147px;
	}

	.uix-timeline__container {

		&::after {
			top: 171px;
		}


		.uix-timeline {


			.uix-timeline__item {

				padding-bottom: 8rem;

				.uix-timeline__line {
					display: none;
				}



				.uix-timeline__item__img {

					.uix-timeline__item__date {
						font-size: 0.875rem;
						display: inline-block;
						min-width: 100px;
					}

				}

				.uix-timeline__item__info {
					width: #{$horizontal-item-width*2};
					margin: 0 auto;
					top: 135px;
					opacity: 0;
					left: 0;
					text-align: center;
					transform: translateX(#{$horizontal-item-width});


				}


				&.is-active {
					.uix-timeline__item__info {
						opacity: 1;
					}

				}



			}


			/* Whether to slide to the middle. */
			&.uix-timeline--to-center {
				transform: translateX(#{$horizontal-item-width + calc($horizontal-item-width/2)});

				.uix-timeline__item {

					.uix-timeline__item__info {
						transform: translateX(-#{calc($horizontal-item-width/2)});

					}


				}

			}


		}


	}

}



@media all and (max-width: 768px) {

	.uix-timeline__container-wrapper.is-horizontal.uix-timeline__container-wrapper--classic {


		.uix-timeline__container {

			.uix-timeline {

				.uix-timeline__item {

					padding-bottom: 3rem;

					.uix-timeline__line {
						display: block;
					}


					.uix-timeline__item__info {
						position: relative;
						width: calc( 80% - 40px );
						margin: 0;
						margin-left: .5rem;
						top: 25px;
						left: 3.5rem;
						opacity: 1;
						text-align: left;
						transform: translateX(0);


					}



				}

				/* Whether to slide to the middle. */
				&.uix-timeline--to-center {
					transform: translateX(0);

					.uix-timeline__item {

						.uix-timeline__item__info {
							transform: translateX(0);

						}


					}

				}


			}


		}

	}


}



/*
 ---------------------------
 7. Buttons
 ---------------------------
 */

.uix-timeline__container-wrapper {

	.uix-timeline__btn {
		box-shadow: 0px 10px 54px 0px rgba(19, 32, 62, 0.21);
		border-radius: 100%;
		width: 50px;
		height: 50px;
		position: absolute;
		z-index: 3;
		transition: .3s ease-in-out;
		line-height: 50px;
		text-align: center;
		background: #fff;


		&.is-disabled {
			display: none;
		}
	}
    
    &.is-vertical {
        .uix-timeline__btn {
            top: -60px;
            left: 10px;

            &.uix-timeline__btn--next {
                top: auto;
                bottom: -60px;
            }
            &.uix-timeline__btn--prev:hover {
                margin-top: -0.3125rem;
            }
            &.uix-timeline__btn--next:hover {
                margin-bottom: -0.3125rem;
            }
        }
        
    }

	&.is-vertical.js-uix-timeline.is-reversed {
		.uix-timeline__btn {
			left: 50%;
			transform: translateX(-50%);	
		}
	}
    
    
    &.is-horizontal {
        .uix-timeline__btn {
            left: 8%;
            top: 80px;

            &.uix-timeline__btn--next {
                left: auto;
                right: 8%;
            }
            &.uix-timeline__btn--prev:hover {
                margin-left: -0.3125rem;
            }
            &.uix-timeline__btn--next:hover {
                margin-right: -0.3125rem;
            }
        }
        
    }
    
    
}