/** === Includes === */

@use "mixins/mixins-main";
@use "mixins/utilities";
@use "variables-site/colors";
@use "variables-site/fonts";
@use "variables-site/structure";

/** === Editor Frame === */

body {
	background-color: var(--newspack-theme-color-bg-body);
}

/** === Content Width === */

.wp-block {
	max-width: 810px; // 780px + 30px to offset padding
}

/** === Base Typography === */

// stylelint-disable-next-line no-duplicate-selectors
body {
	font-size: var(--newspack-theme-font-size-base);
	font-family: var(--newspack-theme-font-body);
	line-height: var(--newspack-theme-font-line-height-body);
	color: var(--newspack-theme-color-text-main);
}

p {
	font-size: var(--newspack-theme-font-size-base);

	&.has-background {
		padding: 20px 30px;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--newspack-theme-font-heading);
	font-weight: 700;
	line-height: var(--newspack-theme-font-line-height-heading);
	a {
		color: var(--newspack-theme-color-text-main);
		text-decoration: none;

		&:visited {
			color: var(--newspack-theme-color-text-main);
		}
	}

	&.has-background {
		padding: 20px 30px;
	}
}

h1 {
	font-size: var(--newspack-theme-font-size-xl);

	@include utilities.media( tablet ) {
		font-size: var(--newspack-theme-font-size-xxl);
	}
}

h2 {
	font-size: var(--newspack-theme-font-size-lg);

	@include utilities.media( tablet ) {
		font-size: var(--newspack-theme-font-size-xl);
	}
}

h3 {
	font-size: calc(1em * 1.3);

	@include utilities.media( tablet ) {
		font-size: var(--newspack-theme-font-size-lg);
	}
}

h4 {
	font-size: var(--newspack-theme-font-size-md);
}

h5 {
	font-size: var(--newspack-theme-font-size-sm);
}

h6 {
	font-size: var(--newspack-theme-font-size-xs);
}

a {
	@include utilities.link-transition;

	color: var(--newspack-theme-color-secondary-against-white);

	&:hover,
	&:active {
		color: var(--newspack-theme-color-secondary-against-white);
		outline: 0;
		text-decoration: none;
	}

	&:focus {
		outline: 0;
		text-decoration: underline;
	}
}

.more-link {
	color: inherit;
	font-size: 0.8em;
	@include utilities.link-transition;

	margin: 0.5em 0;
}

table td,
table th {
	font-family: var(--newspack-theme-font-body);
	font-size: var(--newspack-theme-font-size-sm);
}

figcaption,
.gallery-caption,
.wp-caption-text,
.swiper-pagination-simple {
	color: var(--newspack-theme-color-text-light);
	font-family: var(--newspack-theme-font-heading);
	font-size: var(--newspack-theme-font-size-xxs);
	line-height: var(--newspack-theme-font-line-height-body);
	margin: 0 auto #{0.5 * structure.$size__spacing-unit};
	max-width: 810px;
	padding-left: 0;
	padding-right: 0;
}

.wp-block-column {
	&.is-style-rounded {
		border-radius: 6px;
	}

	figcaption {
		max-width: 100%;
	}
}

.has-text-color {
	figcaption,
	.wp-caption-text {
		color: inherit;
	}
}

/** === Post Title === */

.editor-post-title__block,
h1.wp-block-post-title {
	font-size: var(--newspack-theme-font-size-base); // Reset font size.
}

.editor-post-title__block .editor-post-title__input,
h1.wp-block-post-title {
	font-family: var(--newspack-theme-font-heading);
	font-size: var(--newspack-theme-font-size-xxl);
	font-weight: 700;
	line-height: 1.2;

	@include utilities.media( desktop ) {
		font-size: var(--newspack-theme-font-size-xxxl);
	}
}

/** === Post Meta === */

.entry-meta {
	color: var(--newspack-theme-color-text-light);
	font-family: var(--newspack-theme-font-heading);
	font-size: var(--newspack-theme-font-size-base);

	a {
		color: var(--newspack-theme-color-primary-against-white);
		font-weight: bold;
		text-decoration: none;
	}
}

.cat-links {
	font-family: var(--newspack-theme-font-heading);
}

