// =================================================================
// Intro Pullquote Styles - Configurable
// =================================================================
//
//
// Styles in this file should mainly be for layout, width, etc that are
// not able to be overwritten by the variables in the global sass array
//
//

#main .wp-block-bu-pullquote {
	position: relative;
};

.wp-block-bu-pullquote {
	position: relative;
	text-align: center;
	margin-bottom: 1.5em;


	.wp-component-media-credit {
		position: relative;
		z-index: 2; //ensure credit is on top of any background colors.

		&.align-full {
			padding-left: 1em;
			padding-right: 1em;
		}
	}
	.wp-block-bu-pullquote-inner {
		position: relative;
	}

	figure {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	img {
		@include object-fit( cover );
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	hr {
		margin: 2em 0;
	}
	blockquote {
		margin: 0;
		position: relative;
	}
	.container-text {
		&::after, &::before {
			display: table;
			clear: both;
			content: "";
		}
	}
	.quote-sizing {
		font-size: 1.25em;
		line-height: 1.5em;

		@include breakpoint( $xs ) {
			font-size: 1.5em;
		}
	}

	.caption {
		padding-bottom: 0;
	}

	&:not(.is-style-modern):not(.is-style-pop) {
		blockquote {
			&::before,
			&::after {
				box-sizing: content-box;
				display: block;
				font-size: 4em;
				height: 0.5em;
				left: 50%;
				line-height: 1em;
				margin-left: -0.5em;
				overflow: hidden;
				position:absolute;
				text-align: center;
				width: 1em;
			}
			&::before {
				content: '“';
				top: 0.25em;
			}
			&::after {
				content: '”';
				bottom: 0.25em;
			}
			hr {
				background: none;
				border: none;
				height: 1px;
				position: relative;
				&::before,
				&::after {
					content: '';
					background: #000;
					display: block;
					position: absolute;
					width: calc(50% - 3em);
					top: 0;
					bottom: 0;
				}
				&::before {
					left: 0;
				}
				&::after {
					right: 0;
				}
			}
		}
		&.has-image {
			color: #fff;

			.caption {
				color: #fff;
			}

			> img {
				display: block;
			}
		}
		.container-lockup {
			@extend %row-styles;
		}
		.container-text {
			@extend %row-child-styles;
			@extend %col-12;
		}
	}
	&.is-style-modern,
	&.is-style-pop {
		.container-lockup {
			@extend %row-styles;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-direction: row;
			flex-direction: row;
			-webkit-flex-wrap: wrap;
			-moz-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			-o-flex-wrap: wrap;
			flex-wrap: wrap;
		}
		.container-icon-outer {
			@extend %row-child-styles;
			@extend %col-4;
			display: -ms-flexbox;
			display: flex;
			pointer-events: none;
		}
		.container-icon-inner {
			width: 100%;
			position: relative;
		}
		.container-text {
			@extend %row-child-styles;
			@extend %col-8;
		}
	}
	&.is-style-modern {
		.container-icon-outer {
			margin: 2em 0;
		}
		.container-icon-inner {
			&::before {
				content: '“';
				font-size: 110px;
				line-height: 1.5em;
				height: 1em;
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: 2;
				margin-left: -0.25em;
				margin-top: -0.5em;
				@include breakpoint( $xs ) {
					font-size: 270px;
				}
			}
		}
		.wp-component-media-credit {
			margin-top: -2em;
			width: 100%;
		}
		&.has-image {
			.container-icon-inner {
				color: #fff;
				img {
					display: block;
				}
			}
		}
	}
	&.is-style-pop {
		.container-icon-inner {
			&::before {
				content: '“';
				font-size: 6em;
				line-height: 1.5em;
				height: 1em;
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: 2;
				margin-left: -0.25em;
				margin-top: -0.5em;
				@include breakpoint( $xs ) {
					font-size: 50vw;
					top: 0.09em;
				}
				@include breakpoint( $xl ) {
					font-size: 815px;
				}
			}
		}
		&.has-image {
			color: #fff;
			> img {
				display: block;
			}
		}
		blockquote {
			@extend %row-child-styles;
		}
	}
	&.has-image-focus-left-top {
		img {
			@include object-fit( cover, 25% 25% );
		}
	}
	&.has-image-focus-left-middle {
		img {
			@include object-fit( cover, 25% 50% );
		}
	}
	&.has-image-focus-left-bottom {
		img {
			@include object-fit( cover, 25% 75% );
		}
	}
	&.has-image-focus-center-top {
		img {
			@include object-fit( cover, 50% 25% );
		}
	}
	&.has-image-focus-center-middle {
		img {
			@include object-fit( cover, 50% 50% );
		}
	}
	&.has-image-focus-center-bottom {
		img {
			@include object-fit( cover, 50% 75% );
		}
	}
	&.has-image-focus-right-top {
		img {
			@include object-fit( cover, 75% 25% );
		}
	}
	&.has-image-focus-right-middle {
		img {
			@include object-fit( cover, 75% 50% );
		}
	}
	&.has-image-focus-right-bottom {
		img {
			@include object-fit( cover, 75% 75% );
		}
	}


	//Video Styles
	.wp-block-background-video {
		position: relative;
		height: 100%;
		overflow: hidden;

		iframe {
			display: block;
			left: 0;
			height: 100%;
			position: absolute;
			top: 0;
			width: 100%;
		}
	}

	.wp-block-background-video-ratio {
		display: block;
		height: 100%;
		padding-top: ( 9 / 16 ) * 100%;
		position: absolute;
		width: 100%;
		top: 50%;
		transform: translateY(-50%);
	}

	.wp-block-background-video-iframe {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: hidden;

		iframe {
			position: absolute;
			top: 0;
			left: 50%;
			height: 100%;
			width: 100%;

			width: 1000%;
			transform: translateX(-50%);
		}
	}

	.bu-blocks-background {
		&.has-background-opacity-00 {
			opacity: 0;
		}

		&.has-background-opacity-10 {
			opacity: 0.1;
		}

		&.has-background-opacity-20 {
			opacity: 0.2;
		}

		&.has-background-opacity-30 {
			opacity: 0.3;
		}

		&.has-background-opacity-40 {
			opacity: 0.4;
		}

		&.has-background-opacity-50 {
			opacity: 0.5;
		}

		&.has-background-opacity-60 {
			opacity: 0.6;
		}

		&.has-background-opacity-70 {
			opacity: 0.7;
		}

		&.has-background-opacity-80 {
			opacity: 0.8;
		}

		&.has-background-opacity-90 {
			opacity: 0.9;
		}
	}
}