/* @expanded-carousel */
@import '~flickity/css/flickity.css';

@include flickity-buttons();

.expanded-carousel-container {
	background-image: url('data:image/svg+xml;utf8,<svg width="60" height="100" xmlns="http://www.w3.org/2000/svg"><path fill="#B2B2B2" d="M58 0h2v5h-2z" fill-rule="evenodd"/></svg>');
    width: 100%;
    background-color: white;
    background-position: center center;
    padding: $large-spacing 0;
    overflow: hidden;

    &--is-fullscreen {
    	min-height: 100vh;
    	position: fixed;
    	z-index: 350;
    	top: 0;
    	left: 0;
    }
}

.expanded-carousel {
	position: relative;
	max-width: 1024px;
	margin: 0 auto;
	padding: $large-spacing 0;

	&__fullscreen {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 10;

		@media (max-width: $medium-screen) {
			right: 3rem;
    		top: 1rem;
		}

		// .is-fullscreen & {
		// 	position: sticky;
		// 	left: 100%;
		// }
	}

	&:focus {
		outline: none!important;
	}

	&.is-fullscreen {
		position: absolute;
		left: 0;
		top: 120px;
		width: 100%;
		height: calc(100% - 120px);
		background: transparent;
		max-width: 100vw;
	}

	.flickity-viewport {
		overflow: visible;
		transition: height 0.2s;
	}

	&__slide {
		.is-fullscreen & {
			box-shadow: 1px 1px 1px transparent !important;
			max-width: 1024px;
			margin-right: 50vw;
			overflow: scroll;
			-ms-overflow-style: none;
			max-height: 100%;
    		
			background-color: transparent;
			
			// @media (min-width: $medium-screen) {
			// 	max-height: 100vh;
			// }
		}
		position: relative;
		transition: height 0.3s;
		width: 100%;
		margin-right: 50vw;
		background-color: white;
		transition: box-shadow 0.3s;
		min-height: 441px;

		&__header {
			display: block;
			height: 441px;
			max-height: 441px;
			display: flex;
			flex-direction: column;
			transition: 0.3s;

			@media (min-width: 768px) {
				flex-direction: row;
			}

			.is-fullscreen & {
				min-height: 400%;
				max-height:1999px;
				height: 100%;
			}
		}

		&__expanded {
			display: none;

			.generic-wysiwyg {
				padding: $large-spacing;
				background: $white;

				@media (max-width: $medium-screen) {
					padding: $large-spacing 4rem;
				}
			}

			.accordion {
				padding: $large-spacing;


				@media (max-width: $medium-screen) {
					padding: $large-spacing 4rem;
				}
			}

			.is-fullscreen & {
				display: block;
				padding-bottom: 120px;
			}

			// .block {
			// 	&:last-child {
			// 		margin-bottom: 120px;
			// 	}
			// }
		}

		&:first-child {
			.expanded-carousel__slide__header {
				height: 100%;
				max-height: none;
				min-height: 441px;
			}

			.expanded-carousel__image {
				height: auto;
				align-self: stretch;
			}

			@media (max-width: $medium-screen) {
				.expanded-carousel__card {
					flex-direction: column;
				}

				.expanded-carousel__indices {
					margin-top: 2rem;
				}
			}

			.expanded-carousel__content {
				&:after {
					display: none;
				}
			}
			
		}
	}

	&__image {
		height: 100%;
		min-height: 124px;
		background-position: center center;
		background-size: cover;
		flex:1;
		z-index: 10;

		@media (max-width: 767px) {
			padding-bottom: 60%;
		}

		@media (min-width: 768px) {
			width: 30%;
			max-width: 292px;
			height: 441px;
		}
	}

	&__card {
		display: flex;
		max-height: 100%;
		.is-fullscreen & {
			max-height: none;
		}

		@media (max-width: $medium-screen) {
			// flex-direction: column;
		}
	}

	&__content {
		padding: $large-spacing;
		overflow: hidden;
		flex: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;

		@media (max-width: $medium-screen) {
			padding: $large-spacing 4rem;

			h2 {
				width: 95%;
			}
		}

		&::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			height: 4rem;
			width: 100%;
			z-index: 1;
			background-image: linear-gradient(to bottom, rgba(#fff, 0.2), #fff);
			
			@media (max-width: $medium-screen) {
				background-image: linear-gradient(to bottom, rgba(#fff, 0.8), #fff);
			}
		}

		.is-fullscreen & {
			background-color: white;
			overflow: visible;

			&::after {
				opacity: 0;
			}
		}

		&__inner {
			flex: 1;
			overflow: hidden;
			height: 100%;
			position: relative;

			.is-fullscreen & {
				max-height: none;
			}
		}
	}

	&__indices {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
		max-width: 162px;
		margin-left: .75rem;

	    .cta {

	    	&--secondary {
	    		margin-top: auto;
	    		@include poly-margin-bottom--large;
	    		margin-right: 2em;
	    	}

	    	&__label {
	    		justify-content: space-between;
	    	}
	    }
	}

	&__close {
		margin: 1em;
		transform: scale(0) rotate(45deg);
		opacity: 0;
		transition: 0.3s;
		pointer-events: none;

		.is-fullscreen & {
			transform: scale(1) rotate(-45deg);
			opacity: 1;
			pointer-events: all;
		}

		@include themify($themes) {
			path {
				fill: themed('ctaColor');
			}
		}
	}

	&__expand {
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 0 1em;
		color: white;
		display: none;
		height: 50px;
		line-height: 50px;
		transition: 0.3s;
		z-index: 2;
		align-items: center;
		
		&--visible {
			display: flex;
		}

    	svg {
    		fill: white;
    		margin-left: 0.75rem;
    	}

		.is-fullscreen & {
			opacity: 0;
			pointer-events: none;
		}

		@include themify($themes) {
			background-color: themed('ctaColor');
		}
	}

	.flickity-page-dots {
	    width: 100%;
	    padding-bottom: $large-spacing;
	    text-align: center;
	    position: relative;

	    .dot {
	      margin: 0 $base-spacing 0 0;
	      position: relative;

	      @include themify($themes) {
	        background-color: themed('ctaColor');
	      }

	      &::before, &::after {
	        position: absolute;
	        top: 50%;
	        left: 50%;
	        margin: -18px 0 0 -18px;
	        width: 36px;
	        height: 36px;
	        border-radius: 50%;
	        content: '';
	        opacity: 0;
	        pointer-events: none;
	      }

	      &::before,
	      &::after {
	        @include themify($themes) {
	          box-shadow: 0 0 0 2px themed('ctaColor');
	        }
	      }

	      &.is-selected::before {
	        animation: anim-pulse-1 4s forwards;
	      }

	      &.is-selected::after {
	        animation: anim-pulse-2 4s forwards;
	      }
	    }
	}
}

.sideways-button {
	position: absolute;
	width: 50px;
	height: 441px;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: white;
	z-index: 20;
	transition: opacity 0.3s;

	// @media (min-width: $medium-screen) {
	// 	top: calc(#{$carousel-height} + (#{$base-spacing} / 2));
	// }

	// @media (min-width: $monster-screen) {
	// 	top: calc(#{$carousel-height} + (#{$large-spacing} / 2));
	// }

	&.is-open {
		// top: 50%;
		// margin-top: calc(#{$carousel-height} / 2 + #{$small-spacing});
		// @media (min-width: $medium-screen) {
		// 	margin-top: calc(#{$carousel-height} / 2 + #{$base-spacing});
		// }

		// @media (min-width: $monster-screen) {
		// 	margin-top: calc(#{$carousel-height} / 2 + #{$large-spacing});
		// }
	}

	&--previous {
		left: -5rem;

		.is-fullscreen & {
			left: 0;
			transform: translateY(1.5rem);

			@media (min-width: $medium-screen) {
				left: 2em;
			}
		}
	}

	&--next {
		right: -5rem;

		.is-fullscreen & {
			right: 0;
			transform: translateY(1.5rem);

			@media (min-width: $medium-screen) {
				right: 2em;
			}
		}
	}
	
	&--is-invisible {
		opacity: 0;
	}
	
	&__label {
		position: absolute;
		width: calc(441px - 100px);
		transform: translateX(-50%) translateY(-50px) rotate(-90deg);
		top: 50%;
		left: 50%;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #1d537d;
		font-family: "Biryani";
		font-weight: 900;
		font-size: 14px;

		@include themify($themes) {
          color: themed('ctaGradient');
        }

		&__text{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			width: calc(441px - 100px);
			text-align: center;
		}
	}
	
	&__arrow {
		margin-top: auto;
		height: 50px;
		background-color: #155ff2;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;

		svg {
			fill: white;
    		width: 50%;
		}

		 @include themify($themes) {
          background-color: themed('ctaColor');
        }
		
		.sideways-button--previous & {
			transform: rotate(180deg);
		}
	}
}


.flickity-enabled.is-fullscreen .flickity-page-dots {
  bottom: 10px;
}

.flickity-enabled.is-fullscreen .flickity-page-dots .dot {
  background: white;
}

/* prevent page scrolling when flickity is fullscreen */
html.is-flickity-fullscreen {
  overflow: hidden;
}

/* ---- flickity-fullscreen-button ---- */

.flickity-fullscreen-button {
  display: block;
  right: 10px;
  top: 10px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

/* right-to-left */
.flickity-rtl .flickity-fullscreen-button {
  right: auto;
  left: 10px;
}

.flickity-fullscreen-button-exit { display: none; }

.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit { display: block; }
.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view { display: none; }

.flickity-fullscreen-button .flickity-button-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 4px;
  top: 4px;
}