/** === Default Appender === */

.editor-default-block-appender .editor-default-block-appender__content {
	font-family: var(--newspack-theme-font-body);
	font-size: var(--newspack-theme-font-size-base);
}

/** === Heading === */

.wp-block-heading {
	strong {
		font-weight: bolder;
	}
}

/** === Paragraph === */
.has-drop-cap:not(:focus)::first-letter {
	font-size: 4em;
	line-height: 0.75;
	margin: 0.125em #{0.75 * structure.$size__spacing-unit} 0 0;
	position: relative;
}

/** === Homepage Posts === */

.wpnbha {
	.more-link + .entry-meta {
		margin-top: #{0.75 * structure.$size__spacing-unit};
	}

	.cat-links a {
		color: inherit;
	}
}

/** === Newspack Carousel === */
.wp-block-newspack-blocks-carousel {
	a,
	a:visited,
	.entry-meta .byline a {
		color: #fff;
	}
}

/** === Table === */

.wp-block-table {
	font-family: var(--newspack-theme-font-heading);
	td,
	th {
		border-color: var(--newspack-theme-color-text-light);
	}
}

/** === Cover === */

.wp-block-cover {
	.accent-header,
	.article-section-title {
		color: inherit;
	}
	.wp-block-cover__inner-container {
		width: 100%;
	}

	a,
	a:visited,
	.entry-meta,
	.entry-meta a,
	.entry-meta a:visited,
	.entry-meta .byline a,
	.entry-meta .byline a:visited,
	cite {
		color: inherit;
	}

	h2 {
		padding-left: 0;
	}

	@include utilities.media( tablet ) {
		padding-left: structure.$size__spacing-unit;
		padding-right: structure.$size__spacing-unit;
	}
}

