@import '../../common';

.rs-marquee-slider-gsap {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	text-transform: uppercase;
	text-align: center;
	.gsap-marquee {
		.marquee-wrapper {
			min-width: max-content;
			.slider-item {
				display: inline-block;
				.marquee-item{
					display: inline-flex;
					align-items: center;
					> p {
						margin: 0;
					}
					.image-wrapper{
						display: inline-block;
						position: relative;
						margin: 0 50px;
						img {
							height: 80px;
							width: auto;
						}
						.image-content-box{
							position: absolute;
							left: 0;
							top: 100%;
							background: $primaryColor;
							width: 450px;
							padding: 28px 35px 35px;
							text-align: left;
							text-transform: none;
							opacity: 0;
							visibility: hidden;
							transition: $transition;
							&::before{
								position: absolute;
								content: '';
								left: 32px;
								top: -20px;
								width: 0;
								height: 0;
								border-left: 7px solid transparent;
								border-right: 7px solid transparent;
								border-bottom: 20px solid $primaryColor;
							}
							p{
								color: $whiteColor;
								font-size: 16px;
								margin-bottom: 20px;
							}
							.user-box{
								display: flex;
								justify-content: space-between;
								align-items: center;
								.author{
									.title{
										margin-bottom: 0;
										color: $whiteColor;
									}
									span{
										display: inline-block;
										color: $whiteColor;
									}
								}
								.review{
									ul{
										margin: 0;
										padding: 0;
										list-style-type: none;
										li{
											display: inline-block;
											i{
												color: $whiteColor;
											}
										}
									}
								}
							}
						}
					}
					&:hover{
						.image-content-box{
							opacity: 1;
							visibility: visible;
						}
					}
				}
				p{
					display: inline-block;
				}
				&:not(.image) {
					font-size: 100px;
					line-height: 1;
					color: $titleColor;
					font-weight: 700;
					i {
						display: inline-block;
						font-size: inherit;
					}
				}
			}
		}
	}
}