@use "../../1-helpers/functions";

figure.wp-block-pullquote {
	position: relative;
	padding: 70px;
	text-align: initial;
	border-width: 10px;
	border-style: solid;
	border-color: var(--theme-palette-color-1);

	@include functions.media-breakpoint-down (sm) {
		padding: 50px;
	}

	blockquote {
		border: 0;
		padding: 0;
		position: relative;
		isolation: isolate;

		&:before {
			position: absolute;
			z-index: -1;
			content: '';
			width: var(--quote-icon-size, 70px);
			height: var(--quote-icon-size, 70px);
			top: calc(var(--quote-icon-size, 70px) / -3);
			inset-inline-start: calc(var(--quote-icon-size, 70px) / -3);
			opacity: 0.15;
			background-color: currentColor;
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0,19.04v-8.62c-0.04-1.24,0.14-2.4,0.54-3.49S1.49,4.88,2.2,4.06C2.92,3.23,3.77,2.55,4.76,2C5.76,1.46,6.84,1.11,8,0.96 v3.72C6.58,5.17,5.6,5.89,5.07,6.85C4.55,7.8,4.29,8.98,4.29,10.37H8v8.67H0zM12,19.04v-8.62c-0.04-1.24,0.14-2.4,0.53-3.49 s0.95-2.05,1.66-2.87c0.71-0.83,1.57-1.51,2.56-2.06c0.99-0.54,2.08-0.89,3.24-1.04v3.72c-1.43,0.49-2.4,1.21-2.93,2.17c-0.53,0.96-0.79,2.13-0.79,3.52H20v8.67H12z'/%3E%3C/svg%3E");

			@include functions.media-breakpoint-down (sm) {
				--quote-icon-size: 40px;
			}
		}

		p {
			margin-bottom: 1em;

			&:last-child {
				margin-bottom: 0;
			}
		}

		cite {
			font-size: 16px;
			font-weight: 500;
		}
	}
}