Blockquotes

@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;

.ontario-blockquote,
.ontario-blockquote__container {
	border-left: globalFunctions.px-to-rem(4) solid colours.$ontario-greyscale-70;
	max-width: globalVariables.$standard-width;
	margin: spacing.$spacing-6;
	padding: spacing.$spacing-5 spacing.$spacing-0 spacing.$spacing-5 spacing.$spacing-5;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		margin: spacing.$spacing-5 spacing.$spacing-0 spacing.$spacing-6 spacing.$spacing-0;
	}
}

.ontario-blockquote__container > .ontario-blockquote {
	border-left: 0;
	max-width: none;
	margin: spacing.$spacing-0;
	padding: spacing.$spacing-0;
}

.ontario-blockquote {
	font-family: fonts.$ontario-font-raleway-modified;
	font-size: globalFunctions.px-to-rem(19);
	font-weight: fontWeights.$ontario-font-weights-normal;
	letter-spacing: 0.025rem;
	line-height: lineheight.$ontario-line-height-8;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: globalFunctions.px-to-rem(18);
		letter-spacing: 0.03rem;
		line-height: lineheight.$ontario-line-height-7;
	}
}

.ontario-blockquote--short {
	font-size: globalFunctions.px-to-rem(28);
	letter-spacing: 0.02rem;
	line-height: lineheight.$ontario-line-height-7;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: globalFunctions.px-to-rem(23);
		line-height: lineheight.$ontario-line-height-6;
	}
}

.ontario-blockquote p {
	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-5 spacing.$spacing-0;

	&::before {
		content: open-quote;
	}

	&::after {
		content: close-quote;
	}
}

.ontario-blockquote__attribution,
.ontario-blockquote__byline {
	display: block;
	font-size: globalFunctions.px-to-rem(16);
	letter-spacing: 0.025rem;
	line-height: lineheight.$ontario-line-height-8;
	text-align: right;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		letter-spacing: 0.03rem;
		line-height: lineheight.$ontario-line-height-7;
	}
}

.ontario-blockquote__attribution {
	font-style: normal;
	font-weight: fontWeights.$ontario-font-weights-bold;

	&::before {
		content: '\2014 \0020';
	}
}

blockquote {
	quotes: '\201C''\201D';
}

html[lang='fr'] blockquote {
	quotes: '« ' ' »';
}