.wp-block[data-type="core/cover"][data-align="left"],
.wp-block[data-type="core/cover"][data-align="right"] {
	.wp-block-cover {
		min-height: 250px;
		padding: calc(1.375 * #{structure.$size__spacing-unit});

		@include utilities.media( tablet ) {
			max-width: 400px;
		}

		p {
			padding-left: 0;
			padding-right: 0;
		}

		@include utilities.media( tablet ) {
			padding: calc(2 * #{structure.$size__spacing-unit});
		}

		.wp-block-cover__inner-container {
			width: 450px;
			max-width: 100%;
		}

		.block-editor-block-list__block-edit {
			float: none;
			margin-left: 0;
			margin-right: 0;
		}

		[class*="wp-block-"] {
			&:first-child {
				margin-top: 0;
			}

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

.wp-block-columns {
	.wp-block-cover,
	.wp-block-cover-image {
		min-height: 330px;
		padding-left: 0;
		padding-right: 0;
	}

	.wp-block-cover__inner-container {
		width: 100%;
	}

	.wp-block-column {
		&,
		.wp-block {
			max-width: 100%;
		}

		> * {
			margin-bottom: 0;
			margin-top: 0;

			&:not(:first-child) {
				margin-top: 32px;
			}

			&:not(:last-child) {
				margin-bottom: 32px;
			}
		}
	}
}

/** === Image === */

.wp-block-image figcaption {
	margin-top: 0;
	text-align: left;
}

:not([data-align]) > .wp-block-image figcaption {
	width: 100%;
}

div:not([data-align]),
div[data-align="wide"],
div[data-align="full"] {
	> .wp-block-image figcaption {
		margin-top: 10px;
	}
}

[data-align="left"],
[data-align="right"] {
	&.wp-block .wp-block-image {
		table-layout: fixed;
		max-width: 50%;

		.components-resizable-box__container {
			height: auto !important;
			max-width: 400px !important;
		}
	}

	.wp-block-image > div > div {
		max-width: 100%;
		width: 100% !important; // !important to override inline styles.
	}
}

/** === Gallery === */

.wp-block-gallery {
	figcaption {
		margin-bottom: 0;

		a,
		a:hover {
			color: #fff;
		}
	}
}

/** === Audio & Video === */

.wp-block-audio figcaption,
.wp-block-video figcaption {
	text-align: left;
}

.wp-block-video video {
	width: 100%;
}

/** === Group === */
.wp-block[data-align="left"] > .wp-block-group,
.wp-block[data-align="right"] > .wp-block-group {
	max-width: 50%;

	@include utilities.media( mobile ) {
		iframe[style="width: 100%; height: 600px; max-width: 100%; max-height: 100%;"] {
			width: 400px !important; // !important to override inline style.
		}
	}
}

[data-type="core/group"] {
	&.is-selected .block-list-appender,
	.block-list-appender:only-child {
		margin-left: auto;
		margin-right: auto;
	}
}

/** === Button === */
.wp-block-buttons {
	--wp--style--block-gap: 10px;
}

.wp-block-button__link {
	border-radius: 5px;
	line-height: 1.8;
	font-family: var(--newspack-theme-font-heading);
	font-size: var(--newspack-theme-font-size-sm);
	font-weight: bold;

	&:not(.has-background) {
		background: var(--newspack-theme-color-secondary);
	}

	&:not(.has-text-color) {
		color: var(--newspack-theme-color-against-secondary);
	}
}

.is-style-outline .wp-block-button__link, // legacy selector
.wp-block-button__link.is-style-outline {
	&:not(.has-background) {
		background: transparent;
	}

	&:not(.has-text-color) {
		color: var(--newspack-theme-color-secondary-against-white);
	}
}

/** === Blockquote === */

.wp-block-quote {
	&:not(.is-large):not(.is-style-large) {
		border-width: 2px;
		border-color: var(--newspack-theme-color-link);
	}

	&.is-large,
	&.is-style-large {
		margin-top: var(--newspack-theme-font-size-xxl);
		margin-bottom: var(--newspack-theme-font-size-xxl);
	}

	&.is-large p,
	&.is-style-large p {
		font-size: var(--newspack-theme-font-size-lg);
		line-height: 1.3;
		margin-bottom: 0.5em;
		margin-top: 0.5em;
	}

	cite,
	footer,
	.wp-block-quote__citation {
		font-family: var(--newspack-theme-font-heading);
		font-size: var(--newspack-theme-font-size-xs);
		line-height: 1.6;
		color: var(--newspack-theme-color-text-light);
	}

	p {
		font-size: 1em;
		font-style: normal;
		margin-bottom: 0.5em;
	}

	&.has-background {
		padding: 30px;
	}

	&.has-text-color {
		cite,
		footer {
			color: inherit;
		}
	}
}

/** === Pullquote === */

.wp-block-pullquote {
	border-color: transparent;
	border-width: 4px 0 2px;
	color: #000;
	padding: structure.$size__spacing-unit 0;
	text-align: left;

	&.is-style-solid-color blockquote p,
	p {
		font-size: var(--newspack-theme-font-size-md);

		@include utilities.media( tablet ) {
			font-size: var(--newspack-theme-font-size-lg);
		}
	}

	blockquote {
		margin: #{1.5 * structure.$size__spacing-unit} 0;
	}

	p {
		font-style: italic;
		line-height: 1.3;
		margin-bottom: 0.5em;
		margin-top: 0.5em;
	}

	.wp-block-pullquote__citation {
		font-family: var(--newspack-theme-font-heading);
		font-size: var(--newspack-theme-font-size-xs);
		line-height: 1.6;
		text-transform: none;

		&::before {
			content: "\2014";
			margin-right: #{0.25 * structure.$size__spacing-unit};
		}
	}

	div.wp-block-pullquote__citation {
		opacity: 0.8;
	}

	em {
		font-style: normal;
	}

	&.is-style-solid-color,
	&.has-background,
	&[style*="border-style"][style*="border-width"] {
		padding: structure.$size__spacing-unit #{3 * structure.$size__spacing-unit} #{1.25 * structure.$size__spacing-unit};
	}

	&.is-style-solid-color {
		blockquote {
			max-width: 100%;
			width: 100%;

			a,
			&.has-text-color p,
			&.has-text-color a {
				color: inherit;
			}
		}

		&:not(.has-background-color) {
			background-color: var(--newspack-theme-color-link);
		}
	}

	&.has-text-align-center {
		text-align: center;
	}
}

[data-align="left"] .wp-block-pullquote,
[data-align="right"] .wp-block-pullquote {
	max-width: 50%;
	width: 50%;

	@include utilities.media( tablet ) {
		border-bottom: 0;
	}

	&:not(.is-style-solid-color) {
		padding: 0;
	}

	&.is-style-solid-color,
	&.has-background,
	&[style*="border-style"][style*="border-width"] {
		padding: structure.$size__spacing-unit #{2 * structure.$size__spacing-unit};
	}

	&.is-style-solid-color blockquote p,
	p {
		font-size: 1rem;

		@include utilities.media( tablet ) {
			font-size: var(--newspack-theme-font-size-md);
		}
	}

	&.has-text-align-center {
		text-align: center;
	}
}

.wp-block[data-type="core/pullquote"][data-align="full"],
[data-align="full"] {
	.wp-block-pullquote {
		padding-left: structure.$size__spacing-unit;
		padding-right: structure.$size__spacing-unit;
	}
}

/** === File === */

.wp-block-file {
	font-family: var(--newspack-theme-font-heading);
	font-size: var(--newspack-theme-font-size-sm);

	&.has-background {
		padding: structure.$size__spacing-unit;
	}

	.wp-block-file__textlink {
		text-decoration: underline;
		color: var(--newspack-theme-color-secondary-against-white);

		&:hover {
			color: var(--newspack-theme-color-secondary-against-white);
			text-decoration: none;
		}
	}

	.wp-block-file__button {
		color: var(--newspack-theme-color-against-secondary);
		display: table;
		line-height: 1.8;
		font-size: inherit;
		font-weight: bold;
		background-color: var(--newspack-theme-color-secondary);
		border-radius: 5px;
		padding: 10px 20px;
	}

	.wp-block-file__button-richtext-wrapper {
		display: block;
		margin-top: calc(0.75 * #{structure.$size__spacing-unit});
		margin-left: 0;
	}
}

/** === Verse === */

.wp-block-verse,
.wp-block-verse pre {
	font-style: italic;
	padding: 0;
}

/** === Search === */

.wp-block-search__button {
	background: var(--newspack-theme-color-secondary);
	border: 0;
	border-radius: 5px;
	color: var(--newspack-theme-color-against-secondary);
	line-height: 1.8;
	font-family: var(--newspack-theme-font-heading);
	font-size: var(--newspack-theme-font-size-sm);
	font-weight: bold;
	padding: ( 0.55 * structure.$size__spacing-unit ) structure.$size__spacing-unit !important; // !important to override style from Gutenberg.

	svg {
		height: 32px;
		width: 32px;
	}

	&.has-icon {
		padding: #{0.3 * structure.$size__spacing-unit} #{0.5 * structure.$size__spacing-unit} !important; // !important to override style from Gutenberg.
	}
}

.wp-block-search {
	input {
		border-color: var(--newspack-theme-color-border);
		border-radius: 0;
		padding: 0.36rem 0.66rem;
	}

	&.wp-block-search__button-inside {
		.wp-block-search__inside-wrapper {
			border-color: var(--newspack-theme-color-border);
			padding: 0;

			input {
				border: 0;
			}

			.wp-block-search__button {
				margin: 2px;
				padding: calc(0.76rem - 4px) 1rem;

				&.has-icon {
					padding: #{0.125 * structure.$size__spacing-unit} #{0.25 * structure.$size__spacing-unit} !important; // !important to override style from Gutenberg.
				}
			}
		}

		.has-icon {
			border: 0;
			&:not(.has-background) {
				background: transparent;
			}

			&:not(.has-text-color) {
				color: var(--newspack-theme-color-text-main);
			}
		}
	}

	&__button-behavior-expand:not(.wp-block-search__searchfield-hidden) {
		.wp-block-search__button {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
	}
}

/** === Code === */

.wp-block-code {
	border-radius: 0;
}

/** === Separator === */

.wp-block-separator {
	opacity: 1;

	&:not(.is-style-dots) {
		border: 0;
		border-top: 1px solid var(--newspack-theme-color-border);
	}

	&:not(.is-style-wide):not(.is-style-dots) {
		max-width: #{5 * structure.$size__spacing-unit};
		margin-left: auto;
		margin-right: auto;
	}

	&.is-style-dots::before {
		color: var(--newspack-theme-color-text-light);
		font-size: var(--newspack-theme-font-size-lg);
		letter-spacing: calc(2 * #{structure.$size__spacing-unit});
		padding-left: calc(2 * #{structure.$size__spacing-unit});
	}

	&.has-background,
	&.has-text-color {
		border-color: currentcolor;

		&.is-style-dots::before {
			color: inherit;
		}
	}
}

/** === Latest Posts, Archives, Categories === */

.wp-block-archives,
.wp-block-categories,
.wp-block-latest-posts {
	padding: 0;

	ul {
		padding: 0;
		margin-left: 0;
		list-style-type: none;
	}

	li {
		padding-bottom: ( 0.75 * structure.$size__spacing-unit );

		&.menu-item-has-children,
		&:last-child {
			padding-bottom: 0;
		}

		a {
			text-decoration: none;
		}

		ul {
			padding-left: structure.$size__spacing-unit;
		}
	}
}

ul.wp-block-archives,
.wp-block-categories {
	li {
		font-family: var(--newspack-theme-font-heading);
		font-size: calc(var(--newspack-theme-font-size-base) * var(--newspack-theme-font-size-ratio));
		font-weight: bold;
		line-height: var(--newspack-theme-font-line-height-heading);
	}
}

.wp-block-categories {
	ul {
		padding-top: ( 0.75 * structure.$size__spacing-unit );
		@include mixins-main.nestedSubMenuPadding();
	}

	li ul {
		list-style: none;
		padding-left: 0;
		margin-bottom: ( -0.75 * structure.$size__spacing-unit );
	}
}

/** === Latest Posts === */
.wp-block-latest-posts {
	li > a {
		font-family: var(--newspack-theme-font-heading);
		font-size: calc(var(--newspack-theme-font-size-base) * var(--newspack-theme-font-size-ratio));
		font-weight: bold;
		line-height: var(--newspack-theme-font-line-height-heading);
	}

	time {
		color: var(--newspack-theme-color-text-light);
		font-family: var(--newspack-theme-font-heading);
	}
	.wp-block-latest-posts__post-excerpt {
		font-size: 0.8em;
	}

	&.is-grid {
		li {
			border-top: 2px solid var(--newspack-theme-color-border);
			padding-top: ( 1 * structure.$size__spacing-unit );
			margin-bottom: ( 2 * structure.$size__spacing-unit );
			a {
				&::after {
					content: "";
				}
			}
			&:last-child {
				margin-bottom: auto;
				a::after {
					content: "";
				}
			}
		}
	}
}

/** === Latest Comments === */

.wp-block-latest-comments {
	padding-left: 0;

	ol {
		margin-left: 0;
	}

	.wp-block-latest-comments__comment {
		font-size: var(--newspack-theme-font-size-sm);
		line-height: var(--newspack-theme-font-line-height-body);
		margin-bottom: structure.$size__spacing-unit;
	}

	.wp-block-latest-comments__comment-meta {
		font-family: var(--newspack-theme-font-heading);
		font-weight: bold;

		a,
		a:visited {
			color: var(--newspack-theme-color-text-main);
			text-decoration: none;
		}

		.wp-block-latest-comments__comment-date {
			color: var(--newspack-theme-color-text-light);
			font-size: 0.9em;
			font-weight: normal;
			margin: #{0.5 * structure.$size__spacing-unit} 0;
		}
	}

	.wp-block-latest-comments__comment-excerpt p {
		font-size: 1.05em;
		margin: 0;
	}
}

/** === List === */

ul.wp-block-list {
	&.is-style-checked {
		list-style-type: none;
		padding-left: calc(24px + 0.25em);

		li {
			position: relative;

			&::before {
				background: currentcolor;
				clip-path: polygon(69.5833% 29.5834%, 43.3333% 65%, 29.5833% 54.5834%, 25.8333% 59.5834%, 44.5833% 73.75%, 74.5833% 33.3334%, 69.5833% 29.5834%);
				content: "";
				display: block;
				height: 24px;
				left: calc(-24px - 0.25em);
				position: absolute;
				top: calc(( 1em * var(--newspack-theme-font-line-height-body) - 24px ) / 2);
				width: 24px;
			}
		}
	}
}

/** === Jetpack Blocks === */

// Related Posts
.jp-relatedposts-i2 {
	a {
		color: var(--newspack-theme-color-text-main);
	}
	a,
	strong {
		font-family: var(--newspack-theme-font-heading);
		font-size: var(--newspack-theme-font-size-base);
		font-weight: bold;
		text-decoration: none;
	}

	.jp-related-posts-i2__post-date,
	.jp-related-posts-i2__post-context {
		font-family: var(--newspack-theme-font-heading);
		font-size: var(--newspack-theme-font-size-xs);
	}
}

/** === Query Block === */

.wp-block-post-date,
.wp-block-post-terms,
.wp-block-query-pagination {
	font-family: var(--newspack-theme-font-heading);
	font-size: var(--newspack-theme-font-size-sm);
}

// Pagination
.wp-block-query-pagination {
	font-weight: 700;
	line-height: 1.2;
	margin: #{3 * structure.$size__spacing-unit} 0;

	&,
	.wp-block-query-pagination-numbers {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.page-numbers {
		background-color: #eee;
	}

	span,
	a {
		margin-right: #{0.5 * structure.$size__spacing-unit};
		padding: #{0.65 * structure.$size__spacing-unit} #{0.85 * structure.$size__spacing-unit};
		text-decoration: none;

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

	.dots {
		background: transparent;
	}

	.current {
		background-color: var(--newspack-theme-color-text-light);
		color: #fff;
	}

	.wp-block-query-pagination-previous,
	.dots {
		padding-right: 0;
	}

	.wp-block-query-pagination-next,
	.dots {
		padding-left: 0;
	}
}

// Mailchimp
.wp-block-jetpack-mailchimp {
	.block-editor-rich-text__editable {
		font-size: var(--newspack-theme-font-size-sm);
	}

	.newspack-pattern.subscribe__style-5 & {
		p {
			text-align: center;
		}
	}
}

/** === Login/out block === */
.wp-block-loginout {
	font-family: var(--newspack-theme-font-heading);

	label,
	a {
		font-size: var(--newspack-theme-font-size-sm);
	}
}

/** === Details block === */
.wp-block-details {
	border: solid var(--newspack-theme-color-border);
	border-width: 1px 0;
	padding: 0.5rem 1.5rem;

	> :not(summary) {
		margin-bottom: 16px;
		margin-top: 16px;
	}

	summary {
		font-family: var(--newspack-theme-font-heading);
	}

	+ .wp-block-details {
		border-top: 0;
		margin-top: -28px;
	}
}

/** === Organic Profile Block === */
.wp-block-organic-profile-block {
	box-shadow: none;

	.organic-profile-image {
		align-items: center;
		background: none !important;
		margin-bottom: 16px;

		@media only screen and ( min-width: 768px ) {
			margin-bottom: 0;
			margin-right: 32px;
		}

		&.image-active {
			max-width: 100%;
		}

		img {
			display: block;
			margin: 0;
			opacity: 1;
		}

		button.image-button {
			border-radius: 0;
			height: auto;
		}
	}

	.organic-profile-content {
		padding: 0;
		width: 100%;

		h5 {
			color: var(--newspack-theme-color-text-light);
		}
	}

	.organic-profile-social {
		.social-link {
			border: 0;
			color: var(--newspack-theme-color-text-light);
			cursor: default;
			display: inline-block;
			font-size: 16px;
			height: 32px;
			line-height: 32px;
			padding: 0;
			pointer-events: none;
			text-align: center;
			width: 32px;

			&:active,
			&:focus,
			&:hover {
				color: inherit;
			}
		}
	}
}

/** === Subscribe Patterns === */
.wp-block-group.newspack-pattern {
	&.subscribe__style-5,
	&.subscribe__style-6 {
		.wp-block-jetpack-mailchimp {
			align-items: center;
			display: flex;
			flex-wrap: wrap;

			.wp-block-jetpack-mailchimp_text-input {
				flex: 1 1 auto;

				.components-base-control__field {
					margin-bottom: 0;
				}
			}

			.block-editor-inner-blocks {
				flex: 1 1 100%;

				@include utilities.media( mobile ) {
					flex: 0 0 auto;
					margin-left: calc(structure.$size__spacing-unit / 2);
				}

				.wp-block-button__link {
					width: 100%;

					@include utilities.media( mobile ) {
						width: auto;
					}
				}
			}

			.block-editor-rich-text__editable {
				flex: 0 0 100%;
			}
		}
	}

	&.subscribe__style-7 {
		.block-editor-block-list__layout[class*="is-size-"] & {
			margin-left: -32px;
			margin-right: -32px;
			max-width: calc(100% + 64px);
			width: calc(100% + 64px);

			&:first-child {
				margin-top: -32px;
			}
		}

		.wp-block-media-text {
			display: block;

			@include utilities.media( tablet ) {
				display: grid;
			}

			&__media {
				display: none;

				@include utilities.media( tablet ) {
					display: block;
				}
			}

			&__content {
				display: grid;
				gap: 16px;
				padding: 36px;

				@include utilities.media( tablet ) {
					padding: 64px;
				}

				> * {
					margin: 0;
				}
			}
		}

		.newspack-pattern__heading + p {
			font-size: 0.8em;
		}

		.wp-block-jetpack-mailchimp {
			display: grid;
			gap: 8px;

			* {
				margin: 0;
			}

			> .block-editor-inner-blocks {
				.wp-block-button {
					margin: 0;
				}
			}

			p {
				font-size: 0.7em;
			}
		}

		&.has-background {
			padding: 0;
		}
	}

	&.subscribe__style-8 {
		@include mixins-main.jetpack-mailchimp-editor;

		.block-editor-block-list__layout[class*="is-size-"] & {
			margin-left: -32px;
			margin-right: -32px;
			max-width: calc(100% + 64px);
			width: calc(100% + 64px);

			&:first-child {
				margin-top: -32px;
			}
		}

		.wp-block-image {
			display: none;
			margin-bottom: 0;

			@include utilities.media( tablet ) {
				display: block;
			}

			figcaption {
				display: none;
			}

			.components-resizable-box__container {
				display: block;
			}
		}

		.wp-block-group {
			margin-top: 0;
			padding: 0;

			.wp-block-group__inner-container {
				display: grid;
				gap: 16px;

				> * {
					margin: 0;
				}
			}
		}

		.newspack-pattern__inner {
			.wp-block-group__inner-container {
				padding: 36px;

				@include utilities.media( tablet ) {
					padding: 64px;
				}
			}
		}

		.newspack-pattern__heading + p {
			font-size: 0.8em;
		}

		&.has-background {
			padding: 0;
		}
	}

	&.subscribe__style-9 {
		@include mixins-main.jetpack-mailchimp-editor;

		.wp-block-columns {
			margin: 0;
			padding: 0;

			&:not(.is-not-stacked-on-mobile) > .wp-block-column {
				margin-bottom: 16px;

				@include utilities.media( mobile ) {
					margin-bottom: 0;
				}

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

			.wp-block-column {
				> * {
					margin-bottom: 16px;
					margin-top: 16px;

					&:first-child {
						margin-top: 0;
					}

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

		.newspack-pattern__heading + p {
			font-size: 0.8em;
		}

		&.has-background {
			padding: 32px;
		}
	}

	&.subscribe__style-10 {
		@include mixins-main.jetpack-mailchimp-editor( $gap: 0 );

		.wp-block-jetpack-mailchimp > p {
			display: none;
		}
	}
}

/** === Donate Block === */
.wpbnbd .freq-label,
.wpbnbd .tier-label,
.wpbnbd button {
	font-family: var(--newspack-theme-font-heading);
}

/** === Reader Registration Block === */
.newspack-registration button {
	font-family: var(--newspack-theme-font-heading);
}

/** === Ad Unit Block === */
.wp-block-newspack-ads-blocks-ad-unit {
	> div {
		align-items: center;
		display: flex;
		justify-content: center;
	}
}

/** === Newspack Listings === */
.wpnbha .featured-listing[class*="type-newspack_lst_"] .entry-title a,
.wpnbpc .featured-listing[class*="type-newspack_lst_"] .entry-title a,
.newspack-listings__curated-list .featured-listing .newspack-listings__listing-title {
	&::before {
		border: calc(0.25em + 1px) solid var(--newspack-theme-color-primary); // half the width
		border-top: 0;
		border-bottom-color: transparent; // the 'cut in'
		box-sizing: border-box;
		content: "";
		display: inline-block;
		height: 0.8em;
		margin-right: 0.3em;
		position: relative;
		top: 0.05em;
		width: 0.5em;
	}
}

/** === Classic Editor === */

/* Properly center-align captions in the classic-editor block */
.wp-caption {
	dd {
		color: var(--newspack-theme-color-text-light);
		font-family: var(--newspack-theme-font-heading);
		font-size: var(--newspack-theme-font-size-xs);
		line-height: var(--newspack-theme-font-line-height-body);
		margin: 0;
		padding: ( structure.$size__spacing-unit * 0.5 );
		text-align: center;
		-webkit-margin-start: 0;
		margin-inline-start: 0;
	}
}

.wp-block-freeform {
	/* Add style for galleries in classic-editor block */
	blockquote {
		border-left: 2px solid var(--newspack-theme-color-link);

		cite {
			font-family: var(--newspack-theme-font-heading);
			font-size: var(--newspack-theme-font-size-xs);
			font-style: normal;
			line-height: 1.6;
			color: var(--newspack-theme-color-text-light);
		}
	}
}

/** === Post Subtitle === */

#newspack-post-subtitle-element {
	font-style: italic;

	em,
	i {
		font-style: normal;
	}
}

/** === Custom Colors === */


$colors: (
	"accent": var(--newspack-theme-color-primary),
	"primary": var(--newspack-theme-color-primary),
	"primary-variation": var(--newspack-theme-color-primary-variation),
	"accent-2": var(--newspack-theme-color-secondary),
	"secondary": var(--newspack-theme-color-secondary),
	"secondary-variation": var(--newspack-theme-color-secondary-variation),
	"contrast": #111,
	"dark-gray": #111,
	"contrast-2": var(--newspack-theme-color-bg-dark),
	"contrast-3": #767676,
	"medium-gray": #767676,
	"base-5": var(--newspack-theme-color-text-light),
	"base-4": var(--newspack-theme-color-border),
	"base-3": var(--newspack-theme-color-border-light),
	"base-2": #eee,
	"light-gray": #eee,
	"base": #fff,
	"white": #fff,
);

@each $name, $hex in $colors {
	//! Custom background colors
	.has-#{$name}-background-color,
	.is-style-outline .wp-block-button__link.has-#{$name}-background-color, // legacy selector
	.wp-block-button__link.is-style-outline.has-#{$name}-background-color {
		background-color: $hex;
	}

	//! Custom foreground colors
	.has-#{$name}-color,
	.is-style-outline .wp-block-button__link.has-#{$name}-color, //legacy selector
	.wp-block-button__link.is-style-outline.has-#{$name}-color {
		color: $hex;
	}

	//! Custom border colors
	.has-#{$name}-border-color,
	.wp-block-pullquote.has-#{$name}-border-color {
		border-color: $hex;
	}
}

// Gradients
.has-grad-1-gradient-background {
	background-image: linear-gradient(135deg, var(--newspack-theme-color-primary) 0%, var(--newspack-theme-color-primary-variation) 100%);
}

.has-grad-2-gradient-background {
	background-image: linear-gradient(135deg, var(--newspack-theme-color-secondary) 0%, var(--newspack-theme-color-secondary-variation) 100%);
}
.has-grad-3-gradient-background {
	background-image: linear-gradient(135deg, rgb(17, 17, 17) 0%, rgb(85, 85, 85) 100%);
}
.has-grad-4-gradient-background {
	background-image: linear-gradient(135deg, rgb(68, 68, 68) 0%, rgb(136, 136, 136) 100%);
}
.has-grad-5-gradient-background {
	background-image: linear-gradient(135deg, rgb(119, 119, 119) 0%, rgb(221, 221, 221) 100%);
}
.has-grad-6-gradient-background {
	background-image: linear-gradient(135deg, rgb(221, 221, 221) 0%, rgb(255, 255, 255) 100%);
}
