// quote
.wp-block-quote {
	margin-inline: 0;

	// style
	&:not(.is-style-plain) {

		&:not(.has-text-align-center):not(.has-text-align-right) {
			border-inline-start: 4px solid var(--theme-palette-color-1);
		}

		&.has-text-align-center {
			padding-block: 1.5em;
			border-block: 3px solid var(--theme-palette-color-1);
		}

		&.has-text-align-right {
			border-inline-end: 4px solid var(--theme-palette-color-1);
		}
	}

	// alignment
	&:not(.has-text-align-center):not(.has-text-align-right) {
		padding-inline-start: 1.5em;
	}

	&.has-text-align-right {
		padding-inline-end: 1.5em;
	}

	p {
		margin-top: 0;

		&:last-of-type {
			margin-bottom: 0;
		}
	}

	cite {
		margin-top: 15px;
		font-size: 14px;
	}
}


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

	blockquote {
		margin: 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");
		}

		p {
			margin-top: 0;
			margin-bottom: 1em;

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

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



[data-align="left"],
[data-align="right"] {
	.wp-block-pullquote {
		max-width: 50%;
		margin-top: 0.3em;
		margin-bottom: 0.3em;
	}
}